/* 基本設定 */
html {
  scroll-behavior: smooth;
}

/* Safari (WebKit) 環境をターゲットにする */
@supports (-webkit-hyphens:none) {
  html {
    scroll-behavior: auto !important;
  }
}
#preload{
    height: 500vh;
    background-size: cover;
    background-position: center;
    background-color: #b0b0b0;
    /*background-image:url("../image/background.png");*/
    z-index:9999;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: /*"Times"*/"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    /*overflow-y: hidden;*/
}

.top_motion{
    position:relative;
    height:100svh;
    width:100svw;
    overflow: hidden;
    display: flex;
    align-items: center;      
    justify-content: center;
}

#main_motion{
    height: 110%;
    opacity: 1.0;
    transition: opacity 1.0s ease;
    /*filter:saturate(100%)*/

}

.icon{
    top:2.7%;
    position:fixed;
    right:3%;
}

#x_icon{
    margin: 8px;
    width:22px;
    aspect-ratio: 1;
}

#insta_icon{
    margin: 8px;
    width:22px;
    aspect-ratio: 1;
}

#concept{
    text-align: center;
    position:absolute;
    opacity:0;
    transition: opacity 1.0s ease;

    color: #4a4a4a;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 235%; /* 28.2px */
    letter-spacing: 0.96px;

    padding-left: 3%
}
@media screen and (max-width: 500px) {
    #concept{
        font-size: 13px;
    }
    .top_motion{
    /*min-height: 898px;*/
    }
}

.animation{
    /*width:500px;
    height:500px;*/
    position: absolute;
    /*height:100%;*/
    height:100%;
    /*width:calc(100svh * 57/85);*/
    width:calc(100svh * 2);

    background-size:900% auto;
}

@media screen and (min-width: 500px) {
    .animation{
        transform: scale(1.2,1.2);
    }
     
}

.current{
    /*background-image: url("../image/GW26scratch_9len.png");*/
    background-image: url("../image/1st_scratch_20251231_400_800_2x.webp");
    animation: scratch 0.75s steps(8) forwards;
    animation-delay: 1.5s;
}

@keyframes scratch{
    to {
        background-position: -800% 0;
    }
}

.next{
    opacity:0;
}

@keyframes scratch2{
    0%{
        background-position: 0% 0;
    }
    100%{
        background-position: -800% 0;
    }
}

#top_image{
    opacity: 0;
    transition: opacity 1.0s ease;
    z-index:10;
}

:root{
    --move-title: -6912px;
    --move-date: -2040px;
    --move-access: -2040px;
}

.top_title_container{
    position: fixed; 
    top: 20px;       
    left: 20px;     
    pointer-events: none; 
}

