@charset "utf-8";

/*A,B,C...で書いていたものは主に〇〇sectionに改名
  (〇〇の後ろに続く文字がある場合はsection省略(例:theme-eventname(旧A-a-1)))
serif:明朝体(セリフ体) sans:ゴシック体(サンセリフ体)*/

a{
    text-decoration: none;
    background-color: transparent;
    color: inherit;

}
img{
    pointer-events: none;
    user-select: none;
}
html{
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
html::-webkit-scrollbar {
    display: none;
}

::-moz-selection {
    background-color: #17c0ef;
    color: #eeeeee;
}
::selection{
    background-color: #17c0ef;
    color: #eeeeee;
    border-radius: 100%;
}

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

.content-evenly {
    display: flex;
    justify-content: space-evenly;
}

.img-adaptation-full{
    width: 80%;
    height: auto;
}

.img-adaptation-half{
    width: 50%;
    height: auto;
    object-fit: contain;
}
#c-carousel-container {
    width: 100%;
    height: auto;
    margin: 5% auto;
}

.c-carousel {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .c-carousel__activator-main {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .c-carousel__main {
    overflow: hidden;
    position: relative;
  }
  .c-carousel__main-track {
    display: flex;
    white-space: nowrap;
    transition: transform 0.3s ease-out;
  }
  .c-carousel__main-item {
    flex-shrink: 0;
    width: 100%;
  }
  .c-carousel__main-image {
    display: block;
    width: 100%;
  }
  
  .c-carousel__main-control-item {
    display: none;
  }
  .c-carousel__btn-prev-main, .c-carousel__btn-next-main {
    position: absolute;
    top: 50%;
    right: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    background-color: #000;
    border-radius: 50%;
    transition: opacity 0.3s;
    cursor: pointer;
  }
  .c-carousel__btn-prev-main {
    right: auto;
    left: 16px;
  }
  /* ボタンエリア 開始 */
  .c-carousel__activator-main:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(1) {
    display: block;
  }
  .c-carousel__activator-main:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(2) {
    display: block;
  }
  .c-carousel__activator-main:nth-child(3):checked ~ .c-carousel__main .c-carousel__main-control-item:nth-child(3) {
    display: block;
  }
  /* ボタンエリア 終了 */
  /* スライドエリア 開始 */
  .c-carousel__activator-main:nth-child(1):checked ~ .c-carousel__main .c-carousel__main-track {
    transform: translateX(calc(-100% * 0));
  }
  .c-carousel__activator-main:nth-child(2):checked ~ .c-carousel__main .c-carousel__main-track {
    transform: translateX(calc(-100% * 1));
  }
  .c-carousel__activator-main:nth-child(3):checked ~ .c-carousel__main .c-carousel__main-track {
    transform: translateX(calc(-100% * 2));
  }
  /* スライドエリア 終了 */
  .poster-letter {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: auto;
  }

  .fadein {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation-name: fadein;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
  }
  @keyframes fadein {
    0% {
       opacity: 0;
       transform: translateY(20px);
    }
    100% {
       opacity: 1;
       transform: translateY(0);
    }
  }

body{
    background-color: #eeeeee;
    margin: 0;
}
h1{
    font-size: 4rem;
}
h2{
    font-size: 2rem;
    font-weight: 600;
}
h3{
    font-size: 1.4rem;
    font-weight: 600;
}

ul{
    list-style: none;
}
.unshown {
    display: none !important;
}
.unvisiable {
    opacity: 0 !important;
    visibility: hidden !important;
}
.serif{
    letter-spacing: 0.2em;
    margin: 0.1em;
    font-family: 'Noto Serif JP', serif;
}
.sans{
    letter-spacing: 0.2em;
    margin: 0.1em;
    font-family: 'Noto Sans JP', sans-serif;
}
.koruri{
    letter-spacing: 0.2em;
    margin: 0.1em;
    font-family: 'Koruri', sans-serif;
}
.bold {
    font-weight: bold;
  }
.purple{
    color: #17c0ef;
}
.white{
    color: #eeeeee;
}
.black{
    color: #161616;
}
.purewhite{
    color: #ffffff;
}
.dimgray{
    color: #696969;
}
.backblue{
    background-color: #17c0ef;
}
.backwhite{
    background-color: #eeeeee;
}
.backblack{
    background-color: #161616;
}
.backpurewhite{
    background-color: #ffffff;
}
/*----- loading -----*/
#loading-window {
    position:fixed;
    width: 100vw;
    height: 100lvh;

    margin-top: max(min(10vw,10svh),1.1rem);

    background-color: #17c0ef;
    
    z-index: 6;

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

    /*
    animation: loaded-animation-window1 linear(0, 0.01, 0.03, 0.05, 0.15, 0.55, 0.85, 0.95, 0.97, 0.99, 1) both;
    animation-duration: 1s;
    animation-delay: 5s; */
}
#loading-window-letter-container {
    width: 50vw;
    height: 50vw;
    
    border-radius: 100%;
    border: solid #eeeeee;
    border-width: min(0.1vw,0.1svh);

    display: flex;
    justify-content: center;
    align-items: center;
}
#loading-window-letter {
    margin: auto;
    text-align: center;
    font-size: 2.4vw;
}
.loaded #loading-window {
    animation-delay: 0.7s;
}
/*-- /loading --*/
/*----- scroll -----*/
.arrow-down-div {
    visibility: hidden;
    position: fixed;
    bottom:min(5vw,5svh);
    right:min(5vw,5svh);
    z-index:2;
    
    display: flex;
    justify-content: center;
    align-items: end;

    width: min(10vw,10svh);
    height: min(10vw,10svh);

    background-color: #eeeeee00;
    border-radius: 100%;
    border: solid;
    border-color: #161616;
    border-width: 0.15vw;

}
.arrow-up {
    position: fixed;
    bottom:min(3vw,3svh);
    right:min(3vw,3svh);
    z-index:2;
    
    display: flex;
    justify-content: center;
    align-items: center;

    width: min(15vw,10svh);
    height: min(15vw,10svh);

    background-color: #17c0ef;
    border-radius: 100%;
    border: solid;
    border-color: #161616;
    border-width: 0.15vw;

    transition: all 0.5s;

    cursor: pointer;
}
.arrow-up::before {
    position: absolute;
    content: '';
    width: min(3vw,2svh);
    height: min(3vw,2svh);
    top: min(6.75vw,4.5svh);
    border-top: solid 4px #ffffff;
    border-right: solid 4px #ffffff;
    transform: rotate(-45deg);
}
.arrow-down {
    position: relative;
    left: 1vw;
    bottom: 2svh;

    display: inline-block;
    width: 0.1vw;
    height: 5vw;

    vertical-align: middle;
    line-height: 1;

    color: #161616;
    background: currentColor;
    animation: arrow-animation linear(0, 0.01, 0.03, 0.05, 0.15, 0.55, 0.85, 0.95, 0.97, 0.99, 1) both;
    animation-duration: 2s;
    animation-delay: 2.2s;
    animation-iteration-count: infinite;

    opacity: 1;
    transition: all 1s;
}
  
