/* common */
:root {
 --base_br: #190d09;
 --base_red: #960d27;
}

#page {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-feature-settings: "palt" 1;
    letter-spacing: .05em;
}

#page::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url(/event/vintagefes/lib/2025/images/bk_vintage.jpg);
    background-size: 100%;
    background-repeat: repeat-y;
}

picture { display: block;}

.pc_only { display: block;}

.sp_only { display: none;}

.ib { display: inline-block;}

.under_yellow {
    display: inline;
    background: rgb(255,232,78);
    background: linear-gradient(0deg, rgba(255,232,78,1) 0%, rgba(255,232,78,1) 50%, rgba(255,232,78,0) 50%, rgba(255,232,78,0) 100%);
    font-size: 120%;
    font-weight: 900;
}

.wrapper { 
    max-width: 1000px;
    margin: 0 auto;
    padding: 100px 0;
}

#page section { 
    width: 100%;
    padding: 4%;
    background-color: rgba(255, 255, 255, .9);
    margin-bottom: 13%;
    box-shadow: 1em 1em 1em #5a4d3a;
}

#page section:last-of-type { margin-bottom: 0;}

.sec_wrap {
    width: 100%;
    padding: 8% 5%;
    border: solid 2px var(--base_br);
    outline: solid 5px var(--base_br);
    outline-offset: 0.4em;
    text-align: center;
}

#page_top {
    position: fixed;
    right: 3%;
    bottom: 3%;
    z-index: 1000;
    width: 127px;
    aspect-ratio: 117 / 131;
    background: url(/event/vintagefes/lib/2025/images/page_top.png) no-repeat center / 100%;
    opacity: 0;
    transform: translateY(100px);
}

#page_top.UpMove{ animation: UpAnime 0.5s forwards;}

#page_top.DownMove{ animation: DownAnime 0.5s forwards;}

@keyframes UpAnime{
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 0;
	transform: translateY(100px);
  }
}

.sec_wrap h2 {
    width: 100%;
    text-align: center;
    margin: 0 auto 8% auto;
}

.sec_wrap h2 img { width: 100%;}

.pc {
    display: block;
}

.sp {
    display: none;
}

/* common */


/* vinfes_top */
#vinfes_top {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: url(/event/vintagefes/lib/2025/images/top_bk_pc.jpg) no-repeat top center / 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 65px 0 47px;
}

#vinfes_top .bk_img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: calc(50% - 50%);
}

#vinfes_top h1, #vinfes_top p { z-index: 10;}

#vinfes_top h1 { width: 49%;}

#vinfes_top .date { width: 37%;}

#vinfes_top img { width: 100%;}

#vinfes_top .vinfes_top_catch { width: 40%;}

#vinfes_top .vinfes_top_catch img { width: 100%;}
/* vinfes_top */

/* recruit */
#recruit .sec_wrap {
    position: relative;
    padding: 13% 5% 8% 5%;
}

#recruit h2 {
    position: absolute;
    top: -3%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
}

#recruit h2 img { width: 100%;}

#recruit p {
    text-align: center;
    font-size: clamp(18px, 3vw, 30px);
    line-height: 1.7;
    margin-bottom: 2.5%;
}

#recruit p:last-of-type { margin-bottom: 0;}

#recruit ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#recruit ul li {
    width: 48%;
    transition: all .2s;
    margin-bottom: 3%;
    position: relative;
}

#recruit ul li img { width: 100%;}

#recruit .coming_soon {
    position: absolute;
    width: 45%;
    top: -20%;
    left: calc(50% - 22.5%);
    transform: rotate(-5deg);
}
/* recruit */


/* intro */

#intro p { text-align: center;}

#intro .catch_copy picture,
#intro .catch_copy img, #intro .sns_catch { width: 100%;}

#intro picture {
    margin-bottom: 7%;
}

#intro .intro_txt {
    font-size: 25px;
    line-height: 1.7em;
    margin-bottom: 4%;
}

#intro em {
    font-style: normal;
    font-weight: 900;
    font-size: clamp(14px, 3.5vw, 40px);
}

#intro ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5%;
    margin-bottom: 8%;
    margin-top: 5%;
}

#intro img { width: 100%;}

#intro .sns_catch {
    text-align: center;
    margin-bottom: 2.5%;
}

#intro .sns_catch img { width: 40%;}

#intro .sns_list {
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 3%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#intro .sns_list li { width: 38%;}

#intro .sns_list li a {
    display: block;
    transition: all .2s;
}

/* intro */

/* outline */

#outline .sec_wrap {
    position: relative;
    padding: 14% 5% 8% 5%;
}

#outline h2 {
    position: absolute;
    top: -3%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
}

#outline dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    font-size: clamp(18px, 3vw, 30px);
    border-top: solid 1px var(--base_br);
}

#outline dt,
#outline dd {
    padding: 3% 0;
    border-bottom: solid 1px var(--base_br);
    letter-spacing: 0.05em;
    line-height: 1.5;
}

#outline dt { 
    width: 30%;
    font-weight: 500;
}

#outline dd { 
    width: 70%;
    text-align: left;
}

#outline dd em {
    font-style: normal;
}

#outline dd i {
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 500;
    font-style: normal;
}
/* outline */

/* youtube */

#youtube h2 {
    width: 85%;
}

.sp_yt_link {
    display: block;
    width: 80%;
    margin: 0 auto;
    transition: all .2s;
}

.sp_yt_link img { 
    width: 100%;
    filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.25));
}

/* youtube */

/* contact */

#contact {
    background: url(/event/vintagefes/lib/2025/images/contact_bk.jpg) no-repeat top center / 100%;
}