.top_title{
    pointer-events: auto; 
    width: 432px;
    height: 72px;
    background-image: url("../image/top_title_white_16.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 6912px 72px;
}

.top_title.top_animation {
    animation: top_title 0.7s steps(16);
}

@keyframes top_title{
    from {
        background-position: 0 0;
    }
    to {
        background-position: var(--move-title) 0;
    }
}

.top_date_container{
    position: fixed; 
    bottom: 120px;       
    right: 40px;     
    pointer-events: none; 
    z-index: 9999;
}

.top_date{
    pointer-events: auto; 
    width: 127.5px;
    height: 153px;
    background-image: url("../image/top_date_white_16.webp");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 2040px 153px;
}

.top_date.top_animation {
    animation: top_date 0.7s steps(16);
}

@keyframes top_date{
    from {
        background-position: 0 0;
    }
    to {
        background-position: var(--move-date) 0;
    }
}

.top_access_container{
    position: fixed; 
    bottom: 40px;       
    right: 40px;     
    pointer-events: none;
    z-index: 9999;
}

.top_access{               /*変更必要*/
    pointer-events: auto; 
    width: 127.5px;
    height: 46.75px;
    background-image: url("../image/top_access_white_16.webp");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 2040px 46.75px;
}

.top_access.top_animation {
    animation: top_access 0.7s steps(16);
}

@keyframes top_access{      
    from {
        background-position: 0 0;
    }
    to {
        background-position: var(--move-access) 0;
    }
}

@media screen and (max-width: 500px) {
    :root{
        --move-title: -4800px;
        --move-date: -1440px;
        --move-access: -1440px;
    }

    .top_title_container{
        top: 25px; 
        left: 10px;      
    }
    .top_title{
        width: 300px;
        height: 50px;
        background-size: 4800px 50px;
    }

    .top_date_container{
        bottom: 70px;
        right: 20px;  
    }
    .top_date{
        width: 90px;
        height: 108px;
        background-size: 1440px 108px;
    }

    .top_access_container{
        bottom: 20px;
        right: 20px;  
    }
    .top_access{ 
        width: 90px;
        height: 33px;
        background-size: 1440px 33px;
    }
}

.none{
    display: none;
}

section{
    padding:0px 8svw 200px 8svw; 
}

@media screen and (min-width: 500px) {
    section{
        padding:0px 3svw 200px 3svw; 
    }
}

/*
.event{
    background-color: lightcoral;
}

.catalog{
    background-color: lightblue;
}

.sponsor{
    background-color: lightgreen;
}

.access{
    background-color: lightpink;
}
*/

/* --- 1. 初期状態 --- */
.tubu {
    position: absolute;
    z-index: -1;
    opacity: 0;         /* 最初は透明 */
    visibility: hidden;
    transform: translateY(20px);
}

/* --- 2. クラスがついた時のアニメーション設定 --- */
/* アニメーション名は個別に指定するため、共通部分は transform のみ */
.tubu.is-visible {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0s ease, visibility 1s; /* 位置は1.5秒で移動 */
}

/* --- 3. 各要素ごとのアニメーション実行 --- */
/* 0.6に落ち着くグループ */
#tubu_1_1.is-visible, #tubu_1_2.is-visible, #tubu_1_3.is-visible {
    animation: fadeFullThenTo06 1s forwards; /* 1秒かけて実行し、最後（0.6）で止まる */
}

/* 0.5に落ち着くグループ */
#tubu_4.is-visible {
    animation: fadeFullThenTo05 1s forwards;
}

/* 0.4に落ち着くグループ */
#tubu_5.is-visible, #tubu_6.is-visible {
    animation: fadeFullThenTo04 1s forwards;
}

/* --- 4. アニメーションの設計図 --- */

/* 0から1へ上がり、0.6へ着地する */
@keyframes fadeFullThenTo06 {
    0%   { opacity: 0; }
    40%  { opacity: 1; }   /* 途中で一度マックス(1)になる */
    100% { opacity: 0.6; } /* 最後は0.6で固定 */
}

/* 0から1へ上がり、0.5へ着地する */
@keyframes fadeFullThenTo05 {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    100% { opacity: 0.5; }
}

/* 0から1へ上がり、0.4へ着地する */
@keyframes fadeFullThenTo04 {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    100% { opacity: 0.4; }
}

.event_content{
    background-color: white;
    /*height: 450px;*/
    max-width: calc(1000px - 6svw);
    margin: 0 auto;
}


.catalog_content{
    background-color: white;
    /*height: 513px;*/
    max-width: calc(1000px - 6svw);
    margin: 0 auto;
}

.sponsor_content{
    background-color: white;
    /*height: 741px;*/
    max-width: calc(1000px - 6svw);
    margin: 0 auto;
}

.access_content{
    background-color: white;
    /*height: 485px;*/
    max-width: calc(1000px - 6svw);
    margin: 0 auto;
}

h1{
    padding: 3.5px 0px;
    /*color: #6b6b6b;*/
    color: #4a4a4a;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 0%; 
    letter-spacing: -0.154px;
}

hr{
    border: solid 0.6px #20ccef;
}

#event_index{
    margin-top: 300px;
}

#event_text{
    padding-top: 7px; /*仮*/
    color: #4a4a4a;
    font-size: 12.6px;
    font-weight: 500;
    line-height: 200%; /* 18px */
    letter-spacing: 0.5px;
}