.arrow-down::before {
    content: '';
    
    position: absolute;
    left: 50%;
    bottom: -0.15vw;
    
    width: 1vw;
    height: 1vw;
    
    border-bottom: 0.1vw solid currentColor;
    
    transform: rotate(-45deg);
    transform-origin: bottom left;
    box-sizing: border-box;
}
/*-- /scroll --*/
/*----- mobile-menu -----*/
    /*---- mobile-menu-open,close ----*/
#menu-toggle{
    position: fixed;
    display: none;
}
#menu-toggle-label{
    position: fixed;
    top: 1vw;
    right: 3vw;
    width: calc(5vw + 5svh);
    height: calc(5vw + 5svh);

    z-index: 4;
}
#menu-toggle-div{
    position: fixed;
    top: 1vw;
    right: 1vw;
    width: calc(5vw + 5svh);
    height: calc(5vw + 5svh);

    cursor: pointer;

    text-align: center;
    vertical-align: middle;
}
#menu-open-txt, #menu-close-txt {
    margin: auto;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    font-size: calc(3vw + 3svh);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
}
#menu-open, #menu-close {
    border: solid;
    border-width: 1px;
    border-color: #161616;

    border-radius: 100%;
    width: calc(5vw + 5svh);
    height: calc(5vw + 5svh);

    user-select: none;
    position: fixed;
    top: 3vw;
    right: 3vw;

    z-index: 3;

    display: flex;
    justify-content: center;
}
#menu-open {
    color: rgba(238, 238, 238, 1);
    background: linear-gradient(0.25turn, #1872cc, #1e90ff);

    animation: loaded-animation-pc3 linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) backwards;
    animation-duration: 1s;
    animation-delay: 6s;
}
.loaded #menu-open {
    animation-delay: 1.7s;
}
#menu-toggle:not(:checked) ~ #menu-open {
    color: rgba(238, 238, 238, 1);
    background: linear-gradient(0.25turn, #1872cc, #1e90ff);
    transform: translateX(0);
    transition-duration: 0.5s;
}
#menu-toggle:checked ~ #menu-open {   
    color: rgba(238, 238, 238, 0);
    background-color: rgba(88, 88, 162, 0);
    transform: translateX(-8vw);
    transition-duration: 0.5s;
}

#menu-close {
    color: rgba(0, 0, 30, 0);
    background-color: rgba(230, 203, 208, 0);
    transform: translateX(-8vw);

    animation: loaded-animation-pc4 linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) backwards;
    animation-duration: 1s;
    animation-delay: 6s;
}
.loaded #menu-close {
    animation-delay: 1.7s;
}
#menu-toggle:not(:checked) ~ #menu-close {
    color: rgba(0, 0, 30, 0);
    background-color: rgba(22, 22, 22, 0);
    transform: translateX(-8vw);
    transition-duration: 0.5s;
}
#menu-toggle:checked ~ #menu-close {
    color: rgba(238, 238, 238, 1);
    background-color: rgba(22, 22, 22, 1);
    transform: translateX(0);
    transition-duration: 0.5s;
}
/*-- /mobile-menu-open,close --*/
/*モバイルメニュー背景*/
#mobile-menubackground {
    position: fixed;
    background-color: #ffffff;
    width: 50vw;
    height: 100lvh;
    z-index: 2;
    user-select: none;
    pointer-events: none;
}
#menu-toggle:checked ~ #mobile-menubackground {
    transition-duration: 0.8s;
    transition-delay: .1s;
    user-select: all;
    pointer-events: all;

    background-image: url(../img/メニュー\ middle.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 90%;
    opacity: 1;
}
#menu-toggle:not(:checked) ~ #mobile-menubackground {
    background-color: rgb(88, 88, 162, 0);
    transition-duration: 0.8s;
    user-select: none;
    opacity: 0;
    transition-property: background-color, opacity;
}
.mobile-menu-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.mobile-menu-bottom {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    height: auto;
}
/*モバイルメニュー文字*/
#mobile-menu1 {
    margin-top: 40%;
    margin-left: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    user-select: none;
}

