html{
    scroll-behavior: smooth;
}
h1, h2, h3, h4, p, a, ul, li, table, tr, th, td, dl, dt, dd, p{
    margin: 0;
    padding: 0;
    color: #000000;
    text-decoration: none;
    list-style: none;
}
em{
    font-style: normal;
}
img{
    width: 100%;
    display: block;
    transition: 1s;
}
a:hover,
a:active{
    opacity: 70%;
}
.pc_photo{
    display: block;
}
.sp_photo{
    display: none;
}
.hidden{
    opacity: 0;
}
body{
    margin:0;
    font-family: 'Noto Sans JP', sans-serif;
}
header,
main,
footer{
    width: 100%;
    background-color:#EEF0F1;
    overflow: hidden;
}
footer{
    position: relative;
    z-index: 3;
}
#content_name{
    position: fixed;
    z-index: 40;
    background-color:#EEF0F1;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}
.slidetext{
    display: flex;
    align-items: center;
    margin-right: 15px;
    width: fit-content;
    animation: slide-animation1 15s infinite linear;
    }

@keyframes slide-animation1 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-104%);
    }
    }
#content_name h2{
    font-family:  Neue Haas Grotesk Display Pro;
    padding: 9px 16px 9px;
    font-size: 0.75rem;
    line-height: 0.875rem;
    font-weight: 200;
    color: #E4592E;
    border-radius: 30px;
    border: 1px solid #E4592E;
}
#content_name p{
    font-family:  Neue Haas Grotesk Display Pro;
    font-size: 0.8125rem;
    line-height: 15px;
    font-weight: 900;
    color: #0082B2;
    margin-left: 12px;
}
.fv_content{
    margin-top: 53px;
    width: 100%;
    overflow:hidden;
}
.fv_content_inner{
    height: 58.2vw;
    max-height: calc(100vh - 53px);
    position: fixed;
    width: 100%;
}
.fv_content .fv_photo{
    width: 100%;
    position: absolute;
    height: 100%;
    transition: 1s;
    overflow: hidden;
}
.fv_content .fv_photo .slide_photo{
    position: absolute;
    height: 100%;
    width: 100%;
    transition: 1s;
    overflow: hidden;
}
.fv_content .fv_photo .slide_photo{
    transform: translateY(-100%);
}
.fv_content .fv_photo .slide_photo:nth-of-type(1){
    transform: translateY(0%);
    z-index: 1;
}
.fv_content .fv_photo .slide_photo img{
    object-fit: cover;
    object-position: center -4vw;
}
.fv_inner{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    padding: 3.1vw;
    z-index: 10;
    box-sizing: border-box;
}
.fv_title{
    display: flex;
    justify-content: space-between;
}
.fv_title h1{
    width: 25.6vw;
}
.fv_title .key_form{
    width: 20vw;
}
.fv_button{
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
}
.fv_prev_next{
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.33);
    border-radius: 50%;
    position: relative;
    height: 7.8125vw;
    width: 7.8125vw;
}
.fv_prev_next .prev,
.fv_prev_next .next{
    position: absolute;
    border: none;
    background: none;
    height: 100%;
    width: 50%;
}
.fv_prev_next .prev{
    left:0;
}
.fv_prev_next .next{
    right:0;
}
.fv_prev_next .prev::after,
.fv_prev_next .next::after{
    content: '';
    position: absolute;
    background: none;
    cursor: pointer;
    border-top: 2px solid #fff;
    height: 16%;
    width: 32%;
    top: 40%;
}
.fv_prev_next .prev::after{
    border-left: 2px solid #fff;
    rotate: -45deg;
    left: 65%;
}
.fv_prev_next .next::after{
    border-right: 2px solid #fff;
    rotate: 45deg;
    right: 65%;
}
.fv_prev_next .prev:hover,
.fv_prev_next .next:hover{
    opacity: 70%;
}
.fv_prev_next .prev:active,
.fv_prev_next .next:active{
    animation: active-button 1s forwards;
}
@keyframes active-button{
    0%{ opacity: 70%;}
    50%{ opacity: 0%;}
    100%{ opacity: 100%;}
}
#orange_circle{
    position: absolute;
    left: -2.8%;
    bottom: -2.8%;
    width: 106%;
    height: 105%;
    fill: transparent;
    transform: rotate(-90deg);
    stroke-width: 3.6px;
}
.orange_circle{
    animation: circle 5s infinite;
}
@keyframes circle {
    0% {stroke: transparent; stroke-dasharray: 0 366;}
    99% {stroke: #E4592E; stroke-dasharray: 345 345;}
    100% {stroke: #E4592E; stroke-dasharray: 345 345;}
}
.previous{
    z-index: 2;
}
.active{
    z-index: 5;
}
.nextactive{
    z-index: 6;
}
.fv_button .scroll{
    width:61px;
    height:61px;
    position: relative;
    float: right;
    right: -10px;
    bottom: -10px;
    z-index: 15;
    background-image: url(../img/scroll_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.fv_button .scroll .finger{
    padding: 8px 22px 23px;
}
.fv_button .scroll img{
    width: 17px;
    height: 27px;
    position: relative;
    left: 1px;
    transition: 0.3s;
    animation: bounce 2.2s infinite alternate;
}
@keyframes bounce {
    0% {
        top: 18px;
    }
    50% {
        top: 23px;
    }
    100% {
        top: 18px;
    }
    }
.main_container{
    margin-top: calc(58.2vw + 53px);
    position: relative;
    z-index: 2;
    background-color:#EEF0F1;
}
.top_title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 9.1vw;
}
.top_title p{
    text-align: center;
    padding-top: 7.5vw;
    padding-bottom: 4.9vw;
    line-height: 2.2rem;
    font-weight: 500;
    color: #0182B2;
}
.top_title .top_title_key{
    display:flex;
    margin:1.9vw auto 0;
    height: 22.6vw;
    max-height: 247px;
}
.top_title .top_title_key .fade_image{
    opacity: 0;
    transition: 3s;
    height: 100%;
}
.top_title .top_title_key .fade_image img{
    height: 100%;
    width: auto;
}
.top_title .top_title_key .fade_image.key_shake{
    animation: key-shake 2.5s forwards;
}
@keyframes key-shake {
    0%{rotate: 0;}
    25%{rotate: 4deg;}
    50%{rotate: -3deg;}
    75%{rotate: 2deg;}
    100%{rotate: 0deg;}
}
.main_content_item .content_photo{
    overflow: hidden;
    position:relative;
    transition: 1s;
}
.main_content_item .content_photo::before{
    content: '';
    position: absolute;
    top: 0;
    z-index: 1;
    width: 200%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: -100%;
    animation: fade-in-bg-left 0.8s linear forwards;
}
@keyframes fade-in-bg-left {
    0% {
        left: -100%;
    }
    50%{
        left: 0%;
    }
    75%{
        left: 10%;
    }
    95%{
        left: 95%;
    }
    100% {
        left: 100%;
    }
}
#orange .content_photo::before{
    background-image:linear-gradient(to right, #E4592E 50%, #EEF0F1 50%);
}
#yellow .content_photo::before{
    background-image:linear-gradient(to right, #FAE435 50%, #EEF0F1 50%);
}
#green .content_photo::before{
    background-image:linear-gradient(to right, #44A69C 50%, #EEF0F1 50%);
}
#blue .content_photo::before{
    background-image:linear-gradient(to right, #0082B2 50%, #EEF0F1 50%);
}
#black .content_photo::before{
    background-image:linear-gradient(to right, #C1D3E9 50%, #EEF0F1 50%);
}
#pink .content_photo::before{
    background-image:linear-gradient(to right, #E7355C 50%, #EEF0F1 50%);
}

.main_content_item .content_photo img{
    max-height: 800px;
    object-fit: cover;
}
@media (max-width: 1280px){
    .main_content_item .content_photo img{
        max-height: 600px;
    }
}
#yellow .content_photo img{
    object-position: center -86px;
}
#green .content_photo img{
    object-position: center center;
}
#blue .content_photo img{
    object-position: bottom;
}
#black .content_photo img{
    object-position: center -187px;
}
#pink .content_photo img{
    object-position: center bottom;
}
@media (max-width: 1180px){
    #yellow .content_photo img{
        object-position: center center;
    }
    #black .content_photo img{
        object-position: center center;
    }
}
@media (min-width: 1180px){
    #black .content_photo img{
        object-position: center bottom;
    }
}
.main_content_item .key_containter .key_inner{
    margin: 0 auto;
    max-width: 1280px;
    position: relative;
}
.main_content_item .content_title{
    position: absolute;
    z-index: 10;
}
.main_content_item .content_label{
    width: 17.3vw;
    height: 17.3vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    margin-top:  -17.9vw;
    opacity: 0;
    animation: label-fade-in 2s ease-in-out 0.5s forwards;
}
@keyframes label-fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
#yellow .content_label,
#blue .content_label,
#pink .content_label{
    right: 0;
    padding-right: 5vw;
    position: absolute;
}
#orange .content_label .label_bg{
    background-image: url(../img/01_bg.png);
}
#yellow .content_label .label_bg{
    background-image: url(../img/02_bg.png);
}
#green .content_label .label_bg{
    background-image: url(../img/03_bg.png);
}
#blue .content_label .label_bg{
    background-image: url(../img/04_bg.png);
}
#black .content_label .label_bg{
    background-image: url(../img/05_bg.png);
}
#pink .content_label .label_bg{
    background-image: url(../img/06_bg.png);
}
.main_content_item .content_label .label_bg{
    width: 100%;
    height: 100%;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    animation: spin 20s infinite linear;
}
@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.main_content_item .content_label .label_number{
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 7.8vw;
    z-index: 2;
}
#orange .content_label .label_number{
    width: 6.1vw;
}
.content_title .slogan{
    margin-top: 3vw;
}
.main_content_item .slogan p{
    padding-left: 4px;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 1.5rem;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: slogan-fade-in 1.5s linear forwards;
}
@keyframes slogan-fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.main_content_item .slogan p::before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0%;
    height: 100%;
    background-repeat: no-repeat;
    animation: slogan-bg-fade-in 1.2s ease-in-out 0.8s forwards;
}
@keyframes slogan-bg-fade-in {
    0%{
        width: 0%;
    }
    75%{
        width: 10%;
    }
    100%{
        width: 103%;
    }
}
#orange .slogan p::before{
    background-color: #E4592E;
}
#orange .key_containter::before{
    background-color: #E4592E;
}
#yellow .slogan p::before{
    background-color: #FAE435;
}
#yellow .key_containter::before{
    background-color: #FAE435;
}
#green .slogan p::before{
    background-color: #44A69C;
}
#green .key_containter::before{
    background-color: #44A69C;
}
#blue .slogan p::before{
    background-color: #0082B2;
}
#blue .key_containter::before{
    background-color: #0082B2;
}
#black .slogan p::before{
    background-color: #C1D3E9;
}
#black .key_containter::before{
    background-color: #C1D3E9;
}
#pink .slogan p::before{
    background-color: #E7355C;
}
#pink .key_containter::before{
    background-color: #E7355C;
}
.main_content_item .from_album{
    position: relative;
    margin-top: 0.5vw;
}
.main_content_item .from_album p{
    font-size: 0.75rem;
    padding-left: 12px;
    font-family: sans-serif;
    animation: slogan-fade-in 5s linear forwards;
}
.main_content_item .from_album::before{
    content: "";
	display: block;
	background-image: url(../img/bar.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	position: absolute;
    height: 1px;
    width: 12px;
    top: 8px;
}
#yellow .from_album p,
#green .from_album p,
#blue .from_album p,
#black .from_album p{
    padding-left: 22px;
}
#yellow .from_album em,
#green .from_album em,
#blue .from_album em,
{
    font-family: 'Noto Sans JP';
    font-style: normal;
}
.main_content_item .key_containter{
    transition: 1s;
    padding-top: 5.6vw;
    padding-bottom: 13.9vw;
    position:relative;
}
.main_content_item .key_containter:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    height: 100%;
    transition: 2s;
    background-repeat: no-repeat;
    animation: fade-in-container 1s linear forwards;
}
@keyframes fade-in-container {
    0% {
        height: 0%;  
    }
    100% {
        height: 100%;
    }
}
.main_content_item .content_bg{
    position: relative;
    display: flex;
}
.main_content_item .content_bg .key_holder_photo{
    position: absolute;
}
.main_content_item .content_bg .key_holder_photo img{
    transform: translateY(5%);
    animation: slogan-fade-in 2.5s linear forwards;
    animation: photo-fade-in 1.5s linear 2s forwards;
}
@keyframes photo-fade-in {
    0%{
        transform: translateY(5%);
    }
    100%{
        transform: translateY(0);
    }
}
.main_content_item .content_bg .bg_photos .inner_item img{
    animation: inner-photo 2s ease-in-out forwards;
}
@keyframes inner-photo {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 100%;
    }
}
.main_content_item .content_bg .bg_photos .inner_item{
    transition: 0.2s;
}
#orange .bg_photos,
#green .bg_photos,
#black .bg_photos{
    margin-left: auto;
}
#yellow .bg_photos,
#blue .bg_photos,
#pink .bg_photos{
    margin-right: auto;
}
#orange .content_bg .key_holder_photo{
    width: 21.1vw;
    max-width: 270px;
    margin: 9.1vw 7.4%;
}
#orange .bg_photos .bg_inner.inner01{
    display: flex;
    margin-right:-120px;
}
#orange .bg_photos .bg_inner.inner01 .inner_item{
    margin-right: 9px;
    width: 16.95vw;
    max-width: 217px;
}
#orange .bg_photos .bg_inner.inner02{
    margin-top: 10px;
}
#orange .bg_photos .bg_inner.inner02 .inner_item.item01{
    width: 39vw;
    max-width: 500px;
    margin-right: 0;
    margin-left: auto;
}
#orange .bg_photos .bg_inner.inner02 .inner_item.item02{
    width: 46.875vw;
    max-width: 600px;
    margin-top: -26.79%;
}
#orange .bg_photos .bg_inner.inner02 .inner_item.item03{
    width: 23.43vw;
    max-width: 300px;
    margin: -12.76% 1.5625vw 0 auto;
}
#yellow .content_bg .key_holder_photo{
    right: 0;
    width: 36.4vw;
    max-width: 466px;
    margin: 16.3vw 1.4%;
    z-index: 10;
}
#yellow .bg_photos .bg_inner .inner_item.item01{
    width: 61vw;
    max-width: 780px;
}
#yellow .bg_photos .bg_inner.inner02{
    margin-top: 3.75vw;
    margin-left: -9.76vw;
    width: 72.5vw;
    max-width: 950px;
    display: flex;
    rotate: 4deg;
    flex-wrap: wrap;
}
#yellow .bg_photos .bg_inner.inner02 .inner_item{
    width: 23.4375vw;
    max-width: 300px;
    margin: 0.36vw;
}
#green .content_bg .key_holder_photo{
    width: 23.83vw;
    max-width: 306px;
    margin: 12.9vw 6.6%;
    z-index: 10;
}
#green .bg_photos{
    margin: -5px -18.5% -5px auto;
    display: flex;
    justify-content: flex-end;
}
#green .bg_photos .bg_inner .inner_item{
    padding: 5px;
}
#green .bg_photos .bg_inner.inner02 div{
    display: flex;
}
#green .bg_photos .bg_inner .inner_item.item01{
    width: 35.9375vw;
    max-width: 460px;
}
#green .bg_photos .bg_inner .inner_item.item02{
    width: 21.875vw;
    max-width: 280px;
    margin: 0 0 0 auto;
}
#green .bg_photos .bg_inner .inner_item.item03,
#green .bg_photos .bg_inner .inner_item.item04{
    width: 21.875vw;
    max-width: 280px;
}
#green .bg_photos .bg_inner .inner_item.item05{
    width: 44.53125vw;
    max-width: 570px;
}
#blue .content_bg .key_holder_photo{
    right: 0;
    width: 34.92vw;
    max-width: 448px;
    margin: 16.6vw 2.2%;
    z-index: 10;
}
#blue .bg_photos{
    margin: -5px;
}
#blue .bg_photos .bg_inner{
    display:flex;
}
#blue .bg_photos .bg_inner .inner_item{
    padding: 5px;
}
#blue .bg_photos .bg_inner .inner_item.item01{
    width: 29.3vw;
    max-width: 375px;
}
#blue .bg_photos .bg_inner .inner_item.item02{
    width: 30.86vw;
    max-width: 395px;
}
#blue .bg_photos .bg_inner .inner_item.item03,
#blue .bg_photos .bg_inner .inner_item.item04,
#blue .bg_photos .bg_inner .inner_item.item05{
    width: 17.89vw;
    max-width: 229px;
}
#blue .bg_photos .bg_inner .inner_item.item06{
    width: 42.27vw;
    max-width: 541px;
}
#black .content_bg .key_holder_photo{
    width: 23.59vw;
    max-width: 303px;
    margin: 19.4vw 7.2%;
}
#black .bg_photos .bg_inner .inner_item.item01{
    width: 50vw;
    max-width: 640px;
    margin-left: 16%;
}
#black .bg_photos .bg_inner .inner_item.item02{
    width: 21.17vw;
    max-width: 271px;
    margin-top: -26.45%;
}
#black .bg_photos .bg_inner .inner_item.item03{
    width: 38.28vw;
    max-width: 490px;
    margin: -8.13% -15% 0 auto;
}
#pink .content_bg .key_holder_photo{
    right: 0;
    width: 25.17vw;
    max-width: 322px;
    margin: 7.2vw 8%;
}
#pink .bg_photos{
    margin: -5px -5px -5px -23%;
}
#pink .bg_photos .bg_inner{
    display: flex;
    justify-content: flex-end;
}
#pink .bg_photos .inner_item{
    padding: 5px;
}
#pink .bg_photos .bg_inner.inner01 .inner_item{
    width: 27.34vw;
    max-width: 350px;
}
#pink .bg_photos .bg_inner .inner_item.item02{
    margin-top: 4.6875vw;
}
#pink .bg_photos .bg_inner .inner_item.item03{
    margin-top: 9.375vw;
}
#pink .bg_photos .bg_inner .inner_item.item04{
    width: 21.875vw;
    max-width: 280px;
    margin-top: -3.2%;
    margin-right: -3.78%;
}
#pink .bg_photos .bg_inner .inner_item.item05{
    margin-top: 4.297vw;
    width: 41.41vw;
    max-width: 530px;
}
#blue .bg_photos .bg_inner. .inner_item.item01,
#blue .bg_photos .bg_inner .inner_item.item02
#orange .key_containter::before,
#green .key_containter::before,
#black .key_containter::before{
    left: 0;
}
#yellow .key_containter::before,
#blue .key_containter::before,
#pink .key_containter::before{
    right: 0;
}
#yellow .key_containter .content_title,
#blue .key_containter .content_title,
#pink .key_containter .content_title{
    right: 0;
}
#yellow .key_containter .content_title{
    padding-right: 4.4%;
}
#blue .key_containter .content_title{
    padding-right: 19.15%;
}
@media (max-width: 1180px){
    #blue .key_containter .content_title{
        padding-right: 12.15%;
    }
}
#pink .key_containter .content_title{
    padding-right: 23.15%;
}
#pink .key_containter{
    padding-bottom: 14vw;
}
#orange .content_title,
#green .content_title,
#black .content_title{
    padding-left: 4.7vw;
}
/* footer */
#tsutaya_opening{
    opacity: 0;
    transition: 2s;
}
.tsutaya_opening .poster{
    display:flex;
}
.poster .poster_inner{
    display: flex;
    width: 50%;
    text-align: center;
    flex-direction: column;
    align-items: center;
    background-color: #FFF;
}
.poster .poster_inner img{
    height: 100%;
}
.poster .poster_inner h3{
    padding-top: calc(40% - 125px);
    font-size: 1.25rem;
    font-weight: 400;
    color: #C1D3E9;
    text-decoration: line-through;
}
.poster .poster_inner h4{
    margin-top: 1.5vw
}
.poster .poster_inner h4 span{
    position:relative;
    color: #E4592E;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 500;
    z-index: 2;
}
.poster .poster_inner h4 span::after{
    content: '';
    position: absolute;
    display: block;
    background: linear-gradient(to left, #FAE432, #FAE432);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 100% 100%;
    height: 90%;
    width: 100%;
    z-index: -1;
    top: 6%;
    left: -2%;
}
@media (max-width: 1080px){
    .poster .poster_inner h3{
        padding-top: calc(33% - 125px);
    }
    .poster .poster_inner h4 br{
        display: block;
    }
    .poster .poster_inner h4 span{
        line-height: normal;
    }
}
.poster .poster_inner h3 .day{
    font-weight: 600;
}
.poster .poster_inner em{
    font-style: normal;
}
.poster .poster_inner .tsutaya{
    font-weight: 600;
}
.poster .poster_inner p{
    padding-top: 1.5vw;
    font-size: 0.875rem;
    font-weight: 600;
    color: #44A69C;
}
.poster .poster_inner .tax{
    font-size: 0.75rem;
    font-weight: 500;
}
.gacha{
    display: flex;
    height: 17.3vw;
}
.gacha img{
    height: 100%;
    width: auto;
    object-fit: cover;
    animation: slide-animation2 18s infinite linear;
    }
@keyframes slide-animation2 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-700%);
    }
    }