.event_detail_link{
    color: #ffb3d1;
}

.event_main_container{
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.event_project_talk{
    flex: 1;
}

.project_talk_title{
    color: #ed2d9a;
    font-size: 14px;
    font-weight: 500;
    margin-bottom:25px;
}

.project_talk_subtitle{
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0px;
}

.project_talk_description{
    color: #4a4a4a;
    font-size: 12.6px;
    font-weight: 500;
    line-height: 200%;
    letter-spacing: 1px;
    margin-bottom: 0px;
}

#event_schedule{
    margin-top: 30px;
    padding: 0;
}

.schedule_item{
    margin-bottom: 30px;
}

.schedule_item:last-child{
    border-bottom: none;
}

.schedule_date{
    color: #1791e2;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    border-bottom: solid 0.2px #c5e2e8;
    padding-bottom: 6px;
}

.schedule_content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.schedule_entry{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.schedule_name{
    color: #4a4a4a;
    font-size: 11.6px;
    font-weight: 500;
    line-height: 180%;
    letter-spacing: 0.2px;
    flex: 1;
}

.schedule_time{
    color: #3a9e1e;
    font-size: 11.6px;
    font-weight: 500;
    white-space: nowrap;
    padding-bottom: 24px;
}

.event_right_column{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.event_goods,
.event_cafe{
    display: flex;
    flex-direction: column;
}

.event_section_title{
    color: #ed2d9a;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0px;
}

.event_section_text{
    color: #4a4a4a;
    font-size: 12.6px;
    font-weight: 500;
    line-height: 200%;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.event_image{
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width: 500px) {
    .event_main_container{
        flex-direction: row;
        gap: 14%;
        align-items: flex-start;
    }
    
    .event_project_talk{
        flex: 0 0 50%;
    }
    
    .event_right_column{
        flex: 0 0 36%;
    }

    #event_schedule{
        margin-top: 70px;
    }
    
    .schedule_item{
        margin-bottom: 60px;
    }

    .schedule_content{
        gap: 30px;
    }
}



#catalog_text{
    padding-top: 7px; /*仮*/
    color: #4a4a4a;
    font-size: 12.6px;
    font-weight: 500;
    line-height: 200%; /* 18px */
    letter-spacing: 1px;
}

#catalog_image{
    color: gray;
    padding-bottom: 66px;
    width:100%;
    height: auto;
    display: block;      /* 画像をブロック要素に変更 */
    margin-left: auto;   /* 左余白を自動 */
    margin-right: auto;  /* 右余白を自動 */
}
    @media screen and (min-width: 500px) {
        #catalog_image {
            width: 70%;
        }
    }

#sponsor_text{
    padding-top: 7px; /*仮*/
    color: #4a4a4a;
    font-size: 12.6px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; /* 15px */
    letter-spacing: 1px;
}

.sponsor_list{
    margin-top: 50px;
    margin-bottom: 16px;
    display: grid;
    padding:0px 5vw 0px 5vw;
    grid-template-columns: repeat(2, 44%);
    column-gap: 12%;
    row-gap: 5px;
}
@media screen and (min-width: 500px) {
    .sponsor_list{
        column-gap: 8%;
        grid-template-columns: repeat(3, 28%);
    }
}
@media screen and (min-width: 1000px) {
    .sponsor_list{
        column-gap: 6%;
        grid-template-columns: repeat(4, 20%);
    }
}

.sponcer_image{
    width:100%;
    height:auto;
}

.sponcer_image:hover{
    opacity: 0.5;
}

.margin{
    scroll-margin-top: 200px;

}

.access_main_container{
    display: flex;
    flex-direction: column;
}


#access_text{
    padding-top: 7px; /*仮*/
    color: #4a4a4a;
    font-size: 12.6px;
    font-style: normal;
    font-weight: 500;
    line-height: 200%; /* 15px */
    letter-spacing: 1px;
}

