/*portfolio.html専用CSS*/
:root{
    --miku-color: #39c5bb;
    --fulukalor-ink-color: #ff7bac;
}


/*リンクに彩りを*/
/*FuLUKAlor ink.*/
a.fulukalorink{
    text-decoration-color: var(--fulukalor-ink-color);
}
a.fulukalorink:hover{
    color: var(--fulukalor-ink-color);
}
a.linkButton.fulukalorink{
    background: var(--fulukalor-ink-color);
}
/*るかるか*/
.fulukalorink h2 > span.maker{
    border-bottom-color: var(--fulukalor-ink-color);
}
.fulukalorink h3{
    border-left-color: var(--fulukalor-ink-color);
}


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


/*一番上のコンテンツ*/
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%;
}



/*レスポンシブ*/

/*幅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;
    }
}