*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Ubuntu', 'Noto Sans JP', sans-serif;
}

html{
    touch-action: manipulation;
}

button{
    cursor: pointer;
}

@keyframes spinning {
    0% {
        opacity: 0.6;
        transform: rotateY(0deg) scale(0.9);
        text-shadow: 0em 0em 0em#00000030;
    }
    100% {
        opacity: 1;
        transform: rotateY(180deg) scale(1.1);
        text-shadow: -0.1em 0.13em 0.1em#00000030;
    }
}
@-webkit-keyframes spinning {
    0% {
        opacity: 0.6;
        transform: rotateY(0deg) scale(0.9);
        text-shadow: 0em 0em 0em#00000030;
    }
    100% {
        opacity: 1;
        transform: rotateY(180deg) scale(1.1);
        text-shadow: -0.1em 0.13em 0.1em#00000030;
    }
}

:root{
    --violet: #8070ff;
    --blue: #50d0ff;
    --red: #ff5070;
    --green: #50ffa0;
    --white: #ffffff;

    --lightblue: #caf0ff;
    --lightviolet: #e6e3ff;
    --darkviolet0: #5949cf;
    --darkviolet1: #4536ba;

    --phoneborder: #8070ff80;
    --displayborder: #2f228f80;
    --phoneshadow: #2f228f20;

    --vb25: #7488ff;
    --vb50: #68a0ff;
    --vb75: #5cb8ff;

    --inmainBg: #ffffff80;

    --inactiveButton: #ffffff40;

    --lightmusic: #69F5FF;
    --darkmusic: #2163B5;

    --tagInstrumental: linear-gradient(150deg, hsl(186, 100%, 71%), hsl(225, 86%, 65%));
    --tagSong: linear-gradient(150deg, hsl(216, 100%, 71%), hsl(255, 87%, 65%));
    --tagVideo: linear-gradient(150deg, hsl(40, 84%, 61%), hsl(0, 64%, 58%));
    --tagIllustration: linear-gradient(150deg, hsl(54, 84%, 61%), hsl(14, 64%, 58%));
    --tagInteraction: linear-gradient(150deg, hsl(70, 81%, 58%), hsl(108, 75%, 43%));
    --tagSousaku: linear-gradient(150deg, hsl(147, 89%, 62%), hsl(180, 81%, 34%));
    --tagOther: linear-gradient(150deg, #97bbb9, #557483);
    --liked: linear-gradient(150deg, hsl(350, 79%, 81%), hsl(350, 80%, 63%));
}
.marked{
    display: inline-block;
    background: linear-gradient(150deg, var(--lightblue), var(--lightviolet));
    color: var(--violet);
    font-size: 1em !important;
    font-weight: 500;
    padding: 0rem 0.4rem;
    vertical-align: baseline !important;
    text-decoration: none;
    height: 1.3em;
}
small{
    font-size: 0.6em;
}
.ruby{
    font-size: 1em;
    vertical-align: baseline;
    position: relative;
}
.ruby::after{
    content: attr(data-ruby);
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 0.6em;
    transform: translate(-47%, -72%);
    letter-spacing: 0.65em;
}
.tagall{
    background: linear-gradient(150deg, var(--white), var(--lightblue)) !important;
    color: var(--darkviolet0) !important;
}
.taginstrumental{
    background: var(--tagInstrumental) !important;
}
.tagsong{
    background: var(--tagSong) !important;
}
.tagvideo{
    background: var(--tagVideo) !important;
}
.tagillustration{
    background: var(--tagIllustration) !important;
}
.taginteraction{
    background: var(--tagInteraction) !important;
}
.tagsousaku{
    background: var(--tagSousaku) !important;
}
.tagother{
    background: var(--tagOther) !important;
}
.tagliked{
    background: var(--liked) !important;
}

/* liked */
#likenotebutton.liked,
#workwindowarea>.workwindow>.workbuttonline>button.liked{
    background: var(--liked);
    color: white !important;
    box-shadow: inset 0.2em 0.3em 0.3em #00000050, inset -0.2em -0.3em 0.3em #ffffff30;
}
#likenotebutton.liked{
    border-width: 0em;
}
#workwindowarea>.workwindow>.workbuttonline>button.liked{
    border-width: 0.15em;
    border-color: white !important;
}
#likenotebutton.liked>span,
#workwindowarea>.workwindow>.workbuttonline>button.liked>span{
    opacity: 1;
}
#likenotebutton.ormore3>span,
#workwindowarea>.workwindow>.workbuttonline>button.ormore3>span{
    animation: spinning 2s infinite alternate cubic-bezier(1, 0, 0, 1);
    -webkit-animation: spinning 2s infinite alternate cubic-bezier(1, 0, 0, 1);
}
#likenotebutton.liked.ormore24,
#workwindowarea>.workwindow>.workbuttonline>button.liked.ormore24{
    background: linear-gradient(150deg, var(--blue) 25%, var(--violet) 75%);
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ レイアウト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

body{
    background: linear-gradient(150deg, var(--lightblue), var(--violet));
    color: var(--white);
    width: 100dvw;
    height: 100dvh;
}

#container{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100dvw;
    height: 100dvh;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

#backarea{
    width: 100%;
    height: 100%;
    background: transparent;
}

#area{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: min(100%, 900px);
    max-height: min(100%, 1600px);
    aspect-ratio: 9 / 16;
    overflow: visible;
    transition: all 0.5s cubic-bezier(0.75, 0.0, 0.5, 1.0);
}

@media(max-aspect-ratio: 9 / 16){ /*縦長の場合*/
    html{font-size: min(1.111111dvw, 10px)!important;} /* 10px ÷ 900px(横) × 100 dvw */
    
}

@media(min-aspect-ratio: 9 / 16){ /*横長の場合*/
    html{font-size: min(0.625dvh, 10px)!important;} /* 10px ÷ 1600px(縦) × 100 dvh */
}

