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

/* 見出し画像や流体シェイプ */
.headline-images {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 0;
}

/* 見出し流体シェイプ */
#headline-fluid0 {
    left: calc(50% - 500px);
    top: 5rem;
}
#headline-fluid0 svg {
    fill: #bce9e6;
    transform: translate(-50%, -50%) scale(0.7);
}

#headline-fluid1 {
    left: calc(50% + 300px);
    top: -22rem;
}
#headline-fluid1 svg {
    fill: #f6fbfb;
    transform: translate(-50%, -50%) scale(0.7);
}

#headline-fluid2 {
    left: calc(50% - 250px);
    top: 18rem;
}
#headline-fluid2 svg {
    fill: #e5f6f5;
    transform: translate(-50%, -50%) scale(0.5);
}

/* 見出し画像 */
#headline-image0 {
    left: 50%;
    top: -5rem;
}
#headline-image0 svg {
    transform: translate(-50%, -50%) scale(1.3);
}

#headline-image1 {
    left: calc(50% - 400px);
    top: -15rem;
}
#headline-image1 svg {
    transform: translate(-50%, -50%) scale(0.9);
}

#headline-image2 {
    left: calc(50% + 400px);
    top: 20px;
}
#headline-image2 svg {
    transform: translate(-50%, -50%) scale(0.9);
}

/* 見出しタイトル */
#headline-title {
    position: relative;
    top: 15rem;
    width: 75rem;
    z-index: 1;
}

#headline-title img {
    width: 100%;
    height: 100%;
}

/* 本文
------------------------------- */
/* 本文ポリシー */
#main-policy {
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 1rem;
    margin-top: 60rem; 
    position: relative;
    left: 3rem;
}

/* 本文ロゴ */
#main-logo {
    margin-top: 10rem;
    width: 30rem;
}
#main-logo img {
    width: 100%;
    height: 100%;
}

/* 本文説明 */
#main-description {
    margin-top: 2rem;
    margin-bottom: 2rem;
    white-space: nowrap;
    font-size: 2.5rem;
    text-align: center;
}

/* 本文とギャラリーの間の波線 */
#waveLineMain {
    width: 100%;
}

/* ギャラリー */
#main-gallery-title {
    font-size: 20rem;
    margin-top: 26rem;
}
.main-gallery-items {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    justify-content: center;
    margin-top: 100px;
}
.main-gallery-item {
    position: relative;
    width: 330px;
    height: 330px;
}
.main-gallery-item p {
    position: absolute;
    top: -30px;
    font-size: 40px;
    text-align: left;
    letter-spacing: 5px;
}

/* ギャラリー背景の流体シェイプ */
.galleryImageBG {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    z-index: -1;
}

.galleryImageBG svg {
    fill: #54cac0;
    opacity: 0.5;
    width: 330px;
    height: 330px;
    transform: translate(-50%, -50%) scale(0.5);
    transition: transform 0.5s ease;
    visibility: visible;
}

/* ギャラリー画像 */
.galleryImage {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
}
.galleryImage svg {
    width: 330px;
    height: 330px;
    transform: translate(-50%, -50%);
}

/* プロフィール */
#main-profile {
    margin-top: 25rem;
}
#main-profile-title {
    font-size: 20rem;
}

/* プロフィール画像 */
#profile-imageContainer {
    width: 600px;
    height: 600px;
}
#profile-image {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
}
#profile-image svg {
    transform: translate(-50%, -50%) scale(1.2);
}
#profile-name {
    position: relative;
    top: 480px;
    font-size: 10rem;
}

/* プロフィール詳細 */
#profile-detail {
    list-style: none;
    margin-top: 5rem;
}
.profile-detail-item {
    position: relative;
    margin-bottom: 6rem;
}
.profile-detail-item-fluid {
    position: absolute;
    left: 1rem;
    top: 3rem;
    width: 0;
    height: 0;
    z-index: -1;
}
.profile-detail-item-fluid svg {
    transform: translate(-50%, -50%) scale(0.2);
}
.profile-detail-item-title {
    position: relative;
    left: 1%;
    text-align: left;
    font-size: 2rem;
}
.profile-detail-item-content {
    position: relative;
    left: 3%;
    text-align: left;
    font-size: 1.5rem;
}
.profileDetailWaveLine {
    width: 100%;
}

/* SNSリンク */
#link {
    margin-top: 15rem;
}
#link-title {
    font-size: 7rem;
    margin-bottom: 5rem;
}
#linkContainer {
    display: flex;
    justify-content: center;
}
.link-item {
    margin: 0 5rem;
    text-decoration: none;
    font-size: 3rem;
}
.link-border {
    border: 0.1rem solid #54cac0;
}

