/*index.html専用CSS*/
:root{
    /*--hero-color: #C82121;*/
    --hero-color: red;
    --miku16th-color: #39c5bb;
    --fulukalor-ink-color: #ff7bac;
}

/*リンクに彩りを*/
/*HERO!*/
a.hero:hover{
    color: var(--hero-color);
}
/*未来永劫級のパートナー*/
a.miku16th:hover{
    color: var(--miku16th-color);
}
/*ルカさん*/
a.fulukalorink:hover{
    /*color: pink;*/
    color: var(--fulukalor-ink-color);
}


/*通常は表示しないコンテンツ*/
.noDisplay{
    display: none;
}


/*一番上のコンテンツ*/
div.imgBox.headPrf{
    position: relative;
    padding: 162px 0;
}
img.headPrf{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    object-fit: cover;
    width: calc(100% - 24px);
    height: 360px;
    min-height: 360px;
    border-radius: 12px;
    box-shadow: rgba(239, 250, 255, .78) 0px 3px 18px;
}
div.contentBox.headPrf{
    padding-top: 24px;
}
.headPrf table{
    width: 100%;
}
div#userNameBox{
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    background: var(--twitter-color);
    box-shadow: rgba(239, 250, 255, .78) 0px 3px 18px;
    max-width: calc(100% - 48px);
    padding: .75em;
    border-radius: .5em;
}
p#userNameText{
    margin: 0;
}


/*フライトナンバーを入力*/
div.namecard{
    position: relative;
    width: 275px;
    margin: 12px auto;
}
div.namecard > input{
    display: block;
    position: absolute;
    top: 290px;
    left: 20px;
    font-size: 20px;
    color: var(--text-color);
    width: 100px;
    padding: 4px 8px;
    border: none;
    border-radius: 3px;
    box-shadow: #707070 0px 0px 6px 1px;
    transition: box-shadow .39s;
}
div.namecard > input::placeholder{
    color: #aaa;
}
div.namecard > input:focus{
    outline: 0;
    box-shadow: var(--contentbox-grow-color) 0px 0px 6px 1px;
}
/*搭乗口*/
div.namecard > div#boardingButton{
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
    width: 275px;
    height: 60px;
    line-height: 60px;
    transition: box-shadow .39s, background .39s;
}
div.namecard > div#boardingButton:hover{
    box-shadow: var(--contentbox-grow-color) 0px 0px 6px 1px;
    background: rgb(239, 250, 255);
}
div#boardingButton > p{
    font-size: 24px;
    text-align: center;
    line-height: 60px;
    margin: 0;
}


/*レスポンシブ*/

/*幅768px以上*/
@media screen and (min-width: 768px) {
    div.imgBox.headPrf{
        padding: 24px 0;
    }
    img.headPrf{
        right: 0;
        top: 0;
        width: calc(100% - 512px);
        height: 640px;
        max-height: 65vw;
        border-radius: 0;
        border-bottom-left-radius: 24px;
    }
    div.contentBox.headPrf{
        padding-top: 0;
    }
    .headPrf table{
        width: 464px;
    }
}

/*幅1024px以上*/
@media screen and (min-width: 1024px) {
    img.headPrf{
        width: 50%;
    }
    .headPrf table{
        width: calc(50% - 12px);
    }
}

/*幅1600px以上*/
@media screen and (min-width: 1600px) {
    img.headPrf{
        width: 768px;
        height: auto;
        left: 50vw;
        top: 24px;
        border-radius: 24px;
    }
}