#back{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-animation: deleteback 0.5s 1.8s ease-in forwards;
    animation: deleteback 0.5s 1.8s ease-in forwards;
}
@keyframes deleteback{
    0%{ opacity: 1; }
    100%{ opacity: 0; }
}
@-webkit-keyframes deleteback{
    0%{ opacity: 1; }
    100%{ opacity: 0; }
}
#back>svg{
    width: 80%;
    height: auto;
    overflow: visible;
}
#back>svg .cls-2{
    stroke: white;
    stroke-width: 0.1rem;
    stroke-dashoffset: 0%;
    fill-opacity: 0;
    -webkit-animation: logomark-animation 2.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    animation: logomark-animation 2.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes logomark-animation{
    0%{
        /* 線分0、間隔50の破線にする */
        stroke-dasharray:0% 10%;
        fill-opacity: 0;
        transform: translate(40%, 0%);
        stroke: var(--blue);
        fill: var(--blue);
    }
    30%{
        stroke-dasharray:10% 0%;
        fill-opacity: 0;
        transform: translate(20%, 0%);
        stroke: var(--lightblue);
        fill: var(--lightblue);
    }
    60%{
        stroke-dasharray:10% 0%;
        fill-opacity: 1;
        transform: translate(0%, 0%);
        stroke: white;
        fill: white;
    }
    70%{
        stroke-dasharray:10% 0%;
        fill-opacity: 1;
        transform: translate(0%, 0%);
    }
    100%{
        stroke-dasharray:10% 0%;
        fill-opacity: 1;
        transform: translate(-20%, 0%);
        stroke: var(--lightblue);
        fill: var(--lightblue);
    }
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  電話部分  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

#wholephone{
    position: absolute;
    /*
    left: 0;
    right: 0;
    */
    left: auto;
    right: 2.5%;
    margin: auto;
    top: -4.5%;
    width: 95%;
    height: 200%;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    -webkit-animation: phonecoming 0.8s 2s ease forwards;
    animation: phonecoming 0.8s 2s ease forwards;
    transition: all 0.5s cubic-bezier(0.75, 0.0, 0.5, 1.0);
}
@keyframes phonecoming{
    0%{
        transform: translateX(32%) translateY(3.2%) rotateX(45deg) rotateZ(6deg) scale(1.16);
        opacity: 0;
	}
	30%{
        transform: translateX(-4%) translateY(-0.4%) rotateX(-4deg) rotateZ(-0.75deg) scale(0.98);
	}
    40%{
        opacity: 1;
    }
	99.99%{
        transform: translateX(0%) translateY(0%) rotateX(0deg) rotateZ(0deg) scale(1.0);
        opacity: 1;
	}
    100%{
        transform: none;
        opacity: 1;
    }
}
@-webkit-keyframes phonecoming{
    0%{
        transform: translateX(32%) translateY(3.2%) rotateX(45deg) rotateZ(6deg) scale(1.16);
        opacity: 0;
	}
	30%{
        transform: translateX(-4%) translateY(-0.4%) rotateX(-4deg) rotateZ(-0.75deg) scale(0.98);
	}
    40%{
        opacity: 1;
    }
	99.99%{
        transform: translateX(0%) translateY(0%) rotateX(0deg) rotateZ(0deg) scale(1.0);
        opacity: 1;
	}
    100%{
        transform: none;
        opacity: 1;
    }
}

.phoneparts{
    position: relative;
    background: linear-gradient(150deg, var(--white), var(--lightblue));
    border: 0.2rem solid var(--phoneborder);
    flex: 1;
    transition: all 0.5s cubic-bezier(0.75, 0.0, 0.5, 1.0);
    filter: drop-shadow(1rem 1.5rem 0.5rem var(--phoneshadow));
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  upper  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

#upperphone{
    border-radius: 32rem 32rem 2rem 2rem / 16rem 16rem 2rem 2rem;
}

#upperphone::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 6%;
    margin: auto;
    width: 15%;
    height: 2%;
    background: var(--darkviolet1);
    border-radius: 1.2rem;
    border: 0.4rem solid var(--displayborder);
}

#displayframe{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4%;
    margin: auto;
    width: 94%;
    height: 86%;
    background: linear-gradient(150deg, var(--darkviolet0), var(--darkviolet1));
    border-radius: 4rem;
    border: 0.4rem solid var(--displayborder);
}

#copyright{
    position: absolute;
    bottom: 2.5%;
    width: 100%;
    height: 5%;
    color: var(--white);
    font-size: 3rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.75, 0.0, 0.5, 1.0);
}

/* ■■■■■■■■■■■■■■■■■■■■ ディスプレイ部 ■■■■■■■■■■■■■■■■■■■■ */
#display{
    position: absolute;
    left: 0;
    right: 0;
    top: 6%;
    margin: auto;
    width: 92%;
    height: auto;
    aspect-ratio: 2 / 3;
    border-radius: 3rem;
    overflow: hidden;
    border: 0.4rem solid var(--displayborder);
    transition: all 0.5s cubic-bezier(0.75, 0.0, 0.5, 1.0);
}
.inmainfx::after{
    z-index: 3;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 1;
    -webkit-animation: inmainblinking 0.5s 0.25s forwards;
    animation: inmainblinking 0.5s 0.25s forwards;
    background: var(--white);
}
@keyframes inmainblinking{
    0% {
    }
    26%, 33% {
        opacity: 0.75;
    }
    28%, 36%, 50% {
        opacity: 0.5;
    }
    27%, 29%, 35%, 37%, 43% {
        opacity: 0.9;
    }
    42%, 55%{
        opacity: 0.25;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes inmainblinking{
    0% {
    }
    26%, 33% {
        opacity: 0.75;
    }
    28%, 36%, 50% {
        opacity: 0.5;
    }
    27%, 29%, 35%, 37%, 43% {
        opacity: 0.9;
    }
    42%, 55%{
        opacity: 0.25;
    }
    100% {
        opacity: 0;
    }
}
#display>*{
    z-index: 2;
}

/* ■■■■■■■■■■ 背景 ■■■■■■■■■■ */
#displaybg{
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    height: 102%;
    background: linear-gradient(150deg, var(--violet) 20%, var(--blue) 80%);
}

/* ■■■■■■■■■■ ヘッダー ■■■■■■■■■■ */
#displayheader{
    position: absolute;
    top: 0.2%;
    width: 100%;
    height: 8%;
    padding: 0 4%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