#menu-toggle:checked ~ #mobile-menubackground > * {
    transform: scale(1);
    transition-duration: 0.8s;
    -ms-filter: blur(0px);
    filter: blur(0px);
}
#menu-toggle:not(:checked) ~ #mobile-menubackground > * {
    opacity: 0;
    transition-duration: 0.4s;
    transition-delay: 0.2s;
    -ms-filter: blur(6px);
    filter: blur(6px);
}
.mobile-menubackimg {
    position: absolute;
    top: calc(50svh - min(70vw, 40svh));
    left: calc(50vw - min(70vw, 40svh));
    width: min(140vw, 80svh);
    height: min(140vw, 80svh);
    opacity: 0.4;
    transform: scale(1.2);
    transition-delay: 0.7s;
    user-select: none;
}
.mobile-menuletter{
    font-size: calc(1.5vw + 1.5svh);
    font-weight: 300;
    line-height: 2.2em;
    transform: scale(1.05);
    transition-delay: 0.2s;
}
.mobile-menuletter-mini{
    color: #a0b0c3;
    line-height: 1.6em;
}
.mobile-menu-hr{
    background-color: #eeeeee;
    margin: calc(1vw + 1svh) 0;
}
.menu-hr-mini{
    opacity: 0.4;
}
/*-- /mobile-menu --*/



/*----- pc-menu -----*/
#pc-background{
    position: fixed;
    height: 100lvh;
    width: 100vw;
    background: linear-gradient(0.3turn, #87cefa, #b0e0e6 40%, #add8e6);
    pointer-events: none;
    visibility: hidden;
}
/*リンクul*/ 
#pc-menu1{ /*jsで制御*/
    visibility: visible;

    position: fixed;
    top: 0;
    width: 100vw;
    height: max(min(20vw,20svh),2.2rem);

    margin: 0;
    padding: 0;

    background-color: #17c0ef;

    z-index: 2;

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

    overflow: visible;

    white-space: nowrap;

    transition: all 0.5s;
}
#pc-menu1::after{
    content: '';

    position: absolute;
    left: 0;
    bottom: 0;
    
    width: 100%;
    height: 2px;

    background: #ff1493;
    
    transform-origin: left top; 
    
    animation: progress-animation1 linear;
    animation-timeline: scroll();
    }
@keyframes progress-animation1{
    from {
        transform: scale(0, 1); 
    }
    to {
        transform: scale(1, 1); 
    }
}

.pc-menuletter{
    font-size: min(1.1vw, 0.9rem);
    font-weight: 600;
    line-height: 2.2em;
    color: #161616;
    display: block;
}
.pc-menuletter-mini {
    color: #161616;
    font-size: min(1vw, 0.8rem);
}
.pc-menuletter:hover{
    color: #17c0ef;
    transform: scale(1.1);

    transition-duration: 0.2s;
}
.pc-menuletter:not(:hover){
    color: #161616;
    transform: scale(1.0);

    transition-duration: 0.2s;
}
.pc-menuletter-li{
    padding:0;
    margin:0.1em;

    user-select: none;

    animation: loaded-animation-pc2 linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) backwards;
    animation-duration: 0.5s;
    animation-delay: 5s;

    display: flex;
    justify-content: center;
    align-items: center;
}
.loaded .pc-menuletter-li{
    animation-delay: 0.7s;
}

/* 校章 画像比 8.7 : 8.4 */
.banner1 {
    position: relative;
    top: 0;
    width: auto;
    height: max(min(15vw,15svh),1.8rem);
    z-index: 3;
    user-select: none;
    pointer-events: none;


}

/* 78th Ichikosai 画像比 3.3 : 1 */
.banner2 {
    position: relative;
    top: 0;
    margin-left: 3%;
    width: auto;
    height: max(min(16vw,16svh),2.0rem);
    z-index: 3;
    user-select: none;
    pointer-events: none;
}

/*アイコン*/
#pc-menu2_a{
    user-select: none;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin: auto;
    font-size: min(220%,3vw,3svh);

    animation: loaded-animation-pc1_a linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) both;
    animation-duration: 1s;
    animation-delay: 8s;
}
.loaded #pc-menu2_a{
    animation-delay: 3.7s;
}
#pc-menu2_img{
    position: absolute;
    top: max(-1em, -1.5vw, -1.5svh);
    left: max(-1em, -1.5vw, -1.5svh);
    width: min(14em,21vw,21svh);
    height: min(14em,21vw,21svh);
    opacity: 0;

    animation: loaded-animation-pc1_img linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) both;
    animation-duration: 1s;
    animation-delay: 8s;
}
.loaded #pc-menu2_img{
    animation-delay: 3.7s;
}
/*アイコンの〇*/
#pc-menu2_container{
    width: min(12em, 18vw, 18svh);
    height: min(12em, 18vw, 18svh);

    background-color: #eeeeee;
    border-radius: 100%;
    /*background: radial-gradient(#eeeeee 20%, #eeeeee72 60%, #eeeeee00 70%);*/
    background: linear-gradient(0.32turn, #17c0ef, #1e90ff);
    border: solid;
    border-width: 0.15rem;
    border-color: #17c0ef;

    position: fixed;
    top: min(13svh,13vw);
    left: 1em;
    display: flex;
    pointer-events: auto;
    visibility: hidden;

    animation: loaded-animation-pc1 linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) both;
    animation-duration: 1s;
    animation-delay: 8s;
}
.loaded #pc-menu2_container{
    animation-delay: 3.7s;
}
/*-- /pc-menu --*/
/*-- JavaScript無効の警告 --*/
#noJSwarning {
    position: fixed;
    bottom: 0.5rem;
    font-size: min(1rem, 3vw);
    font-weight: bolder;
    z-index: 5; /* loading-windowの一つ下 */
}
/*-- /JavaScript無効の警告 --*/