/* タブレット用
------------------------------- */
@media screen and (max-width: 1100px) {
    /* 見出し流体シェイプ */
    #headline-fluid0 {
        left: calc(50% - 200px);
    }
    #headline-fluid0 svg {
        transform: translate(-50%, -50%) scale(0.3);
    }
    
    #headline-fluid1 {
        left: calc(50% + 150px);
    }
    #headline-fluid1 svg {
        transform: translate(-50%, -50%) scale(0.3);
    }
    
    #headline-fluid2 {
        left: calc(50% - 130px);
    }
    #headline-fluid2 svg {
        transform: translate(-50%, -50%) scale(0.2);
    }

    /* 本文説明 */
    #main-description {
    margin-top: 7rem;
    font-size: 3rem;

    }
    
    /* 見出し画像 */
    #headline-image0 {
        top: -5rem;
    }
    #headline-image0 svg {
        transform: translate(-50%, -50%) scale(0.6);
    }
    
    #headline-image1 {
        left :calc(50% - 170px);
        top: -15rem;
    }
    #headline-image1 svg {
        transform: translate(-50%, -50%) scale(0.4);
    }
    
    #headline-image2 {
        left :calc(50% + 170px);
        top: 2rem;
    }
    #headline-image2 svg {
        transform: translate(-50%, -50%) scale(0.4);
    }

    /* ギャラリー */
    .main-gallery-items {
        gap: 40px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        margin-top: 70px;
    }
    .main-gallery-item {
        width: 220px;
        height: 220px;
    }
    .main-gallery-item p {
        top: -20px;
        font-size: 27px;
        letter-spacing: 3px;
    }

    /* ギャラリー背景の流体シェイプ */
    .galleryImageBG svg {
        visibility: hidden;
    }

    /* ギャラリー画像 */
    .galleryImage svg {
        width: 220px;
        height: 220px;
    }

    /* プロフィール */
    #profile-name {
        top: 210px;
        font-size: 13rem;
    }
    #profile-imageContainer {
        width: 300px;
        height: 300px;
    }
    #profile-image svg {
        transform: translate(-50%, -50%) scale(0.6);
    }
    .profile-detail-item-fluid svg {
        transform: translate(-50%, -50%) scale(0.1);
    }
    .profile-detail-item-title {
        font-size: 20px;
    }
    .profile-detail-item-content {
        font-size: 15px;
    }

    /* SNSリンク */
    #link-title {
        font-size: 7rem;
    }
    .link-item {
        margin: 0 5rem;
        font-size: 3rem;
    }
}

/* スマホ用
------------------------------- */
@media screen and (max-width: 600px) {
    /* 本文ポリシー */
    #main-policy {
    margin-top: 80rem; 
    }

    /* 本文説明 */
    #main-description {
    margin-top: 12rem;
    margin-bottom: 40rem;
    }

    /* ギャラリー */
    #main-gallery-title {
    margin-top: 50rem;
    font-size: 25rem;
    }

    /* プロフィール */
    #main-profile-title {
    font-size: 25rem;
    }

    /* 本文ロゴ */
    #main-logo {
    margin-top: 12rem;
    width: 50rem;
    }



    /* 見出し流体シェイプ */
    #headline-fluid0 {
        left: calc(50% - 120px);
    }
    #headline-fluid0 svg {
        transform: translate(-50%, -50%) scale(0.15);
    }
    
    #headline-fluid1 {
        left: calc(50% + 80px);
    }
    #headline-fluid1 svg {
        transform: translate(-50%, -50%) scale(0.15);
    }
    
    #headline-fluid2 {
        left: calc(50% - 60px);
    }
    #headline-fluid2 svg {
        transform: translate(-50%, -50%) scale(0.12);
    }

    /* 見出し画像 */
    #headline-image0 {
        top: -5rem;
    }
    #headline-image0 svg {
        transform: translate(-50%, -50%) scale(0.35);
    }
    
    #headline-image1 {
        left :calc(50% - 100px);
        top: -15rem;
    }
    #headline-image1 svg {
        transform: translate(-50%, -50%) scale(0.25);
    }
    
    #headline-image2 {
        left :calc(50% + 100px);
        top: 2rem;
    }
    #headline-image2 svg {
        transform: translate(-50%, -50%) scale(0.25);
    }

    #main-policy {
        font-size: 20px;
    }
    #main-description {
        font-size: 12px;
    }
    

    /* ギャラリー */
    .main-gallery-items {
        gap: 40px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        margin-top: 40px;
    }
    .main-gallery-item {
        width: 200px;
        height: 200px;
    }
    .main-gallery-item p {
        top: -12px;
        font-size: 20px;
        letter-spacing: 3px;
    }

    /* ギャラリー背景の流体シェイプ */
    .galleryImageBG svg {
        visibility: hidden;
    }

    /* ギャラリー画像 */
    .galleryImage svg {
        width: 200px;
        height: 200px;
    }

    /* プロフィール */
    #profile-name {
        top: 240px;
        font-size: 40px;
    }
    #profile-imageContainer {
        width: 300px;
        height: 300px;
    }
    #profile-image svg {
        transform: translate(-50%, -50%) scale(0.6);
    }
    .profile-detail-item-fluid {
        top: 10px;
    }
    .profile-detail-item-fluid svg {
        transform: translate(-50%, -50%) scale(0.1);
    }
    .profile-detail-item-title {
        font-size: 15px;
    }
    .profile-detail-item-content {
        font-size: 10px;
    }

    /* SNSリンク */
    #link-title {
        font-size: 30px;
    }
    .link-item {
        margin: 0 21px;
        font-size: 13px;
    }
}