#displayheader #headertopbutton{
    height: 4.7rem;
    width: auto;
    aspect-ratio: 1;
    cursor: pointer;
}
#displayheader #headertopbutton .cls-2{
    fill: var(--lightblue);
}
#battery{
    height: 50%;
    width: auto;
    border: 0.5rem solid var(--white);
    padding: 0.4rem;
    background: var(--darkviolet0);
    position: relative;
    aspect-ratio: 4 / 2;
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    margin: 0 3%;
}
#battery::after{
    content: '';
    position: absolute;
    width: 12%;
    height: 50%;
    background: var(--white);
    right: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
}
.batteryunit{
    height: 100%;
    flex: 1;
}
.batteryunit:nth-child(-n+2){
    background-color: var(--darkviolet1);
}
.batteryunit:nth-child(n+3){
    background-color: var(--blue);
}
#displayheader>span{
    font-size: 4rem;
    font-weight: 700;
    color: var(--blue);
}
#displayheader>span.blinker{
    -webkit-animation: blinking 1s step-end infinite normal;
    animation: blinking 1s step-end infinite normal;
    transform: translateY(-5%);
    padding: 0 0.5%;
}
@keyframes blinking{
    0%{ opacity: 1; }
	50%{ opacity: 0; }
}
@-webkit-keyframes blinking{
    0%{ opacity: 1; }
	50%{ opacity: 0; }
}
#displayheader>span.blinker24{
    -webkit-animation: blinking24 2s step-end infinite normal;
    animation: blinking24 2s step-end infinite normal;
}
@keyframes blinking24{
    0%{
        color: var(--lightblue);
        transform: translateY(-5%);
    }
	50%{
        color: var(--blue);
        transform: translateY(0%);
    }
}
@-webkit-keyframes blinking24{
    0%{
        color: var(--lightblue);
        transform: translateY(-5%);
    }
	50%{
        color: var(--blue);
        transform: translateY(0%);
    }
}

#headercounter{
    height: 50%;
    width: auto;
    padding: 0.4rem;
    background: var(--darkviolet1);
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    margin: 0 3%;
}
#headercounter>div{
    height: 100%;
    width: auto;
    aspect-ratio: 3 / 4;
    flex: 1;
    background: linear-gradient(180deg, var(--violet), var(--darkviolet0));
    color: var(--lightblue);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.6rem;
    font-weight: 500;
}
#headercounter.kiriban>div{
    -webkit-animation: kiribaning 2s step-end infinite normal;
    animation: kiribaning 2s step-end infinite normal;
}
@keyframes kiribaning{
    0%{
        color: var(--white);
        background: linear-gradient(180deg, var(--blue), var(--violet));
    }
	50%{
        color: var(--lightblue);
        background: linear-gradient(180deg, var(--violet), var(--darkviolet0));
    }
}
@-webkit-keyframes kiribaning{
    0%{
        color: var(--white);
        background: linear-gradient(180deg, var(--blue), var(--violet));
    }
	50%{
        color: var(--lightblue);
        background: linear-gradient(180deg, var(--violet), var(--darkviolet0));
    }
}

/* ■■■■■■■■■■ ヘッダー下部バー ■■■■■■■■■■ */
#displayheaderhr{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 8%;
    width: 92%;
    height: 0.75%;
    background: linear-gradient(90deg, var(--darkviolet0), var(--darkviolet1));
}

/* ■■■■■■■■■■ メイン ■■■■■■■■■■ */
#displaymain{
    bottom:0;
    position: absolute;
    width: 100%;
    height: 92%;
}

.inmain{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    height: 94%;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.inmain::-webkit-scrollbar{ display: none; }
.inmain:not(#top){
    overflow-x: hidden;
    overflow-y: scroll;
}
.inmain>h2{
    background: linear-gradient(90deg, var(--darkviolet0), var(--darkviolet1));
    color: var(--blue);
    font-size: 4rem;
    font-weight: 700;
    height: 9%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.inmain>h2>span{
    margin-right: 1rem;
    font-size: 5rem;
    color: var(--white);
}
.inmain>h2>img{
    margin-right: 1rem;
    height: 5rem;
    width: auto;
}
.inmain>h2>.callnumber{
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 0 1.5rem;
    width: 20%;
    height: 45%;
    font-size: 3rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(150deg, var(--violet), var(--phoneborder));
    color: var(--lightviolet);
}
.inmain>h2>.callnumber>span{
    font-size: 3rem;
    color: var(--white);
}
.inmain>h3{
    background: linear-gradient(150deg, var(--lightblue), var(--lightviolet));
    color: var(--violet);
    font-size: 3.5rem;
    font-weight: 700;
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inmain>ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 3rem;
    background: var(--inmainBg);
    flex: 1;
}
.inmain:not(#top)>div:not(.subinfo){
    background: var(--inmainBg);
    font-size: 3rem;
    line-height: 4.5rem;
    color: var(--darkviolet1);
    padding: 3rem;
    flex: 1;
}
.inmain:not(#top)>div.subinfo {
    font-size: 2.8rem;
    background: linear-gradient(90deg, var(--inmainBg), var(--phoneborder), var(--phoneborder), var(--inmainBg));
    color: var(--white);
    padding: 1.5rem;
    text-align: center;
}

/* ■■■■■■■■■■ トップ */
#top{
    justify-content: center;
    align-items: center;
    transition: all 1.8s cubic-bezier(0.3, 0.0, 0.5, 1.0);
}

#sitetitle{
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2%;
}
#sitetitle>*{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: var(--white);
}
#sitetitle>h1{
    width: 100%;
    height: auto;
    aspect-ratio: 6.9;
}
#sitetitle>h1>img{
    filter: drop-shadow(0.4rem 0.7rem 0.2rem var(--phoneshadow));
    width:100%;
    height:auto;
}
#sitetitle>p{
    height: 5.5rem;
    font-size: 3rem;
    font-weight: 500;
}

#snailarea{
    position: absolute;
    bottom: 7.1%;
    width: calc(100% - 9rem);
    height: 8rem;
}
#snailarea #snail{
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    position: absolute;
    left: 100%;
    transform: translateX(-50%);
    transition: all 1.8s cubic-bezier(0.3, 0.0, 0.5, 1.0);
    cursor: pointer;
}
#snailarea #snail #snailballoon{
    position: absolute;
    height: 150%;
    width: 600%;
    left: calc(50% - 13.5rem);
    pointer-events: none;
    transition: all 1.8s cubic-bezier(0.3, 0.0, 0.5, 1.0);
    bottom: 160%;
    transform: translateX(-50%);
}
#snailarea #snail #snailballoon>div{
    width: 100%;
    height: 100%;
    transform: translateY(20%) scale(0.9);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.0, 0.0, 0.0, 1.0);
}
#snailarea #snail #snailballoon.visible>div{
    transform: translateY(0%) scale(1);
    opacity: 1;
}
#snailarea #snail #snailballoontail{
    position: absolute;
    top: 95%;
    left: calc(50% + 13.5rem);
    transform: translateX(-50%);
    border-color: transparent;
    border-top-color: var(--lightblue);
    border-width: 3.6rem 2.4rem 0;
    border-style: solid;
    transition: all 1.8s cubic-bezier(0.3, 0.0, 0.5, 1.0);
}
#snailarea #snail #snailballoonbody{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, var(--white), var(--lightblue));
    border-radius: 1rem;
    color: var(--violet);
    font-size: 3rem;
    font-weight: 700;
    padding: 5%;
}
#snailarea #snail #snailimage{
    height: 100%;
    width: 100%;
    transition: all 1.8s cubic-bezier(0.9, 0.0, 0.1, 1.0);
    pointer-events: none;
}