/*----- pc,mobile section -----*/
#pc-section-container{
    display: block;
    width: 100vw;
    margin: 0 auto;
}
#mobile-section {
    position: relative;
    display: block;
    top: 0%;
    width: 100vw;
    height: max-content;
    min-height: 100lvh;
    padding-top: 11svh;
    left: 0;
    margin-top: max(min(7.5vw,7.5svh),0.9rem);
    margin-left: 0 auto;
    background-color: #ffffff;
    user-select: auto;
}

/*-- /pc,mobile section --*/

/*----- backgroundscroll -----*/
.backgroundscroll-container{
    position: fixed;
    top: 0;
    left: 10vw;

    width: 80vw;
    height: 100lvh;

    display: flex;
    align-items: center;
    justify-content: center;
}
.backgroundscroll-wrap{
    display: flex;
    overflow-x: hidden;
}
.backgroundscroll-list{
    padding:0;
    
    display: flex;

    animation: backgroundscroll 15s infinite linear 0.5s forwards;
}
.backgroundscroll-item-text{
    font-size: 4vw;
    white-space: nowrap;
    user-select: none;
}
@keyframes backgroundscroll{
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0%);
    }
}
/*-- backgroundscroll --*/
.backgroundimg-container{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    width: 100vw;
    height: 100lvh;

    display: flex;
    align-items: center;
    justify-content: center;
}
.backgroundimg-container img {
    position: absolute;
    width: 140vw;
    height: 140vw;

    transform: rotate(90deg);
    transform: scale(0.1,0.1);
    animation: backgroundimg 1s ease-out forwards;
    animation-delay: 1s;

    filter: opacity(50%) brightness(80%) blur(0.1vw);
}
@keyframes backgroundimg {
    from {
        transform: scale(0.1, 0.1);
    }
    to {
        transform: scale(1, 1);
    }
}
/*------- themeセクション(旧A) -------*/

/*1ページ目*/
#theme_container{
    position:relative;
    background-color:#161616;
    height:70svh;
    top: 0;
    text-align: center;
    user-select: none;
}
/*1ページ目position*/
.themesection{
    position:absolute;
    z-index: 1;
}
.loading-msg {
    position: relative;
    top: 0svh;
    text-align: center;
}
/*蒼穹*/
#theme-maintheme{
    margin-right: 0;
    right: 1vw;
    bottom: calc(-7vw + -7svh);
    
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: min(calc(12vw + 8svh), 30vw, 18svh);
    text-shadow:
        0.7px 0 0 #9494f3,
        0.7px 0.7px 0 #9494f3,
        0 0.7px 0 #9494f3,
        -0.7px 0.7px 0 #9494f3,
        -0.7px 0 0 #9494f3,
        -0.7px -0.7px 0 #9494f3,
        0 -0.7px 0 #9494f3,
        0.7px -0.7px 0 #9494f3;
    /* background: linear-gradient(0.4turn, #8383be, #454596);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* -webkit-text-stroke: 0.7px #9494f3; */
    /* filter:drop-shadow(8px 8px 0 #d2d2e688); */
    font-weight: 600;

    animation: loaded-animation-mobile1 linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) both;
    animation-duration: 1s;
    animation-delay: 6s;
}
.loaded #theme-maintheme{
    animation-delay: 1.7s;
}
/*77th 一高祭*/
#theme-eventname{
    font-size: min(calc(6vw + 4svh), 13vw, 8svh);
    margin-left: 0;
    left: 3vw;
    bottom: 2svh;

    letter-spacing: 0;
    font-weight: 600;

    animation: loaded-animation-mobile2 linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) both;
    animation-duration: 1s;
    animation-delay: 6s;
}
.loaded #theme-eventname{
    animation-delay: 1.7s;
}
/*6/1-6/2*/
#theme-date{
    font-size:calc(2vw + 2svh);
    letter-spacing:0;
    text-align:center;
    left:3vw;
    top:-10svh;
    font-weight:600;
    animation: loaded-animation-mobile2 linear(0, 0.02, 0.08, 0.15, 0.55, 0.85, 0.92, 0.98, 1) both;
    animation-duration: 1s;
    animation-delay: 6s;
    }
    .loaded #theme-date{
        animation-delay: 1.7s;
    }
    .theme-date-top{
        vertical-align:0.2em;
        font-size:2.5em;
    }
    .theme-date-bottom{
        vertical-align:-0.2em;
        font-size:2.5em;
}
#theme-mainimage_container{
    position: absolute;
    top: min(-11svh, calc(-8svh - 5vw));
    box-shadow: 0px 0px 25px 20px rgba(0,0,0,0.3) inset;
}
.theme-mainimage{
    width: 100vw;
    min-height: 100svh;
    object-fit: cover;
}
/*-- /themesection ---*/

/*-------- mainコンテナ(旧B) ----------*/

/*A-B角丸コンテナ*/
#main-top_container{
    position: relative;
    width: 100%;
}

/*------- dateセクション(旧Bの前半) -------*/

