/* 見出し */
#headline {
    position: absolute;
    width: 100%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 30rem;
    z-index: 3;
}

h1 {
    text-align: left;
    font-size: 20rem;
}

/* コンテンツタブ
------------------------------- */
#contentTab {
    display: flex;
    text-transform: uppercase;
    list-style: none;
    width: 100%;
    text-align: left;
    font-size: 4rem;
    line-height: 0.8;
}
#contentTab li {
    margin-left: 5%;
}
#contentTab a {
    text-decoration: none;
}
#contentTabGuide {
    position: relative;
    margin-top: 1rem;
}
#waveLineContentTab {
    position:absolute;
    width: 100%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 10px;
}
#contentTabMarker {
    position: absolute;
    left: 30rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #54cac0;
    visibility: visible;
}
#contentTabPageMarker {
    position: absolute;
    left: 30rem;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-width: 0.3rem;
    border-color: #54cac0;
    border-radius: 50%;
}

/* コンテンツ
------------------------------- */
/* マウスオーバー時の背景の流体シェイプ */
.mouseoverBG {
    visibility: visible;
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
}
.mouseoverBG-landscape {
    background-color: #54cac0;
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0);
    width: 50rem;
    height: 50rem;
    border-radius: 10% 10% 10% 10% / 17% 17% 17% 17%;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: landscapeFluidAnim;
}
.mouseoverBG-portrait {
    background-color: #54cac0;
    opacity: 0.5;
    width: 50rem;
    height: 50rem;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: portraitFluidAnim;
}

/* マウスオーバー時の流体用クラス */
.mouseoverTarget {
    cursor: pointer;
}

/* 案件 */
.project {
    margin-top: 10rem;
}
.project-description {
    font-size: 4rem;
}
.project-title {
    text-align: left;
    font-size: 5rem;
}
.project-descriptionDetail {
    text-align: left;
    font-size: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 5rem;
}
.project-link {
    display: block;
    text-decoration: none;
    font-size: 2rem;
    margin-top: 2rem;
}

.imageWrapper {
    overflow: hidden;
}

/* 代表作品 */
.project-main {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-top: 5rem;
}
.project-main .imageWrapper {
    display: block;
    position: relative;
}
.main-landscape img {
    width: 102rem;
}
.main-portrait img {
    height: 100rem;
}

/* サブ作品 */
.project-sub {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 2rem;
}
.project-sub-item {
    position: relative;
    width: 50rem;
    height: 24rem;
}
.project-sub-item .imageWrapper {
    display: block;
    position: relative;
    background-color: #eef4f4;
    width: 50rem;
    height: 24rem;
}

/* 横長画像 */
.landscape img {
    width: 50rem;
    height: 24rem;
    object-fit: cover;
}
@keyframes landscapeFluidAnim {
    0%, 100% {
        border-radius: 10% 10% 10% 10% / 16% 17% 17% 17%;
    }
    25% {
        border-radius: 11% 11% 11% 10% / 18% 20% 21% 21%;
    }
    50% {
        border-radius: 10% 10% 10% 10% / 16% 17% 17% 17%;
    }
    75% {
        border-radius: 15% 15% 15% 15% / 26% 26% 27% 28%;
    }
}

/* 縦長画像 */
.portrait {
    grid-row: span 2;
    width: 50rem;
    height: 50rem;
}
.portrait .imageWrapper {
    width: 50rem;
    height: 50rem;
}
.portrait img {
    width: 50rem;
    height: 50rem;
    object-fit: cover;
}
@keyframes portraitFluidAnim {
    0%, 100% {
        border-radius: 8% 8% 8% 8% / 8% 8% 8% 8%;
    }
    25% {
        border-radius: 12% 12% 14% 11% / 11% 11% 12% 13%;
    }
    50% {
        border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%;
    }
    75% {
        border-radius: 12% 12% 14% 11% / 11% 11% 12% 13%;
    }
}