#news{
    width: 100%;
    height: 8%;
    background: linear-gradient(150deg, var(--darkviolet0), var(--darkviolet1));
    display: flex;
    flex-direction: row;
    padding-right: 3%;
}
#news>*{
    display: flex;
    align-items: center;
}
#newsicon{
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    justify-content: center;
    font-size: 4rem;
    color: var(--white);
    transform: translateY(2%);
    cursor: pointer;
}
#newstextarea{
    position: relative;
    height: 100%;
    overflow: hidden;
    flex: 1;
    justify-content: flex-start;
}
.newsunit{
    position: absolute;
    left: 0;
    text-wrap: nowrap;
    display: flex;
    gap: 2%;
}
.newsunit>*{
    font-size: 2.8rem;
}
.newsunit::after{
    content: '|';
    position: absolute;
    left: -3%;
    color: var(--violet);
    font-size: 2.8rem;
}
.newsunit:nth-child(1){
    -webkit-animation: marq 45s 0.1s infinite linear;
    animation: marq 45s -42s infinite linear;
}
.newsunit:nth-child(2){
    -webkit-animation: marq 45s 0.1s infinite linear;
    animation: marq 45s -12s infinite linear;
}
.newsunit:nth-child(3){
    -webkit-animation: marq 45s 0.1s infinite linear;
    animation: marq 45s -27s infinite linear;
}
@keyframes marq {
  0% {
    transform: translateX(230%);
  }
  100% {
    transform: translateX(-115%);
  }
}
@-webkit-keyframes marq {
  0% {
    transform: translateX(230%);
  }
  100% {
    transform: translateX(-115%);
  }
}
.newsdate{
    color: var(--blue);
    font-weight: 700;
    cursor: pointer;
}
.newsdate:first-child{
    -webkit-animation: blinking24 1s step-end infinite normal;
    animation: blinking24 1s step-end infinite normal;
}
.newstitle{
    color: var(--white);
    cursor: pointer;
}
.newsdate:hover, .newstitle:hover{
    text-decoration: underline;
}

/* ■■■■■■■■■■ ここについて */
#about>div#aboutWebsite{
    flex: none;
}
#about>div#aboutWebsite>img{
    max-width: 100%;
    height: auto;
}
#about>div#aboutAuthor{
    display: flex;
    flex-direction: column;
}
#about>div#aboutAuthor>div{
    width: 100%;
    font-size: 1em;
}
#about>div#aboutAuthor>div:first-child{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
}
#about>div#aboutAuthor>div:first-child>img{
    width: 22%;
    height: auto;
}
#about>div#aboutAuthor>div:first-child>div{
    font-size: 1em;
}
#about>div#aboutAuthor>div:last-child{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 8rem;
    flex: 1;
}
#about>div#aboutAuthor a.miniButton{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: linear-gradient(150deg, var(--white), var(--lightblue));
    text-decoration: none;
    border-radius: 1.5rem;
    padding: 0.5rem 1rem;
}
#about>div#aboutAuthor a.miniButton>*:first-child{
    font-size: 3rem;
    color: var(--violet);
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
#about>div#aboutAuthor a.miniButton>*:last-child{
    font-size: 3rem;
    color: var(--vb75);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 0 1rem;
}

/* ■■■■■■■■■■ 雑記 */
#notes>ul{
    gap: 1rem;
    padding: 1.5rem;
}
#notes>ul>li{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: var(--white);
    color: var(--darkviolet1);
    flex: 1;
    padding: 1.5rem;
}
#notes>ul>li:not(.dummy){
    cursor: pointer;
}
#notes>ul>li.dummy{
    background: var(--inmainBg);
}
#notes>ul>li *{
    pointer-events: none;
}
#notes>ul>li>.notedate{
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    /*background: linear-gradient(150deg, var(--violet), var(--blue));*/
    color: var(--white);
    margin-right: 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 30%;
}
.noteofspecial{
    background: linear-gradient(150deg, #fb4dbc, #ffb78c);
}
.noteofupdate{
    background: linear-gradient(150deg, var(--violet), var(--blue));
}
.noteofother{
    background: linear-gradient(150deg, #7896c3, #cde2e9);
}
.noteofdiary{
    background: linear-gradient(150deg, #33b79a, #8cf7bd);
}
#notes>ul>li>.notedate>span{
    display: flex;
    justify-content: center;
    align-items: center;
}
#notes>ul>li>.notedate>.notedateyear{
    font-size: 2.5rem;
}
#notes>ul>li>.notedate>.notedatemoda{
    font-size: 3.5rem;
    font-weight: 700;
}
#notes>ul>li>.notetitle{
    color: var(--darkviolet1);
    font-size: 3rem;
    font-weight: 700;
}
#notes>ul>li>.notetitle:hover{
    text-decoration: underline;
}

#notes>#notesLRbar{
    height: 12%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--violet);
    gap: 2%;
    flex: none;
}
#notes>#notesLRbar>div{
    background: linear-gradient(90deg, var(--white), var(--lightviolet));
    color: var(--darkviolet1);
    font-size: 3rem;
    font-weight: 700;
    position: relative;
    width: 41%;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#notes>#notesLRbar>div.prev{
    border-radius: 0 1rem 1rem 0;
}
#notes>#notesLRbar[data-page="1"]>div.prev{
    pointer-events: none;
    opacity: 0.3;
}
#notes>#notesLRbar>div.next{
    border-radius: 1rem 0 0 1rem;
}
#notes>#notesLRbar[data-last="true"]>div.next{
    pointer-events: none;
    opacity: 0.3;
}
#notes>#notesLRbar>div::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-width: 4rem;
    border-style: solid;
}
#notes>#notesLRbar>div.prev::before{
    right: 99.99%;
    border-left-color: transparent;
    border-right-color: var(--white);
}
#notes>#notesLRbar>div.next::before{
    left: 99.99%;
    border-left-color: var(--lightviolet);
    border-right-color: transparent;
}