/*A-B角丸*/
#date-top{
    width: 100%;
    background-color: #ffffff;
    /*padding-bottom: 10lvh;*/
}
.date-openpublic{
    font-size: 0.4em;
}
/*小文字*/
.minletter{
    font-size: 0.5em;
}
/*大文字*/
.maxletter{
    font-size: 2.5em;
}
/*2ページの文字*/
.date-letter{
    text-align: center;
    font-weight: 500;
    font-size: calc(3vw + 3svh);
    margin: 0.75em;
}
.notification{
    text-align: left;
    font-weight: 400;
    font-size: calc(0.8vw + 0.8svh);
    line-height: 1.8em;
    margin: 10em 20% 10em 15%;
    list-style: "・";
}
.notification-highlighted{
    font-weight: 600;
    font-size: 1.2em;
    background-color: #161616;
    padding: 1em;
    margin-bottom: 5em;
    border-radius: 1em;
}
.notification li {
    margin-top: 0.6em;
    user-select: text;
}

.notification-button { /*sub-container-buttonに近い*/
    /*padding: calc(1.5vw + 1.5svh) calc(2vw + 2svh);*/
    width: calc(11vw + 11svh);
    height: calc(3.8vw + 3.8svh);
    padding-top: calc(1.5vw + 1.5svh);
    margin-left: 1vw;
    margin-right: 1vw;
    
    color: #eeeeee;
    background-color: #17c0ef;
    font-weight: 400;
    font-size: min(1em,calc(0.9vw + 0.9svh));
    text-align: center;
    display: inline-block;

    border-radius: 10px;
    border: solid;
    border-color: #aaaaaa;
    border-width: 0.1vw;

    letter-spacing: 0.1em;
}
.notification-button:hover{
    color:#161616;
    background: linear-gradient(0.25turn, #333, #666);
    transition-duration:0.4s;
}
.notification-button:not(:hover){
    color: #000;
    background-color: #ddd;
    transition-duration:0.4s;
}
.notification-button-div {
    display: flex;
    justify-content: center;
    user-select: none;
}
/*カウントダウンの四角*/
#date-countdown_div1{
    width: 100%;
    height: 25rem;
    margin: auto;
    text-align: center;
    font-weight: 500;
    font-size: min(4vw, calc(1.5vw + 1.5svh));

    display: flex;
    align-items: center;

    background-image: url('../img/index/カウントダウン.png');
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#date-countdown_div2{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#date-countdown_div2 div{
    width: 45%;
}
/*カウントダウンの数字*/
.date-countdown{
    font-size: 2.5em;
}

/*-- /date ---*/

/*----- subコンテナ(旧fC) ----*/