.official{
    display:flex;
}
.official .official_inner{
    width: 50%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    height:19.56vw;
}
.official .official_inner a{
    font-weight: 500;
    position: relative;
    font-size: 1.25rem;
    width: 100%
}
.official .official_inner a::before,
.official .official_inner a::after{
    content: '';
    align-items: center;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.official .official_inner a::before{
    width: 3.28125vw;
    height: 3.28125vw;
    right: 4.7%;
    top: 17%;
}
.official .official_inner a::after{
    width: 2.1vw;
    height: 3.125vw;
    right: 6%;
    transition: 0.3s;
    top: 20%;
}
.official .official_inner.orange a::before{
    background-image: url(../img/orange_finger_bg.png);
}
.official .official_inner.orange a::after{
    background-image: url(../img/orange_finger.png);
}
.official .official_inner.yellow a::before{
    background-image: url(../img/yellow_finger_bg.png);
}
.official .official_inner.yellow a::after{
    background-image: url(../img/yellow_finger.png);
}
.official .official_inner a:hover::after{
    right: 5.2%;
}
.official .official_inner.orange{
    background-color:#E4592E;
}
.official .official_inner.orange a{
    color:#C1D3E9;
}
.official .official_inner.yellow a{
    color:#44A69C;
}
.official .official_inner.yellow{
    background-color: #FAE435;
}


.footer_inner{
    display:flex;
    padding:3.2vw 4.7vw;
    justify-content: space-between;
    align-items: flex-start;
}
.photo_member p{
    font-size: 0.75rem;
    font-family: Neue Haas Grotesk Display Pro;
    letter-spacing: 1.2px;
    line-height: 1.25rem;
}
.qando_contact .contact{
    margin-right: 4.1vw;
}
.qando_contact .contact h3,
.qando_contact .contact p{
    font-size: 0.625rem;
    letter-spacing: 0.25px;
    line-height: 1.16rem;
}
.qando_contact{
    display:flex;
}
.footer_photo{
    width: 21.9vw;
}
@media (max-width:768px){
    /* .main_content_item .key_containter .key_inner{
        max-width: 375px;
    } */
    .pc_photo{
        display: none;
    }
    #content_name{
        padding: 12px 0;
    }
    .sp_photo{
        display: block;
    }
    .fv_title{
        flex-direction: column;
    }
    .fv_title h1{
        width: 100%;
        /* width: 327px; */
        margin: 0 auto;
    }
    .fv_title .key_form{
        width: 186px;
        rotate: 90deg;
        margin: 111px -83px 0 auto;
    }
    .fv_content{
        margin-top: 58px;
        /* height: 594px; */
    }
    .fv_content_inner{
        height: 157.9vw;
        max-height: calc(90vh - 53px);
    }
    .fv_content .fv_photo{
        margin-top: 42.9vw;
        height: calc(100% - 42.9vw);
        position: absolute;
        /* height: 115vw; /* 430px */
        /* margin-top: 42.9vw; 164px */
    }
    .fv_content .fv_photo .slide_photo img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .fv_inner{
        padding: 10px 22px 18px;
    }
    .fv_prev_next{
        height: 16vw;
        width: 16vw;
    }
    #orange_circle{
        left: -3%;
        bottom: -4%;
        width: 108%;
        height: 108%;
    }
    .fv_button .scroll{
        bottom: 0;
    }
    .main_container{
        margin-top: 157.9vw;
        /* margin-top: 652px; */
    }
    .top_title{
        margin-bottom: 43px;
    }
    .top_title p{
        padding-top: 72px;
        padding-bottom: 60px;
        font-size: 0.8125rem;
        line-height: 1.625rem;
    }
    .top_title .top_title_key{
        height:105px;
    }
    .main_content_item .content_photo{
        height: 400px;
    }
    .main_content_item .content_photo img{
        height: 100%;
        max-height: 400px;
        width: 150%;
        object-fit: cover;
    }
    #orange .content_photo img,
    #yellow .content_photo img,
    #black .content_photo img{
        object-position: -100px center;
    }
    #yellow .content_photo img{
        object-position: -70px center;
    }
    #blue .content_photo img{
        object-position: -100px bottom;
    }
    #pink .content_photo img{
        object-position: -150px bottom;
    }
    .main_content_item .key_containter:before{
        width: 6px;
    }
    #yellow .key_containter .content_title, #blue .key_containter .content_title, #pink .key_containter .content_title{
        padding-left: 20px;
        left: 0;
    }
    .main_content_item .content_label{
        width: 117px;
        height: 117px;
        margin-top: -133px;
    }
    .main_content_item .content_label .label_number{
        width: 64px;
    }
    #orange .content_label .label_number{
        width: 52px;
    }
    #yellow .content_label,
    #blue .content_label,
    #pink .content_label{
        left: 20px;
    }
    .main_content_item .key_containter{
        padding-top: 44px;
        padding-bottom: 90px;
    }
    .main_content_item .slogan p{
        font-size: 0.8125rem;
        line-height: 1.2rem;
        margin-bottom: 4px;
    }
    .main_content_item .from_album p{
        font-size: 0.625rem;
        margin-top: 6px;
        padding-left: 13px;
    }
    #green .from_album em,
    #black .from_album em{
        font-size: 0.625rem;
    }
    .main_content_item .content_bg{
        flex-direction: column;
    }
    .main_content_item .content_bg .key_holder_photo{
        position: relative;
    }
    #orange .content_bg .key_holder_photo{
        width: 72vw;
        margin: 78px auto 42px;
    }
    #orange .bg_photos, #green .bg_photos, #black .bg_photos{
        margin-left: 5.33vw;
    }
    #orange .bg_photos .bg_inner.inner01 .inner_item{
        width: 25.6vw;
        margin-right: 1.067vw;
    }
    #orange .bg_photos .bg_inner.inner02{
        margin-top: 30px;
    }
    #orange .bg_photos .bg_inner.inner02 .inner_item.item01{
        width: 65.87vw;
    }
    #orange .bg_photos .bg_inner.inner02 .inner_item.item02{
        width: 71vw;
        margin-top: -127.5px;
    }
    #orange .bg_photos .bg_inner.inner02 .inner_item.item03{
        width: 59.4vw;
        margin-top: -11.5px;
        margin-right: 0px;
    }
    #yellow .content_bg .key_holder_photo{
        width: 89.33vw;
        margin: 140px auto 4.5px;
    }
    #yellow .bg_photos .bg_inner .inner_item.item01{
        width: 94.67vw;
        height: 53.33vw;
        padding-right: 20px;
    }
    #yellow .bg_photos .bg_inner .inner_item.item01 img{
        height: 100%;
        object-fit: cover;
    }
    #yellow .bg_photos .bg_inner.inner02{
        width: 118.67vw;
        margin: 50px 0 8px -10.13vw;
    }
    #yellow .bg_photos .bg_inner.inner02 .inner_item{
        width: 33.76vw;
    }
    #green .content_bg .key_holder_photo{
        width: 75.47vw;
        margin: 84px auto 68px;
    }
    #green .bg_photos{
        margin: 0 -13vw 0 0;
    }
    #green .bg_photos .bg_inner .inner_item.item01{
        width: 35.07vw;
    }
    #green .bg_photos .bg_inner .inner_item.item02,
    #green .bg_photos .bg_inner .inner_item.item03,
    #green .bg_photos .bg_inner .inner_item.item04{
        width: 32.27vw;
    }
    #green .bg_photos .bg_inner .inner_item.item05{
        width: 65.6vw;
    }
    #blue .content_bg .key_holder_photo{
        width: 95.33vw;
        margin: 146px auto 82px;
    }
    #blue .bg_photos{
        margin: -2px;
    }
    #blue .bg_photos .bg_inner .inner_item{
        padding: 0.533vw;
    }
    #blue .bg_photos .bg_inner .inner_item.item01{
        width: 45.6vw;
    }
    #blue .bg_photos .bg_inner .inner_item.item02{
        width: 48vw;
    }
    #blue .bg_photos .bg_inner.inner02{
        flex-direction: column;
    }
    #blue .bg_photos .bg_inner .bg_inner_inner{
        display: flex;
        margin-left: -1px;
    }
    #blue .bg_photos .bg_inner .inner_item.item03, #blue .bg_photos .bg_inner .inner_item.item04, #blue .bg_photos .bg_inner .inner_item.item05{
        width: 30.93vw;
    }
    #blue .bg_photos .bg_inner .inner_item.item06{
        width: 94.67vw;
        max-width: none;
    }
    #black .content_bg .key_holder_photo{
        width: 303px;
        margin: 172px auto 63px;
    }
    #black .bg_photos .bg_inner .inner_item.item01{
        width: 85vw;
        margin-left: auto;
    }
    #black .bg_photos .bg_inner .inner_item.item02{
        width: 44.8vw;
        margin-top: -43.5px;
    }
    #black .bg_photos .bg_inner .inner_item.item03{
        width: 79.73vw;
        margin: -53.5px 20px 0 auto;
    }
    #pink .content_bg .key_holder_photo{
        width: 89.33vw;
        max-width: none;
        margin: 45px auto 27px;
    }
    #pink .bg_photos{
        max-width: 131vw;
        margin: -0.533vw 4.8vw -0.533vw;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    #pink .bg_photos .inner_item{
        padding: 0.533vw;
    }
    #pink .bg_photos .bg_inner.inner01 .inner_item{
        width: 43.2vw;
    }
    #pink .bg_photos .bg_inner.inner02{
        margin-top: 21px;
    }
    #pink .bg_photos .bg_inner .inner_item.item02{
        margin-top: 27.5px;
    }
    #pink .bg_photos .bg_inner .inner_item.item03{
        margin-top: 55px;
    }
    #pink .bg_photos .bg_inner .inner_item.item04{
        width: 34.4vw;
        margin-top: -21.5px;
        margin-right: -12.5px;
    }
    #pink .bg_photos .bg_inner .inner_item.item05{
        width: 65vw;
    }
    #pink .key_containter{
        padding-bottom: 92px;
    }
    .tsutaya_opening .poster{
        flex-direction: column;
    }
    .poster .poster_inner{
        width: 100%;
    }
    .poster .poster_inner h3{
        padding-top: 21px;
        font-size: 1rem;
        line-height: 1.22rem;
    }
    .poster .poster_inner .day{
        font-size: 0.8rem;
    }
    .poster .poster_inner h4{
        margin-top: 9px;
    }
    .poster .poster_inner h4 span{
        font-size: 1.125rem;
        line-height: 2.1rem;
        margin-bottom: 6px;
    }
    .poster .poster_inner h4 span:last-child{
        line-height: 1.5rem;
    }
    .poster .poster_inner h4 span:nth-of-type(1)::after{
        left: -4%;
    }
    .poster .poster_inner h4 span:last-child::after{
        left: -1%;
    }
    .poster .poster_inner p{
        font-size: 1rem;
        font-weight: 500;
        padding-top: 11px;
        padding-bottom: 27px;
    }
    .poster .poster_inner p .tax{
        font-size:0.875rem;
    }
    .gacha{
        height: 179px;
    }
    .official{
        flex-direction: column;
    }
    .official .official_inner{
        width: 100%;
        height: 140px;
    }
    .official .official_inner a{
        font-size: 1.125rem;
    }
    .official .official_inner a::before{
        top: 25%;
        height: 42px;
        width: 42px;
        right: 20px;
    }
    .official .official_inner a::after{
        top: 34%;
        height: 27px;
        width: 27px;
        right: 27px;
    }
    .official .official_inner a:hover::after{
        right: 23px;
    }
    .official .official_inner.yellow a::before{
        top: 12.5%;
    }
    .official .official_inner.yellow a::after{
        top: 27%;
    }
    .footer_inner{
        flex-direction: column;
        padding: 36px 30px 30px 30px;
    }
    .photo_member{
        margin-bottom: 28px;
    }
    .qando_contact{
        width: 100%;
        flex-direction: column;
    }
    .qando_contact .contact h3, .qando_contact .contact p{
        line-height: 1.1rem;
    }
    .footer_photo{
        width: 280px;
        margin: 40px auto 0;
    }
}
/* @media (max-width: 499px){
    .fv_content .fv_photo .slide_photo.item1 img{
        object-position: -36vw center;
    }
    .fv_content .fv_photo .slide_photo.item2 img{
        object-position: -38vw center;
    }
    .fv_content .fv_photo .slide_photo.item3 img{
        object-position: -42vw center;
    }
    .fv_content .fv_photo .slide_photo.item4 img{
        object-position: -38vw center;
    }
    .fv_content .fv_photo .slide_photo.item5 img{
        object-position: -37vw center;
    }
    .fv_content .fv_photo .slide_photo.item6 img{
        object-position: -30vw center;
    }
} */
/* show content */
.main_content_item{
    transition: 1s;
    opacity: 0;
}
.content_photo,
.key_containter{
    display:none;
}
.content_show{
    display:block;
}