#notes>#notewindow{
    position: absolute;
    top: 9%;
    width: 100%;
    height: 91%;
    display: flex;
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--white);
    padding: 0;
    transition: all 0.5s cubic-bezier(0.0, 0.0, 0.0, 1.0);
}
#notes>#notewindow>div:nth-child(1){
    /*background: linear-gradient(150deg, var(--violet), var(--blue));*/
    color: var(--white);
    font-size: 3rem;
    font-weight: 700;
    width: 100%;
    height: 12%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#notes>#notewindow>div:nth-child(2){
    color: var(--darkviolet1);
    font-size: 3rem;
    line-height: 4.5rem;
    width: 100%;
    height: 10%;
    flex: 1;
    overflow-y: scroll;
    padding: 5%;
}
#notes>#notewindow>div:nth-child(2)>span{
    font-size: 1.3em;
    vertical-align: bottom;
}
#notes>#notewindow>div:nth-child(2)>a{
    color: var(--blue);
    font-weight: 500;
    font-size: 1em;
    text-decoration: underline var(--vb75) 0.1em;
}
#notes>#notewindow>div:nth-child(2)>div.openworkbutton{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    margin: 2rem 0;
    cursor: pointer;
    box-shadow: 0.5rem 0.5rem 1rem var(--displayborder);
}
#notes>#notewindow>div:nth-child(2)>div.openworkbutton *{
    pointer-events: none;
}
#notes>#notewindow>div:nth-child(2)>div.openworkbutton>img{
    width: 20%;
    height: auto;
    aspect-ratio: 1;
}
#notes>#notewindow>div:nth-child(2)>div.openworkbutton>div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: 700;
    border-width: 0 0 0 0.5rem;
    border-style: solid;
}
#notes>#notewindow>div:nth-child(3){
    width: 100%;
    height: 13%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
#notes>#notewindow>div:nth-child(3)>button{
    border-radius: 3rem;
    width: 40%;
    height: 80%;
    font-size: 3rem;
    font-weight: 700;
    transition: all 0.1s cubic-bezier(0.0, 0.0, 0.0, 1.0);
}
#notes>#notewindow>div:nth-child(3)>button>*{
    pointer-events: none;
}
#notes>#notewindow>div:nth-child(3)>button>span{
    font-size: 1.24em;
    width: auto;
    vertical-align: middle;
    position: relative;
    transform-style: preserve-3d;
    opacity: 0.6;
}

#likenotebutton{
    background: transparent;
    color: var(--violet);
    border-width: 0.1em;
    border-color: var(--violet);
    border-style: solid;
}
#likenotebutton>span{
    font-size: 1.2em;
    opacity: 0.4;
}

#closenotebutton{
    background: linear-gradient(150deg, var(--blue), var(--violet));
    color: var(--white);
}

/* ■■■■■■■■■■ 作品 */
#works>div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.inmain#works>div.opengallerybuttonarea {
    flex: 3;
}
.inmain#works>div.worklinkbuttonarea {
    flex: 2;
}
#works>div>* {
    width: calc((100% - 3rem) / 3);
    height: calc((100% - 1.5rem) / 2);
    text-decoration: none;
    background: linear-gradient(150deg, var(--violet), var(--blue));
    color: var(--white);
    font-size: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    gap: 0.5rem;
    cursor: pointer;
}
#works>div>*>*{
    pointer-events: none;
}
#works>div>div {
    font-weight: 400;
}
#works>div>div>div {
    display: flex;
}
#works>div>div>div:first-child {
    flex: 7;
    font-size: 7rem;
    align-items: flex-end;
}
#works>div>div>div:last-child {
    flex: 4;
    font-size: 2.5rem;
    align-items: flex-start;
}

#works>div.opengallerybuttonarea>div:first-child {
    width: calc((100% - 3rem) * 2 / 3 + 1.5rem);
    font-weight: 700;
}

#works>div>a {
    font-size: 2rem;
}
#works>div>a.sc{
    background: linear-gradient(150deg, var(--violet) 25%, #df7647 75%);
}
#works>div>a.yt{
    background: linear-gradient(150deg, var(--violet) 25%, #ff0033 75%);
}
#works>div>a.nt{
    background: linear-gradient(150deg, var(--violet) 25%, #c0c0c0 75%);
}

#works>div>a>div:first-child {
    font-size: 3rem;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
#works>div>a.sc>div:first-child {
    font-size: 2.4rem;
    gap: 0.5rem;
}
#works>div>a>div:first-child>span{
    font-size: 1em;
}
#works>div>a>div:nth-child(2) {
    font-size: 2.3rem;
}