/*3ページ目からの四角*/
.sub-container_div{
    width: 100%;
    margin-top: 5svh;
    position: relative;
    padding-top: 15vw;
    padding-bottom: 12vw;
    user-select: text;

    text-align: center;

    /*box-shadow: 0 0.5svh 3svh 0 #161616;*/
}
/*3ページ目からのタイトル*/
.sub-title{
    position: absolute;
    top: -0.5em;

    margin-left: calc(4vw + 4svh);
    
    text-align: left;
    font-weight: 500;
    font-size: calc(3vw + 3svh);
    line-height: 1em;

    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*.sub-title::first-letter{
    font-size:2.5em;

    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}*/

.sub-title2{
    position: absolute;
    top: -0.5em;

    margin-left: calc(4vw + 4svh);
    
    text-align: left;
    font-weight: 500;
    font-size: calc(2vw + 2svh);
    line-height: 1em;

    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sub-title2 .bigletter {
    font-size: calc(5vw + 5svh);
}
/*大文字のふくらみ*/
.sub-circle{
    width: calc(10vw + 10svh);
    height: calc(10vw + 10svh);
    background-color: #eeeeee;
    border-radius: calc(10vw + 10svh) calc(10vw + 10svh) 0 0;
    position: absolute;
    top: calc(-4vw + -4svh);
    left: calc(2vw + 2svh);
    clip-path:inset(0 0 calc(5vw + 5svh) 0);
    user-select: none;
}
.view_more {
    float: right;
    display: block;
    margin: 2vw 10% 0 0;
    text-align: right;
    font-size: calc(1vw + 1svh);
    &:hover {
        text-decoration: underline;
    }
}

/*------ newsセクション(旧C) -------*/

/*3ページの文字*/
.news-letter {
    font-size: calc(1vw + 1svh);
    margin-bottom: calc(0.4vw + 0.4svh);
}
/*3ページの文字ブロック*/
.news-div {
    border-left: solid;
    border-left-width: 2.5px;
    border-left-color: #17c0ef;
    margin-top: 10%;
    margin-left: 9%;
    padding-right: 5%;
    padding-left: 5%;
}

#news {
    height: 100vh;
    background-image: url(../img/index/お知らせ.png);
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat;
    /*background-color: #48c1e5;*/
}

/*-- /news ---*/

/*----- pickup -----*/


.botton {
    width: 100%;
    height: auto;
    margin: 0
}

.botton3 {
    width: 80%;
    height: auto;
    margin: 1em   
}


.pickup-img {
    width: 40%;
    height: auto;
    margin: 0 2.5vw;
}



/*----- pickup -----*/

/*----- information -----*/

.botton2 {
    width: 100%;
    height: auto;
    margin: 0
}

/*----- information -----*/

/*----- leaflet -----*/

.leaflet-letter {
    font-size: calc(1vw + 1svh);
    margin-inline: 9%;
}
/*3ページの文字ブロック*/
.leaflet-letter-div {
    margin-bottom: 2vw;
    padding-right: 10%;
    padding-left: 5%;
}
.sub-container-button {
    /*padding: calc(1.5vw + 1.5svh) calc(2vw + 2svh);*/
    width: calc(8vw + 8svh);
    height: calc(2.5vw + 2.5svh);
    padding-top: calc(1.5vw + 1.5svh);
    margin-left: 1vw;
    margin-right: 1vw;
    
    color: #eeeeee;
    background-color: #17c0ef;
    font-weight: 400;
    font-size: calc(1vw + 1svh);
    text-align: center;
    display: inline-block;

    border-radius: 10px;
    border: solid;
    border-color: #17c0ef;
    border-width: 0.1vw;

    letter-spacing: 0.1em;
}
.sub-container-button:hover{
    color:#161616;
    background: linear-gradient(0.25turn, #17c0ef, #1e90ff);
    transition-duration:0.4s;
}
.sub-container-button:not(:hover){
    color: #eeeeee;
    background-color: #17c0ef;
    transition-duration:0.4s;
}
.sub-container-button-div {
    display: flex;
    justify-content: center;
    user-select: none;
}
.sub-container-button img {
    width: calc(1vw + 1svh);
    height: calc(1vw + 1svh);
    margin-right: calc(0.4vw + 0.4svh);
    transition-duration:0.4s;
}
.sub-container-button:hover img {
    filter: invert(100%);
}
/*-- /leaflet --*/

/*----- goods -----*/
.goods-letter-container {
    font-size: calc(0.9vw + 0.9svh);
    font-weight: 500;
    
    display: flex;
    flex-wrap: wrap;

    margin-inline: 10%;
}
.goods-letter-div {
    width: 45%;
    margin-bottom: 10%;
    margin-inline: 2.5%;
}
.goods-letter-div img {
    width: 80%;
    margin: 3% 10% 0 10%;
    user-select: none;
}
.goods-letter {
    font-size: calc(1vw + 1svh);
}
.goods-letter-container p {
    font-weight: 400;
}
.goods-letter-container span {
    font-weight: 400;
    font-size: 0.8em;
}
/*-- /goods --*/

/*----- elements -----*/
#elements-section{
    width: 90%;
    margin: 10svh auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.elements-container{
    background: linear-gradient(0.25turn, #17c0ef, #1e90ff);
    width: max(40vw, 10rem);
    margin:1vw 1vw;
    font-size: min(max(3vw, 0.8rem), 1.2rem);
}
.elements-div{
    height: 100%;
    position: relative;
    right:1vw;
    bottom:1vw;

    margin:0;

    display: flex;
    justify-content: center;

    color: #000000;
    background-color: #eeeeee;

    user-select: none;
    cursor: pointer;
    transition-duration: 0.4s;
}
.elements-div:hover{
    color: #ffffff;
}
.elements-letter1{
    margin: 2vw;
    font-size: 1em;
}
.elements-letter2{
    font-size: 0.6em;
    letter-spacing: 0.12em;
}

.popup-closebutton {
	top: 12px;
	right: 12px;
    font-size: 1.4rem;
    color: #161616;
}
.popup-window {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 83%;
    max-width: 400px;
    height: 70svh;
    max-height: 500px;
    padding: 1.5rem;
    border-radius: 0.6rem;
    align-items: center;
    transform: translate(-50%, -50%);
    user-select: text;
}
.elements-popup-container{
    color: #000000;
    font-size: calc(2vw + 2svh);
    font-weight: 400;
    
    text-align: center;
    letter-spacing: 0.2em;

}
.elements-popup-title-mini{
    font-size: 0.4em;
    letter-spacing: 0.18em;
}
.elements-popup-letter1{
    font-size: 0.5em;
    text-align: left;
}
.elements-popup-letter2{
    width:50%;
    height:50%;
    padding: 5em 1em;
    margin:auto;

    font-size: 0.5em;
    color: #eeeeee;
    background-color: #17c0ef;

    border-radius: 10px;
    border: solid;
    border-color: #17c0ef;
    border-width: 0.1vw;
}
.elements-popup-letter2:hover{
    color:#161616;
    background: linear-gradient(0.25turn, #1e90ff, #17c0ef);
    transition-duration: 0.4s;
}
.elements-popup-letter2:not(:hover){
    color:#eeeeee;
    background-color: #17c0ef;
    transition-duration: 0.4s;
}
.elements-popup-div1{
    width: 80%;
    margin: auto;
    padding: 1em 0;

    background-color: #17c0ef;

    border-radius: 1vw;
}
.elements-popup-letter3{
    margin: 1em auto;
    font-size: 0.6em;
    color: #eeeeee;
}
.elements-popup-letter3-mini{
    font-size: 0.6em;
}
.elements-popup-div1 > hr{
    width: 50%;
    border-color: #e6cbd0;
}
.elements-popup-div1 > div >hr{
    width: 75%;
    border-color: #e6cbd0;
}

/*一高祭公式PV*/
.elements-popup-frame{
    padding-bottom: 56.25%;
    user-select: none;
}

/*--/ elements --*/
/*----- accessibility -----*/
.accessibility-img-container{
    margin: auto;
}
.accessibility-img{
    width: 80%;
    height: auto;

    display: block;
    margin: 5svh auto;
    user-select: none;
}
/*-- /accessibility --*/

/*----- SNS -----*/

#SNS {
    margin-top: 3vh;
    font-size: 1.5rem;
    text-align: center;
}

.SNS-icon-container {
    display: flex;
    justify-content: center;
    margin-top: 2svh;
}

.SNS-icon {
    width: 7vw;
    height: auto;
    margin: 0 3vw;
}

.SNS-icon-CI {
    width: 3vw;
    max-width: 50px;
    height: auto;
    margin: 0 3vw;
}


/*----- /SNS -----*/



/*----- specialthanks -----*/
#specialthanks {
    background: linear-gradient(0.28turn, #17c0ef, #87cefa);
    font-size: calc(1vw + 1svh);
    margin-top: 10svh;

    /*
    display: flex;
    justify-content: space-around; */
}
.specialthanks-letter {
    width: 80%;
    padding: 3em 10% 1em 10%;
    line-height: 1.8em;
}
.specialthanks-letter-mini {
    width: 70%;
    text-align: right;
    font-size: 0.7em;
    padding: 0 20% 3em 10%;
    line-height: 1.8em;
}
/*-- /specialthanks --*/


/*-- comingsoon --*/
#comingsoon-container { /* reduced */
    margin: 45lvh auto 0 auto;
    padding: 10% 5%;
    width: 50%;
    border: solid;
    border-width: 0.1vw;
    border-color: #161616;
    background: linear-gradient(0.28turn, #17c0ef, #1e90ff);
    border-radius: 10vw;
    user-select: none;
}
#comingsoon-title {
    text-align: center;
    font-weight: 600;
    font-size: 6vw;
    letter-spacing: 0.1vw;
}
#comingsoon-body {
    margin-top: 5%;
    text-align: center;
    font-size: min(4vw, 1rem);
}
/*-- /comingsoon --*/
/*-- /sub ---*/

/*-- /main ---*/

/*----- animation -----*/

/*読み込み時アニメーション theme*/
/*
@keyframes loaded-animation-window1{
    0%{
        clip-path: inset(0 0 0 0);
    }
    100%{
        clip-path: inset(0 0 100% 0);
    }
}*/

@keyframes loaded-animation-mobile1 {
    0% {
        color: #eeeeee;
        clip-path: inset(0 0 100% 0);
    }
    50% {
        color: #eeeeee;
        clip-path: inset(0 0 0 0);
    }
    100% {
        color: #17c0ef;
        clip-path: inset(0 0 0 0);
    }
}
@keyframes loaded-animation-mobile2 {
    0% {
        color: #17c0ef;
        clip-path: inset(0 0 100% 0);
    }
    50% {
        color: #17c0ef;
        clip-path: inset(0 0 0 0);
    }
    100% {
        color: #eeeeee;
        clip-path: inset(0 0 0 0);
    }
}
/*pc-menu2*/
@keyframes loaded-animation-pc1 {
    0% {
        opacity:0;
        /*transform: rotateZ(180deg);*/
        transform: rotateZ(360deg);
    }
    50%{
        opacity:1;
        transform: rotateZ(360deg);
    }
    100% {
        opacity:1;
        transform: rotateZ(0deg);
    }
}
@keyframes loaded-animation-pc1_a {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes loaded-animation-pc1_img {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        transform:  scale(0.6);
    }
    100% {
        opacity: 1;
        transform:  scale(1);
    }
}
/*pc-menuletter*/
@keyframes loaded-animation-pc2 {
    0% {
        transform: rotateX(90deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}
/*menu-open*/
@keyframes loaded-animation-pc3 {
    0%{
        transform: scale(0);
    }    
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(1);
    }
}
/*menu-close*/
@keyframes loaded-animation-pc4 {
    0%{
        transform: scale(0);
        transform: translateX(0);
    }    
    50%{
        transform: scale(1);
        transform: translateX(0);
    }
    100%{
        transform: scale(1);
        transform: translateX(-8vw);
    }
}
/*スクロールアニメーション*/
.scroll-animation1 {
    animation: scroll-animation1 ease-in both;
    animation-timeline: view();
    animation-range: entry 15% cover 80%;
    }

    @keyframes scroll-animation1 {
        0% {
            opacity: 0;
            transform: translate(0, 12svh)
        }
        60%{
            opacity: 1;
            transform: translate(0, 0)
        }
        100% {
            opacity: 1;
            transform: translate(0, 0)
        }
    }
.scroll-animation2 {
    animation: scroll-animation2 ease-in both;
    animation-timeline: view();
    animation-range: entry 15% cover 50%;
    }

    @keyframes scroll-animation2 {
        0% {
            opacity: 0;
            transform: translate(0, 12svh)
        }
        10%{
            opacity: 1;
            transform: translate(0, 0)
        }
        100% {
            opacity: 1;
            transform: translate(0, 0)
        }
    }

/*矢印アニメーション*/
@keyframes arrow-animation{
    0%{
        opacity: 0;
        transform: translateY(-3svh);
    }
    50%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(3svh);
    }
}
@keyframes arrow-animation-div{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
/*スクロールアニメーション(一番下)*/
.scroll-animation-bottom {
    animation: scroll-animation-bottom ease-in both;
    animation-timeline: view();
    animation-range: entry 10% cover 50%;
    }

    @keyframes scroll-animation-bottom {
        0% {
            opacity: 0;
            transform: translate(0, 12svh)
        }
        10%{
            opacity: 1;
            transform: translate(0, 6svh)
        }
        50%{
            opacity: 1;
            transform: translate(0, 0)
        }
        100% {
            opacity: 1;
            transform: translate(0, 0)
        }
    }
/*-- animation --*/
/*----- mediaquery -----*/
@media screen and (orientation:landscape){
    /*loading*/
    #loading-window {
        margin-top: max(min(15vw,15svh),1.8rem);
    }
    #loading-window-letter-container {
        width: 50vh;
        height: 50vh;
    }
    #loading-window-letter {
        font-size: 2.4vh;
    }
    /*display:none,visibility:hidden*/
    #menu-toggle-label{
        visibility: visible;
    }
    #menu-open , #menu-close{
        visibility: visible;
    }
    #mobile-menubackground{
        visibility: visible;
    }
    /*mobile-section*/
    #mobile-section{
        width: 50vw;
        max-width: calc(400px + 20vw);
        border-right: solid;
        border-left: solid;
        border-bottom: solid;
        border-color: #161616;
        border-width: 0.2vw;
        margin: auto;
    }
    /*visibility:visible*/
    #pc-background{
        visibility: visible;
    }
    #pc-menu1{
        height: max(min(15vw,15svh),1.8rem);
        visibility: visible;
    }
    #pc-menu2_container{
        visibility: visible;
    }
    .arrow-down-div{
        visibility: visible;
    }
    .arrow-up{
        visibility: visible;
        bottom:min(5vw,5svh);
        right:min(5vw,5svh);
        width: min(10vw,10svh);
        height: min(10vw,10svh);
    }
    .arrow-up::before {
        width: min(2vw,2svh);
        height: min(2vw,2svh);
        top: min(4.5vw,4.5svh);
    }
    /*size*/
    .banner1 {
        height: max(min(11vw,11svh),1.4rem);
    }
    .banner2 {
        height: max(min(12vw,12svh),1.5rem);
    }
    #mobile-menu1 {
        margin-top: 30%;
    }
    #mobile-menubackground{
        width: 25vw;
    }
    .mobile-menuletter{
        font-size: calc(1vw + 1svh);
        line-height: 1.8em;
    }
    .mobile-menu-hr{
        margin: calc(0.5vw + 0.5svh) 0;
    }
    .mobile-menu-bottom {
        bottom: 0;
    }
    #theme-maintheme{
        bottom:calc(-5.5vw + -5.5svh);
        font-size: calc(5.5vw + 5.5svh);
        right: 3vw;
    }
    #theme-eventname{
        font-size: calc(2.2vw + 2.2svh);
        left: 3vw;
    }
    #theme-date{
        top:-8svh;
        font-size:calc(1vw + 1svh);
    }
    .theme-mainimage{
        width: 50vw;
        max-width: calc(400px + 20vw);
    }
    #date-countdown_div1{
        padding: 10%;
        width: 50%;
        font-size:calc(1vw + 1svh);
    }
    .date-letter{
        font-size:calc(2vw + 2svh);
    }
    .date-countdown{
        font-size: 3em;
    }
    .notification{
        font-size:calc(0.6vw + 0.6svh);
        margin: 10em 9em 10em 7em;
    }
    .sub-container_div{
        padding-top: 8vw;
        padding-bottom: 8vw;
    }
    .sub-title{
        margin-left: calc(2.6vw + 2.6svh);
        font-size: calc(1vw + 1svh);
    }
    .sub-title2{
        margin-left: calc(2.6vw + 2.6svh);
        font-size: calc(1vw + 1svh);
    }
    .sub-title2 .bigletter {
        font-size: calc(2.5vw + 2.5svh);
    }
    .sub-circle{
        width: calc(4vw + 4svh);
        height: calc(4vw + 4svh);
        border-radius: calc(4vw + 4svh) calc(4vw + 4svh) 0 0;
        top: calc(-1.8vw + -1.8svh);
        left: calc(2vw + 2svh);
        clip-path:inset(0 0 calc(2vw + 2svh) 0);
    }
    .news-letter {
        font-size: calc(0.6vw + 0.6svh);
    }
    .view_more {
        font-size: calc(0.7vw + 0.7svh);
        margin-top: 3vw;
    }
    .leaflet-letter-div {
        margin-top: -2vw;
    }
    .leaflet-letter {
        font-size: calc(0.6vw + 0.6svh);
    }
    .goods-letter-container {
        font-size: calc(0.7vw + 0.7svh);
    }
    .goods-letter {
        font-size: calc(0.6vw + 0.6svh);
    }
    .sub-container-button {
        font-size: calc(0.7vw + 0.7svh);
    }
    .sub-container-button img {
        width: calc(0.7vw + 0.7svh);
        height: calc(0.7vw + 0.7svh);
        margin-right: calc(0.3vw + 0.3svh);
    }
    .elements-container{
        width: 20vw;
        max-width: calc(160px + 8vw);
        font-size: min(1.5vw, 1.2rem);
    }
    .elements-letter1{
        margin: 2vw;
        font-size: 1em;
    }
    .elements-popup-container{
        font-size: calc(1.4vw + 1.4svh);
    }
    .elements-popup-title-mini{
        font-size: 0.4em;
    }
    .elements-popup-letter{
        font-size: 0.5em;
    }
    #specialthanks {
        font-size: calc(0.6vw + 0.6svh);
        display: flex;
        justify-content: space-around;
    }
    .specialthanks-letter {
        width: 70%;
        padding-right: 5%;
        padding-bottom: 3em;
    }
    .specialthanks-letter-mini {
        width: 30%;
        padding-top: 3em;
        padding-right: 5%;
        padding-left: 5%;
    }
    #comingsoon-container {/* reduced */
        margin-bottom: 0;
    }
    #comingsoon-title {/* reduced */
        font-size: max(calc(1.3vw + 1.3svh), 1.5rem);
    }
    #comingsoon-body {/* reduced */
        font-size: max(calc(0.9vw + 0.9svh), 0.9rem);
    }
}
/*-- /mediaquery --*/