#access_attention{
    color: #4a4a4a;
    font-size: 10px;
    font-weight: 500;
    line-height: 150%; /* 12.75px */
    letter-spacing: 0.7px;
}

#access_image{
    width: 85%;
    height: auto;
    padding-top: 10px;
    padding-left: 20px;
}

.access_mapwebp{
    position:relative;
    z-index:1;
}

#tubu_1_1{
    left: 43%;
    bottom: -98px;
    width:130px;
    opacity: 0.6;
    transform: rotate(215deg) scaleX(-1);}
@media screen and (min-width: 500px) {
    #tubu_1_1{
        bottom: -180px;
        width: 180px;
    }
}
#tubu_1_2{
    left: 20%;
    bottom: -200px;
    width:140px;
    opacity: 0.6;
    transform: scaleX(-1) rotate(-25deg);}
    @media screen and (min-width: 500px) {
    #tubu_1_2{
        left: 36%;
        bottom: -310px;
        width:170px;
    }
}
#tubu_1_3{
    left: 0%;
    bottom: -310px;
    width:120px;
    opacity: 0.6;
    transform: scaleX(-1) rotate(-20deg);}
    @media screen and (min-width: 500px) {
    #tubu_1_3{
        left: 22%; 
        bottom: -340px;
        width:150px;
        transform:scaleX(-1) rotate(-70deg);
    }
}

#tubu_4{
    left: 260px;
    bottom:-50px;
    width:17%;
    opacity: 0.5;
}

#tubu_5{
    right: 70px;
    bottom:-310px;
    width:56%;
    opacity: 0.4;
    transform: rotate(90deg)
}

#tubu_6{
    left: 30px;
    bottom:-280px;
    width:59%;
    opacity: 0.4;
    transform: rotate(180deg)
}

@media screen and (min-width: 500px) {
    .access_main_container{
        flex-direction: row;
        gap: 10%;
        align-items: flex-start;
    }
    
    .access_content{
        flex: 0 0 40%;
    }
    
    .access_mapwebp{
        flex: 0 0 50%;
    }
}

footer {
    min-height: 60svh;
    padding: 40px;
    
    display: flex;
    flex-direction: column;
    /* ↓ 全ての内容を下に寄せる */
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* 背景画像専用の擬似要素（不透明度0.8） */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../image/footer_image/footer.webp");
    /* ↓ 画像の比率を保ったまま、隙間なく埋める（はみ出しを許容する） */
    background-size: cover;
    /* ↓ 中央を基準にするので、画面が狭くなると左右が均等に削れます */
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: -2;
    
}

/* メディアクエリでのbackground-size指定は不要になったため削除しました。
  cover設定だけで、広い画面では全体が見え、狭い画面では両サイドが削れます。
*/

.footer_content {
    display: flex;
    flex-direction: column;
    /* ↓ テキストとロゴ、コピーライトを縦に順番に並べる */
    gap: 20px; 
    width: 100%;
    position: relative;
    z-index: 1;
}

.footer_text {
    display: flex;
    flex-direction: column;
    color: #4a4a4a;
    font-size: 11px;
    font-weight: 500;   
    line-height: 140%;
    letter-spacing: 0.2px;
    /* テキスト自体の下の余白をリセット */
    margin-bottom: 0;
}
@media screen and (min-width: 500px) {
    .footer_text{
    font-size: 14px;
    }
    
    .access_content{
        flex: 0 0 40%;
    }
    
    .access_mapwebp{
        flex: 0 0 50%;
    }
}



/* SNSロゴの配置エリア */
.footer_logos {
    display: flex;
    /* ↓ テキストから10px、ロゴ同士も10pxの間隔で並べる */
    gap: 20px;
    align-items: center;
    padding-bottom: 20px;
}

.footer_logo {
    height: auto;
    max-height: 30px;
    width: auto;
    margin-top: 6px;
}

/* 一番下のコピーライト */
#copyright {
    color: #4a4a4a;
    font-size: 10px;
    font-weight: 500;
    /* ロゴからの距離を少しだけあける場合 */
    margin-top: px;
}