/* ■■■■■■■■■■ ギャラリー */
#gallery>div#tagbuttonarea{
    flex: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    background: linear-gradient(150deg, var(--lightblue), var(--blue));
    padding: 1rem;
}
#gallery>div#tagbuttonarea>div.tagbutton{
    background: var(--inmainBg);
    color: var(--darkviolet1);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    width: calc((100% - 3rem) / 4);
    height: 8.05rem;
    opacity: 0.6;
    transition: all 0.2s cubic-bezier(0.75, 0.0, 0.5, 1.0);
    cursor: pointer;
    padding: 1rem;
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive{
    background: linear-gradient(150deg, var(--blue), var(--violet));
    color: var(--white);
    opacity: 1;
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive[data-tag="instrumental"]{
    background: var(--tagInstrumental);
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive[data-tag="song"]{
    background: var(--tagSong);
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive[data-tag="video"]{
    background: var(--tagVideo);
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive[data-tag="illustration"]{
    background: var(--tagIllustration);
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive[data-tag="interaction"]{
    background: var(--tagInteraction);
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive[data-tag="sousaku"]{
    background: var(--tagSousaku);
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive[data-tag="other"]{
    background: var(--tagOther);
}
#gallery>div#tagbuttonarea>div.tagbutton.tagbuttonactive[data-tag="liked"]{
    background: var(--liked);
}

#gallery>div#tagbuttonarea>div.tagbutton>*{
    pointer-events: none;
}
#gallery>div#tagbuttonarea>div.tagbutton>div:first-child{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.6rem;
    height: 60%;
    width: auto;
    aspect-ratio: 1;
}
#gallery>div#tagbuttonarea>div.tagbutton>div:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.1rem;
    flex: 1;
}

#galleryUl{
    display: block;
    overflow-y: scroll;
    padding: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#galleryUl>li{
    float: left;
    display: block;
    width: calc(100% / 3);
    height: auto;
    aspect-ratio: 1;
    cursor: pointer;
}
#galleryUl>li>img{
    width: 100%;
    height: 100%;
    pointer-events: none;
}


/* ■■■■■■■■■■ リンク */
#links {
    display: block;
}
#links>ul{
    flex: none;
}
#links>ul>li{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dummybanner{
    display: inline-flex;
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 5;
    background: linear-gradient(120deg, #caf0ffa0, #caf0ff40, #caf0ffa0);
    color: var(--white);
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    font-weight: 700;
    font-style: italic;
    text-decoration: none;
}
/* 交流 */
#links>#linkUl{
    padding: 2rem 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 0;
}
#links>#linkUl>li{
    flex-direction: column;
    gap: 0.5rem;
    flex-basis: 200px;
    max-width: calc(100% - 6rem);
    margin: 1rem 0;
}
#links>#linkUl>li>a{
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: 5;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
#links>#linkUl>li>div{
    font-size: 3rem;
    line-height: 4rem;
    color: var(--darkviolet1);
    width: 100%;
    text-align: center;
}
#links>#linkUl>li>a>img{
    max-width: 100%;
    max-height: 100%;
}
/* ここ */
#links>#hereUl>li{
    flex-direction: row;
    color: var(--darkviolet0);
    font-size: 2.4rem;
}
#links>#hereUl>li>span:nth-child(1):not(.dummybanner){
    display: inline-block;
    background: linear-gradient(150deg, var(--violet), var(--blue));
    color: var(--white);
    border-radius: 2.4rem;
    padding: 1rem;
    margin-right: 1rem;
    width: 14rem;
    height: 7rem;
    text-align: center;
    font-size: 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#links>#hereUl>li>span:nth-child(2){
    display: inline-block;
    border-radius: 1.2rem;
    padding: 1rem;
    width: 40rem;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 700;
    flex: 1;
}
#links>#hereUl>li>button{
    background: linear-gradient(150deg, var(--violet), var(--blue));
    color: var(--white);
    height: 7rem;
    width: auto;
    aspect-ratio: 1;
    border-radius: 2.4rem;
    font-size: 4.5rem;
}
#links>#hereUl>li>img{
    max-width: 100%;
    height: auto;
}

/* ■■■■■■■■■■ 会話 */
#specials>div{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  center  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

#centerphone{
    height: 4%;
    display: flex;
    flex-direction: row;
    gap: 0;
    transition: all 0.5s cubic-bezier(0.75, 0.0, 0.5, 1.0);
}
#centerphone>*{
    height: 100%;
}
#centerphone>.phoneparts:first-child{
    border-radius: 2rem 0 0 2rem;
}
#centerphone>.phoneparts:last-child{
    border-radius: 0 2rem 2rem 0;
}
#slideswitch{
    cursor: pointer;
    width: 45%;
    flex: none;
    font-size: 7rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blue);
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  lower  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

#lowerphone{
    border-radius: 2rem 2rem 32rem 32rem / 2rem 2rem 16rem 16rem;
}

#lowerphone::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6%;
    margin: auto;
    width: 15%;
    height: 2%;
    background: var(--darkviolet1);
    border-radius: 1.2rem;
    border: 0.4rem solid var(--displayborder);
}

#menubuttonarea{
    position: absolute;
    left: 0;
    right: 0;
    top: 7%;
    margin: auto;
    width: 86%;
    height: 24%;
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

#menubuttonarea>div{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#menubuttonarea>div>button{
    flex: 1;
    background: linear-gradient(150deg, var(--violet), var(--vb25));
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* 左右 */
#menubuttonarea>div:nth-child(1)>button{
    padding-right: 25%;
}
#menubuttonarea>div:nth-child(2)>button{
    padding-left: 25%;
}
/* 上下
#menubuttonarea>div>button:nth-child(1){
}
#menubuttonarea>div>button:nth-child(2){
}*/
/* 個別 */
#menubuttonL0{
    border-radius: 40rem 0 0 0 / 60rem 0 0 0;
}
#menubuttonL1{
    border-radius: 0 0 0 40rem / 0 0 0 60rem;
}
#menubuttonR0{
    border-radius: 0 40rem 0 0 / 0 60rem 0 0;
}
#menubuttonR1{
    border-radius: 0 0 40rem 0 / 0 0 60rem 0;
}

#menubuttonarea>div>button>div{
    color: var(--white);
    display: flex;
    justify-content: center;
}
#menubuttonarea>div>button>div:nth-child(1){
    font-size: 7rem;
    height: 50%;
    align-items: flex-end;
}
#menubuttonarea>div>button:nth-child(1)>div:nth-child(1){
    height: 55%;
}

#menubuttonarea>div>button>div:nth-child(2){
    font-size: 3.5rem;
    height: 35%;
    align-items: flex-start;
}
#menubuttonarea>div>button:nth-child(2)>div:nth-child(2){
    height: 40%;
}

/* リンク帳対応 */
#menubuttonarea>div>#menubuttonR0>div:nth-child(1){
    height: 60%;
}
#menubuttonarea>div>#menubuttonR0>div:nth-child(2){
    font-size: 3rem;
}

#menubuttonC{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 35%;
    height: 70%;
    aspect-ratio: 1;
    background: var(--blue);
    border-radius: 50%;
    border: 2rem solid #F0FBFF;
    box-sizing: content-box;
}
#menubuttonC>img{
    height: 14rem;
    width: auto;
    margin-top: 3%;
}
#menubuttonC>div{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 2.5rem;
    height: 15%;
}


#numberbuttonarea{
    position: absolute;
    left: 0;
    right: 0;
    top: 33%;
    margin: auto;
    width: 86%;
    height: 54%;
    border-radius: 5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: hidden;
}

.buttonrow{
    flex: 1;
    gap: 2rem;
    display: flex;
    flex-direction: row;
}

.buttonrow>button{
    flex: 1;
    color: var(--white);
    font-weight: 700;
    font-size: 10rem;
    position: relative;
    transition: all 0.24s cubic-bezier(0.75, 0.0, 0.5, 1.0);
}

.buttonrow:nth-child(1)>button{
    background: var(--blue);
}
.buttonrow:nth-child(2)>button{
    background: linear-gradient(150deg, var(--violet), var(--vb25));
}
.buttonrow:nth-child(3)>button{
    background: linear-gradient(150deg, var(--vb25), var(--vb50));
}
.buttonrow:nth-child(4)>button{
    background: linear-gradient(150deg, var(--vb50), var(--vb75));
}
.buttonrow:nth-child(5)>button{
    background: linear-gradient(150deg, var(--vb75), var(--blue));
}