/* lightboxとスライド
------------------------------- */
/* 画像 */
.slick-slide img {
    position:relative;
    top: -1vh;
}
/* 見出し */
.slick-lightbox-slick-caption {
    display: block;
    color: #54cac0;
    font-family: "M PLUS 1", serif;
    font-weight: 500;
    position: relative;
    top: -2vh;
    font-size: 16px;
}

/* 見出しのリンク */
.slick-lightbox-slick-caption a:hover {
    color:#d3dcdc;
}

/* 閉じるボタン */
.slick-lightbox-close {
    right: 5%;
}
.slick-lightbox-close:before {
    font-size:80px;
    color:#54cac0;
    opacity: 0.6;
}

/* ページ位置を表すドット */
.slick-dots
{
    bottom: 30px;
    position: relative;
}
.slick-dots li button:before  {
    color: #d3dcdc;
    opacity: 1;
}
.slick-dots li.slick-active button:before {
    color: #54cac0;
    opacity: 1;
}

/*矢印*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 45%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    width: 60px;
    height: 70px;
    z-index: 1;
    object-fit: contain;
}
.slick-prev:before, 
.slick-next:before {
    display: none;
}
.slick-lightbox .slick-prev {
    background-image: url("../images/prev.png");
    background-size: contain;
    left: 1%;
}
.slick-lightbox .slick-prev:hover {
    background-image: url("../images/prev.png");
    background-size: contain;
}
.slick-lightbox .slick-next {
    background-image: url("../images/next.png");
    background-size: contain;
    right: 1%;
}
.slick-lightbox .slick-next:hover {
    background-image: url("../images/next.png");
    background-size: contain;
}

/* lightboxのクリック対象 */
.slickLightbox {
    list-style: none;
}

/* タブレット用
------------------------------- */
@media screen and (max-width: 1100px) {    
    /* 見出しタイトル */
    #headline-title {
        top: 10rem;
    }
    .project-descriptionDetail {
        font-size: 2.5rem;
    }

    #waveLineContentTab {
        top: 8.5px;
    }
    #contentTabMarker {
        visibility: hidden;
    }
    #contentTabPageMarker {
        width: 17px;
        height: 17px;
    }

    .mouseoverBG {
        visibility: hidden;
    }

    /* lightboxとスライド
    ------------------------------- */
    /* 見出し */
    .slick-lightbox-slick-caption {
        font-size: 16px;
    }
    /* 閉じるボタン */
    .slick-lightbox-close:before {
        font-size: 55px;
    }
    /* ページ位置を表すドット */
    .slick-dots {
        bottom: 26px;
    }
    /*矢印*/
    .slick-prev, 
    .slick-next {
        width: 40px;
        height: 46px;
    }
}

/* スマホ用
------------------------------- */
@media screen and (max-width: 600px) {
    /* 見出しタイトル */
    #headline-title {
        top: 10rem;
    }

    /* コンテンツタブ
    ------------------------------- */
    #contentTab {
        font-size: 13px;
    }

    h1 {
        font-size: 24rem;
    }

    .project-title {
        font-size: 7rem;
    }

    #waveLineContentTab {
        top: 6.5px;
    }
    #contentTabMarker {
        visibility: hidden;
    }
    #contentTabPageMarker {
        width: 13px;
        height: 13px;
    }

    .project-description {
        font-size: 12px;
    }
    .project-descriptionDetail {
        font-size: 10px;
    }
    .project-link {
        font-size: 10px;
    }

    .mouseoverBG {
        visibility: hidden;
    }

    /* lightboxとスライド
    ------------------------------- */
    /* 見出し */
    .slick-lightbox-slick-caption {
        font-size: 10px;
    }
    /* 閉じるボタン */
    .slick-lightbox-close:before {
        font-size: 40px;
    }
    /* ページ位置を表すドット */
    .slick-dots {
        bottom: 26px;
    }
    /*矢印*/
    .slick-prev, 
    .slick-next {
        top: 45%;
        width: 20px;
        height: 23px;
    }
}