#contact a{
    display: block;
    transition: all .2s;
    width: fit-content;
    margin: 0 auto;
    max-width: 650px;
}


#contact img {
    filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.25));
    max-width: 100%;
}

/* contact */

/* ================================ responsive ================================ */

@media (max-width: 1920px) {
    /* 1920莉･荳� */
    /* common */
    #page { font-size: 25px;}

    .wrapper { 
        width: 80%;
        padding: 10% 0 10% 0;
    }

    #page_top { 
        width: 10%;
        max-width: 127px;
    }
    /* common */

    /* vinfes_top */
    #vinfes_top { padding: 4% 0 2.55%;}
    /* vinfes_top */

    /* outline */

    /* outline */

    /* intro */
    #intro .intro_txt { 
        font-size: 1em;
        font-size: clamp(14px, 2.5vw, 26px);
    }
    /* intro */

    /* contact */
    #contact { padding: 5% 0 !important;}

    #contact .wrapper { padding: 0 4%;}

    #contact h2 { font-size: 1.2em;}
    /* contact */
}

@media (max-width: 1440px) {
    /* intro */
    #contact ul li { font-size: 1em;}

    #contact h2::before, #contact h2::after { width: 30%;}
    /* intro */

    /* outline */

    /* outline */
}

@media (max-width: 1024px) {
    /* common */
    #page { font-size: 18px;}

    #page section { box-shadow: 0.6em 0.6em 0.6em #5a4d3a;}
    /* common */

    /* outline */
    #outline dl {
        font-size: clamp(14px, 3vw, 26px);
    }

    #outline dt { 
        width: 25%;
    }
    
    #outline dd { 
        width: 75%;
    }

    #outline dd i {
        font-size: clamp(12px, 2.5vw, 20px);
    }
    /* outline */
}

@media (max-width: 700px) {
    /* common */
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    /* common */

    /* intro */
    #intro .intro_txt { font-size: 0.9em;}

    #intro em {
        line-height: 1.5em;
    }
    /* intro */

    /* recruit */
    #recruit p {
        font-size: clamp(14px, 3.5vw, 20px);
    }

    #recruit ul li { 
        width: 70%;
        margin: 0 auto 5% auto;
    }

    #recruit ul li:first-child { margin-bottom: 5%;}
    /* recruit */

}

@media (max-width: 500px) {
    /* common */
    #page::before { background-image: url(/event/vintagefes/lib/2025/images/bk_vintage_sp.jpg);}

    .wrapper { 
        width: 85%;
        padding: 18% 0 15% 0;
    }

    #page section {
        box-shadow: 0.4em 0.4em 0.4em #5a4d3a;
        padding: 6%;
        margin-bottom: 15%;
    }   
    
    .sec_wrap {
        outline: solid 3px var(--base_br);
        outline-offset: 0.3em;
        padding: 10% 5%;
    }

    #page_top { width: 15%;}

    .pc_only { display: none;}

    .sp_only { display: block;}
    /* common */

    /* vinfes_top */
    #vinfes_top {
        aspect-ratio: 207 / 335;
        background: url(/event/vintagefes/lib/2025/images/top_bk_sp.jpg) no-repeat top center / 100%;
        padding: 10% 0 5.7%;
    }

    #vinfes_top h1 { 
        width: 95%;
        margin-bottom: 15%;
    }

    #vinfes_top .date { width: 80%;}

    #vinfes_top .vinfes_top_catch { width: 80%;}
    /* vinfes_top */

    /* intro */
    #intro picture {
        margin-bottom: 6%;
    }

    #intro .intro_txt { font-size: 3.3vw;}

    #intro em {
        font-size: clamp(14px, 4.5vw, 22px);
    }

    #intro ul { 
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 15%;
    }

    #intro ul li {
        width: 95%;
        margin: 0 auto;
    }

    #intro .sns_list { width: 50%;}

    #intro .sns_catch img { width: 75%;}
    /* intro */

    /* recruit */
    #recruit p {
        margin-bottom: 5%;
    }

    #recruit ul li { width: 100%;}
    /* recruit */

    /* outline */
    #outline h2 {
        width: 100%;
    }

    #outline dl { font-size: clamp(14px, 3.5vw, 20px);}

    #outline dt,
    #outline dd { width: 100%;}

    #outline dl dt {
        border-bottom: none;
        padding: 4% 0 2% 0;
    }

    #outline dl dd { 
        text-align: center;
        padding: 0 0 4% 0;
    }

    #outline dd i {
        font-size: clamp(12px, 3vw, 16px);
    }
    /* outline */
    
    /* contact */
    #contact { padding: 10% 0 !important;}

    #contact .wrapper { padding: 0;}

    #contact h2 { font-size: 4vw;}
    /* contact */

    /* youtube */
    #youtube h2 {
        width: 100%;
    }

    .sp_yt_link { width: 100%;}
    /* youtube */

    /* recruit */
    #recruit h2 { width: 100%;}
    /* recruit */

}


/* ---------- 竊塗over竊� ---------- */

@media (hover: hover) and (pointer: fine) {

    #recruit ul li:hover { transform: translateY(-10%);}
    
    #intro .sns_list li a:hover { transform: translateY(-5%);}

    .sp_yt_link:hover { transform: translateY(-3%);}

    #contact a:hover {
        transform: translateY(-5%);
    }
    

}
  
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {    
       
    #recruit ul li:hover { transform: translateY(-10%);}

    #intro .sns_list li a:hover { transform: translateY(-5%);}

    .sp_yt_link:hover { transform: translateY(-3%);}

    #contact a:hover {
        transform: translateY(-5%);
    }

}