#topbutton::after{
    content: 'TOP';
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    font-family: 'Ubuntu';
    font-size: 3rem;
    font-weight: 700;
    color: var(--blue);
}


#numberwindow{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 100%;
    width: 90%;
    height: 20%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    background: var(--darkviolet1);
    color: var(--blue);
    transition: all 0.24s cubic-bezier(0.75, 0.0, 0.5, 1.0);
    gap: 8%;
    border: 1rem solid var(--blue);
}
.numberwindowerror{
    border-color: var(--red) !important;
    color: var(--red) !important;
    -webkit-animation: tremble 0.5s linear 0s;
    animation: tremble 0.5s linear 0s;
}
@keyframes tremble{
    0%,100%{ transform: translate(0%, 0%); }
    6%,90%{ transform: translate(0.1%, 0%); }
    12%,84%{ transform: translate(-0.2%, 0%); }
    18%,78%{ transform: translate(0.4%, 0%); }
    24%,72%{ transform: translate(-0.8%, 0%); }
    30%,42%,54%,66%{ transform: translate(1.6%, 0%); }
    36%,48%,60%{ transform: translate(-1.6%, 0%); }
}
@-webkit-keyframes tremble{
    0%,100%{ transform: translate(0%, 0%); }
    6%,90%{ transform: translate(0.1%, 0%); }
    12%,84%{ transform: translate(-0.2%, 0%); }
    18%,78%{ transform: translate(0.4%, 0%); }
    24%,72%{ transform: translate(-0.8%, 0%); }
    30%,42%,54%,66%{ transform: translate(1.6%, 0%); }
    36%,48%,60%{ transform: translate(-1.6%, 0%); }
}
.digit{
    height: 40%;
    width: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10rem;
    font-weight: 700;
    border-bottom: 0.6rem solid transparent;
}
.blinkdigit{
    border-color: var(--blue);
    -webkit-animation: blinking 1s step-end infinite normal;
    animation: blinking 1s step-end infinite normal;
}
.numberwindowerror>.blinkdigit{
    transition: all 0.24s cubic-bezier(0.75, 0.0, 0.5, 1.0);
    border-color: var(--red);
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  作品部分  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

#workwindowarea{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0%;
    transition: all 0.5s cubic-bezier(0.75, 0.0, 0.5, 1.0);
    pointer-events: none;
    display: flex;
    opacity: 0;
    font-size: 3rem;
}
#area.openwork>#workwindowarea{
    opacity: 1;
}

#workwindowarea>.workwindow{
    position: absolute;
    background: linear-gradient(150deg, #fffc, #fffd, #fffc, #fffb);
    color: var(--darkviolet1);
    box-shadow: 1rem 1rem 1rem var(--phoneshadow);
    max-width: 99%;
    max-height: 90%;
    aspect-ratio: 5 / 7;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*gap: 1.5%;*/
    gap: 0.6em;
    font-size: 1em;
    pointer-events: auto;
    transition: all 0.5s cubic-bezier(0.0, 0.0, 0.0, 1.0);
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 1;
}
#workwindowarea>.workwindow *{
    width: 100%;
    font-size: 1em;
}
#workwindowarea>.workwindow>*{
    transition: all 0.5s cubic-bezier(0.0, 0.0, 0.0, 1.0);
}
#workwindowarea>.workwindow>.workwindowheader{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3%;
    height: 12%;
    padding: 3%;
    border-style: solid;
    border-width: 0.1em;
    position: relative;
}
#workwindowarea>.workwindow>.workwindowheader>.workwindowimage{
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    border-width: 0.1em;
    border-style: solid;
}
#workwindowarea>.workwindow>.workwindowheader>.workwindowimage>img{
    height: 100%;
    width: 100%;
}
#workwindowarea>.workwindow>.workwindowheader>.workwindowtitle{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4em;
    font-weight: 700;
    padding-right: 0.3em;
}
#workwindowarea>.workwindow>.workwindowheader>.workwindowdate{
    position: absolute;
    width: 50%;
    right: 0.8em;
    bottom: 0.8em;
    text-align: right;
    font-size: 0.8em;
}

#workwindowarea>.workwindow>.workwindowtags{
    height: 4%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2%;
}
#workwindowarea>.workwindow>.workwindowtags>div{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: linear-gradient(150deg, var(--violet), var(--blue));
    color: var(--white);
    border-radius: 0.5em;
    padding-right: 0.5em;
    max-width: 30%;
    box-shadow: 0.2em 0.2em 0.5em #00000030;
}
#workwindowarea>.workwindow>.workwindowtags>div *{
    display: flex;
    justify-content: center;
    align-items: center;
}
#workwindowarea>.workwindow>.workwindowtags>div>div:first-child{
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    font-size: 1em;
}
#workwindowarea>.workwindow>.workwindowtags>div>div:last-child{
    flex: 1;
    font-size: 0.8em;
}

/* workwindowcontent ここから */
#workwindowarea>.workwindow>.workwindowcontent{
    flex: 1;
    border-style: solid;
    border-width: 0.1em;
    padding: 3%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
}
#workwindowarea>.workwindow>.workwindowcontent>img{
    height: 9.5em;
    width: auto;
}
#workwindowarea>.workwindow>.workwindowcontent iframe{
    box-shadow: 0.2em 0.2em 0.5em #00000030;
}
#workwindowarea>.workwindow>.workwindowcontent>iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
#workwindowarea>.workwindow>.workwindowcontent .buttons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    margin-top: 3%;
    gap: 3%;
    font-size: 0.8em;
}
#workwindowarea>.workwindow>.workwindowcontent .buttons>button{
    font-size: 1em;
    padding: 0.4em;
    border-radius: 0.5em;
    flex: 1;
    font-weight: 700;
}

#workwindowarea>.workwindow>.workwindowcontent>div.soundcloud{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 3%;
    justify-content: center;
    align-items: flex-start;
}
#workwindowarea>.workwindow>.workwindowcontent>div.soundcloud>iframe{
    width: 50%;
    height: auto;
    aspect-ratio: 1;
}
#workwindowarea>.workwindow>.workwindowcontent>div.soundcloud>div,
#workwindowarea>.workwindow>.workwindowcontent>div.soundcloud>p{
    flex: 1;
}
#workwindowarea>.workwindow>.workwindowcontent>div.soundcloud .buttons{
    flex-direction: column;
}
#workwindowarea>.workwindow>.workwindowcontent>div.soundcloud .buttons>button{
    width: 100%;
}

#workwindowarea>.workwindow>.workwindowcontent>a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    height: 2.2em;
    border-radius: 1em;
    font-size: 1.2em;
    text-decoration: none;
    margin: 0.3em;
}
#workwindowarea>.workwindow>.workwindowcontent>p{
    padding: 0;
    line-height: 1.4;
}
#workwindowarea>.workwindow>.workwindowcontent>p:last-of-type{
    flex: 1;
}
#workwindowarea>.workwindow>.workwindowcontent>.linkarea{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.8em;
}
#workwindowarea>.workwindow>.workwindowcontent>.linkarea::before{
    content: "関連リンク";
    width: 100%;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5em;
    letter-spacing: 0.3em;
    background: linear-gradient(0deg, transparent 20%, #fff2 50%, transparent 81%);
}
#workwindowarea>.workwindow>.workwindowcontent>.linkarea>a{
    display: flex;
    width: calc((100% - 1.5%) / 2);
    height: 3em;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: linear-gradient(150deg, var(--violet), var(--blue));
    color: var(--white);
    border-radius: 0.5em;
    box-shadow: 0.2em 0.2em 0.5em #00000030;
    text-decoration: none;
    font-weight: 700;
}
#workwindowarea>.workwindow>.workwindowcontent>.linkarea>a:nth-child(2n){
    margin-left: 1.5%;
}
#workwindowarea>.workwindow>.workwindowcontent>.linkarea>a:nth-child(n+3){
    margin-top: 1.5%;
}
#workwindowarea>.workwindow>.workwindowcontent a>span{
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: auto;
    aspect-ratio: 3 / 4;
    font-size: 1.2em;
}
/* workwindowcontent ここまで */

#workwindowarea>.workwindow>.workbuttonline{
    width: 100%;
    height: 8%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#workwindowarea>.workwindow>.workbuttonline>button{
    width: calc((100% - (0.6em * 2)) / 3);
    height: 100%;
    font-size: 1em;
    font-weight: 700;
    border-radius: 1em;
    border-style: solid;
    border-width: 0.1em;
    background: transparent;
    transition: all 0.1s cubic-bezier(0.0, 0.0, 0.0, 1.0);
}
#workwindowarea>.workwindow>.workbuttonline>button>*{
    pointer-events: none;
}
#workwindowarea>.workwindow>.workbuttonline>button>span{
    font-size: 1.24em;
    width: auto;
    vertical-align: middle;
    position: relative;
    transform-style: preserve-3d;
    opacity: 0.6;
}
#workwindowarea>.workwindow>.workbuttonline>button:nth-child(2)>span{
    font-size: 1.2em;
    opacity: 0.4;
}

@media(max-aspect-ratio: 22.5 / 16){ /*縦長の場合*/
    #area.openwork>#wholephone #display{
        pointer-events: none;
        filter: blur(0.4rem) opacity(60%);
    }
    #area.openwork>#wholephone #copyright{
        filter: blur(0.4rem) opacity(60%);
    }
}

@media(min-aspect-ratio: 22.5 / 16){ /*横長の場合*/
    #area.openwork>#wholephone{
        left: auto;
        right: 77.5%;
    }
    #area.openwork>#workwindowarea{
        left: 25%;
        width: 150%;
    }
    #area.openwork>#workwindowarea>.workwindow{
        font-size: 1.1544134em !important
    }
}

/* 詞表示 */
#workwindowarea>.workwindow>.lyricwindow{
    position: absolute;
    width: 90%;
    height: 90%;
    box-shadow: 1rem 1rem 1rem var(--phoneshadow);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5%;
    font-size: 1em;
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 1;
}
#workwindowarea>.workwindow.lyricOn>*:not(.lyricwindow){
    pointer-events: none;
    filter: blur(0.4rem) opacity(60%);
}
#workwindowarea>.workwindow>.lyricwindow>.lyricwindowcontent{
    flex: 1;
    border-style: solid;
    border-width: 0.1em;
    padding: 6% 4%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    line-height: 1.3;
    background: linear-gradient(150deg, var(--lightblue), var(--lightviolet));
    color: var(--darkviolet1);
    text-shadow: 0.2em 0.2em 0.5em #00000030;
}
#workwindowarea>.workwindow>.lyricwindow>.closelyricbutton{
    width: 40%;
    height: 8%;
    font-size: 1em;
    font-weight: 700;
    border-radius: 1em;
    border-style: solid;
    border-width: 0.1em;
    background: transparent;
}

#workwindowarea>.workwindow.starting, #workwindowarea>.workwindow>.lyricwindow.starting{
    transform: translate(0%, 10%) rotate(0deg);
    opacity: 0;
}
#workwindowarea>.workwindow.leaving, #workwindowarea>.workwindow>.lyricwindow.leaving{
    transform: translate(-8%, -3%) rotate(-3deg);
    opacity: 0;
    pointer-events: none;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■  音楽部分  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

#music{
    display: none;
    position: absolute;
    background: var(--blue);
    width: 240%;
    height: auto;
    aspect-ratio: 1;
    left: calc(50% + 50dvw - 24rem);
    bottom: calc(50% + 50dvh - 24rem);
    transition: all 0.5s cubic-bezier(0.75, 0.0, 0.5, 1.0);
    border-width: 3rem;
    border-color: var(--lightmusic) var(--darkmusic) var(--darkmusic) var(--lightmusic);
    border-style: solid;
    border-radius: 1.5rem;
    -webkit-animation: cdcoming 0.6s 2.1s ease forwards;
    animation: cdcoming 0.6s 2.1s ease forwards;
    opacity: 0;
}
@keyframes cdcoming{
    0%{ opacity: 0; }
    100%{ opacity: 1; }
}
@-webkit-keyframes cdcoming{
    0%{ opacity: 0; }
    100%{ opacity: 1; }
}

#slidecdswitch{
    position: absolute;
    width: 7%;
    height: 7%;
    left: 1.5%;
    bottom: 1.5%;
    background: var(--white);
    border-radius: 20%;
    color: var(--blue);
    font-size: 12rem;
}

.disks{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    aspect-ratio: 1;
    border-radius: 200rem;
}
#disk0{
    width: 95%;
    background: linear-gradient(150deg, var(--white), var(--lightblue));
}
#disk1{
    width: 20%;
    background: var(--blue);
}