@charset "utf-8";

:root {
    --vw: 1vw;
    --vh: 1svh;
    /* --blueColor: #2edaf3; */
    --beigeColor:#eee0bf;
    --lightOrangeColor:#ffa464;
    /* --orangeColor:#eb6100; */
    --blueColor:#2c79c7;
    --yellowColor:#ffd762;
    --pinkColor:#f57d53;

    --headerHeight:50px;

    --mainWrapWidth:calc(83.33 * var(--vw));
    --mainWrapWidth2:calc(79.49 * var(--vw));
}

@media (min-width: 768px){
    :root {
        --vw: 3.9px;
    }
    .onlysp {
        display:none !important;
    }    
}

@media (max-width: 767px){
    .onlypc {
        display:none !important;
    }
}

body{
    background-color:var(--beigeColor);
    color:var(--orangeColor);
}

.myaquarium01 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    
}

.myaquarium01 a.underline {
    text-decoration: underline;
    transition:opacity 0.3s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
	.irukaSchool a.underline:hover {
        opacity:0.6;
	}
}

.centerWrap a{
    color:unset;
}

.pcSide {
    display:none;
    background-color:var(--lightGreenColor);
    /* pointer-events: none; */
}

.centerWrap {
    position:relative;
    width:100vw;
    background-color:#FFF;
}

section {
    position:relative;
}

.sectionMain {
    position:relative;
    z-index:2;
    width:var(--mainWrapWidth);
    margin:0px auto;
}

.sectionMain2 {
    position:relative;
    z-index:2;
    width:100%;
    margin:0px auto;
}

.sectionBG {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:1;
}

.pageTop {
    --pageTopHeight:max(600px,calc(var(--vh, 1vh) * 100 - var(--headerHeight) + var(--vw,vw) * 12.82));
    position:relative;
    width:100%;
    height:var(--pageTopHeight);
    overflow:hidden;
    background-color: var(--beigeColor);
    background-image:url(../img/top_bg.jpg);
    background-size:100% auto;
    background-position:center calc(50% + var(--vw) * 100 / 780 * 2000 * 0.09);
    background-repeat: repeat-y;
}

.pageTop .sectionMain {
    width:100%;
}

.pageTopTitleWrap {
    position:relative;
    width:100%;
    height:100%;
}

.pageTopSketch {
    position:absolute;
    left:0px;
    top:calc(var(--pageTopHeight) * 0.5);
    width:100%;
    height:auto;
    transform:translate(0px,-41%);
}

.logoWrap {
    position:relative;
    width:100%;
    height:100%;
    line-height: 0px;
    pointer-events: none;
}

.pageTopText {
    position:absolute;
    left:calc(var(--vw,vw) * 7.31);
    top:calc(var(--pageTopHeight) * 0.5);
    width:calc(var(--vw) * 87.69);
    transform:translate(0px, -70%);
}

.pageTopText1 {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%);
    opacity:0;
    animation:page_top_text_anime1 2s 5s forwards;
}

.pageTopText2 {
    clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%);
    opacity:0;
    animation:page_top_text_anime1 1.5s 2.0s forwards;
}

.pageTopText3 {
    clip-path: polygon(0 30%, 100% 30%, 100% 55%, 0 55%);
    opacity:0;
    animation:page_top_text_anime1 1.5s 2.83s forwards;
}

.pageTopText4 {
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    opacity:0;
    transform-origin: 50% 80%;
    animation:page_top_text_anime1 1.5s 4s forwards, page_top_text_anime2 2s 4s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards,page_top_text_anime3 2s 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes page_top_text_anime1 {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes page_top_text_anime2 {
    0% {
        filter: blur(2px); 
    }
    99% {
        filter: blur(0px);
    }
    100% {
        filter: none;
    }
}

@keyframes page_top_text_anime3 {
    0% {
        transform:translate(0px, -70%) scale(0.95);
    }
    100% {
        transform:translate(0px, -70%);
        opacity:1;
    }
}


/* intro */
.intro {
    /* overflow:hidden; */
    /* top:calc(var(--vw,vw) * -12.82); */
    z-index:10;
}

.intro .sectionBG > div {
    position:absolute;
    left:0px;
    top:calc(var(--vw,vw) * 87);
    z-index:11;
}

.intro .sectionBG::before {
    content:'';
    position:absolute;
    left:0px;
    top:calc(-12.82 * var(--vw));
    width:100%;
    height:calc(12.82 * var(--vw));
    background-image:url(../img/blue_arch2.svg);
    background-size:contain;
    background-position:center bottom;
    background-repeat: no-repeat;
}

.intro .sectionBG::after {
    content:'';
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color: var(--blueColor);
}

.intro .sectionBG img {
    transform-origin: 50% 90%;
    opacity:0;
}

.intro .sectionBG .sr-done img {
    opacity:0;
    animation:bg_show_animation1 2s 0s forwards;    
}

@keyframes bg_show_animation1 {
    0% {
        opacity:0;
        transform:scale(0.98);
    }
    100% {
        opacity:1;
        transform:scale(1);
    }
}


.intro h2 {
    width:calc(8.72 * var(--vw,vw)); 
    margin:0px auto;
    padding-top:calc(5.77 * var(--vw,vw));
}

.intro h2 img {
    width:100%;
    height:auto;
}

.intro p img{
    width:100%;
    height:auto;
    margin:calc(66 * var(--vw,vw)) auto calc(22.82 * var(--vw,vw));
}

/* profile */
.profile .sectionBG img {
    position:absolute;
    left:0px;
    width:100%;
    height:auto;
    top:calc(var(--vw,vw) * -8);
    z-index:9;
    opacity:0;
    transform-origin: 50% 75%;
}

.sr-done.profile .sectionBG img {
    animation:bg_show_animation2 2s 0.2s forwards;
}

@keyframes bg_show_animation2 {
    0% {
        opacity:0;
        transform:scale(1.05);
    }
    100% {
        opacity:1;
        transform:scale(1);
    }
}


.profile .sectionBG {
    background-color: var(--yellowColor);
    overflow:hidden;
}

.profile .sectionBG::before {
    content:'';
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:calc(12.82 * var(--vw));
    background-image:url(../img/blue_arch.svg);
    background-size:cover;
    background-position:center bottom;
    background-repeat: no-repeat;
    z-index:10;
}

.profileImage {
    position:relative;
    width:calc(41.41 * var(--vw,vw));
    height:calc(41.41 * var(--vw,vw));
    margin:0px auto;
    background-color:#5b504b;
    border-radius: 50%;
    overflow:hidden;
    margin:calc(18.2 * var(--vw,vw)) auto calc(9.4 * var(--vw,vw));
    display:inline-block;
    transform:scale(0);
    transform-origin: center;
}

.profileImage > div {
    position:absolute;
    left:2px;
    top:2px;
    width:calc(100% - 4px); 
    height:calc(100% - 4px);
    /* left:50%;
    top:50%;
    width:0px;
    height:0px; */
    background-color:#aae298;
    border-radius: 50%;
    overflow:hidden;
    /* transform:scale(0);
    transform-origin: center; */
}

.profileImage > div img {
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:100%;
    transform:translate(0px,30%);
    transform-origin: 50% 100%;
}

.sr-done.profile .profileImage {
    animation:profile_image_show_animation1 0.5s forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sr-done.profile .profileImage > div {
    /* animation:profile_image_show_animation2 0.5s forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); */
}

.sr-done.profile .profileImage > div img {
    animation:profile_image_show_animation3 0.8s 0s forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes profile_image_show_animation1 {
    0% {
        transform:scale(0);
    }
    100% {
        transform:scale(1);
    }
}

@keyframes profile_image_show_animation2 {
    0% {
        left:50%;
        top:50%;
        width:0px;
        height:0px;
    }
    100% {
        left:2px;
        top:2px;
        width:calc(100% - 4px); 
        height:calc(100% - 4px);  
    }
}

@keyframes profile_image_show_animation3 {
    0% {
        transform:translate(0px,30%);
    }
    100% {
        transform:translate(0px,0px);
    }
}


.profile h2 {
    width:100%;
    margin:0px auto;
    margin-bottom:calc(3.46 * var(--vw,vw));
}

.profile h2 img {
    width:100%;
    height:auto;
}

.profile p img{
    width:100%;
    height:auto;
    margin:calc(3.46 * var(--vw,vw)) auto calc(22.82 * var(--vw,vw));
}

/* highlights */
.highlights .sectionBG img {
    position:absolute;
    left:0px;
    width:100%;
    height:auto;
    top:calc(var(--vw,vw) * -4);
    z-index:9;
    opacity:0;
    transform-origin: 0% 100%;
}

.highlights .sectionBG {
    background-color: var(--pinkColor);
    overflow:hidden;
}

.highlights .sectionBG::before {
    content:'';
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:calc(12.82 * var(--vw));
    background-image:url(../img/yellow_arch.svg);
    background-size:cover;
    background-position:center bottom;
    background-repeat: no-repeat;
    z-index:10;
}

.highlights .sectionBG .sr-done img {
    animation:highlights_bg_show_animation1 2s 0.5s forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes highlights_bg_show_animation1 {
    0% {
        opacity:0;
        transform:rotate(-1deg);
    }
    100% {
        opacity:1;
        transform:rotate(0deg);
    }
}


.highlights h2 {
    width:100%;
    margin:0px auto;
    margin:calc(43.85 * var(--vw,vw)) auto calc(3.65 * var(--vw,vw));
    display:inline-block;
}

.highlights h2 img {
    width:100%;
    height:auto;
}

.highlights p img{
    width:100%;
    height:auto;
    margin:calc(3.65 * var(--vw,vw)) auto calc(22.82 * var(--vw,vw));
}

.highlightsPhotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.highlightsPhotos img {
    object-fit: cover;
    width:100%;
    height:100%;
    opacity:0;
}

.highlightsPhotos > div {
    position:relative;
    overflow: hidden;
}

.highlightsPhotos > div:nth-of-type(1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
} 

.highlightsPhotos > div:nth-of-type(2) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
} 

.highlightsPhotos > div:nth-of-type(3) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
} 

.highlightsPhotos > div:nth-of-type(4) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
} 

.highlightsPhotos.sr-done img {
    animation:highlights_photo_show_animation 1s forwards;
}

.highlightsPhotos.sr-done > div:nth-of-type(1) img{
    animation-delay:0s;
}

.highlightsPhotos.sr-done > div:nth-of-type(2) img{
    animation-delay:0.2s;
}

.highlightsPhotos.sr-done > div:nth-of-type(3) img{
    animation-delay:0.3s;
}

.highlightsPhotos.sr-done > div:nth-of-type(4) img{
    animation-delay:0.5s;
}




@keyframes highlights_photo_show_animation {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}


/* Info */
.info .sectionMain img {
    width:100%;
    height:auto;
    margin:calc(3.85 * var(--vw)) 0px;
}

.info h2 {
    width:100%;
    margin:0px auto;
    margin:calc(17.56 * var(--vw,vw)) auto calc(3.14 * var(--vw,vw));
    display:inline-block;
}

.info h2 img {
    width:100%;
    height:auto;
}

.info p img{
    width:100%;
    height:auto;
    margin:calc(3.14 * var(--vw,vw)) auto;
}

/* .info .infoText2  svg {
    width:calc(55.9 * var(--vw,vw));
    height:auto;
} */




/* sns */
.sns h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: center;
    color:var(--darkBlueColor);
    margin-top:45px;
    margin-bottom:0px;
}

.snsBtns {
    display:flex;
    justify-content: center;
    margin:0px auto;
    padding-top:30px;
    padding-bottom:30px;
}

.snsBtn {
    position:relative;
    width:51px;
    height:51px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin:0px 19px;
    transition:transform 0.3s ease-in-out,filter 0.3s ease-in-out;
}

.snsBtns a {
    overflow:visible;
}

.snsBtn::after {
    content:'';
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color:#FFF;
    opacity:0;
    border-radius: 50%;
    transition:opacity 0.3s ease-in-out;
}


@keyframes snsBtnBGAnime {
    0% {
        transform: scale(1.05,0.95);
    }
    50% {
        transform: scale(0.95,1.05);
    }
    100% {
        transform: scale(1.05,0.95);
    }
}


.snsBtn img {
    position:relative;
    transition:transform 0.3s ease-in-out;
}






.gotoMainBtn::after {
    content:'';
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color:#FFF;
    opacity:0;
    transition:opacity 0.3s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
	.gotoMainBtnWrap:hover .gotoMainBtn::after {
        opacity:0.2;
	}

    .projectArchiveBtn:hover::after {
        opacity:0.2;
    }

    .eventBtn::before {
        content:'';
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background-color:#FFF;
        opacity:0;
        transition:opacity 0.3s ease-in-out;
    }

    .eventBtn:hover::before { 
        opacity:0.2;
    }

    .eventBtn img:first-of-type {
        position:relative;
    }
}
    

.gotoMainBtn {
    position:relative;
    width:calc(var(--vw) * 76.92);
    height:calc(var(--vw) * 25.64);
    color:#FFFFFF;
    margin:calc(16.67 * var(--vw)) auto;
}

.gotoMainBtnText1 {
    padding-top:26px;
    margin:0px auto;
}

.gotoMainBtnText2 {
    margin:21px auto 26px;
}

.gotoMainBtnText3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: center;
    margin:0px auto;
    padding-bottom:20px;
}

.gotoMainBtnBlank {
    position:absolute;
    right:15px;
    bottom:15px;
}

@media (hover: hover) and (pointer: fine) {
    .snsBtn:hover::after {
        opacity:0.2;
    }
}


footer {
    position:relative;
    background-color:var(--lightBlueColor);
    padding-top:25px;
    padding-bottom:80px;
}


footer p {
    font-size: 10px;
    font-weight: 600;
    line-height: 10px;
    letter-spacing: 0em;
    text-align: center;
    color: var(--lightGreenColor);
}

/* ::::::::::::::::::::::::::::::::: PC ::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 768px){

    /*　ヘッダーの高さ調整 */
    :root {
        --headerHeight: 68px;
    }

    div.wrap {
        padding:var(--headerHeight) 0px 0px;
    }

    header.mainHeader {
        height:var(--headerHeight);
    }

    header.mainHeader .inner {
        display:flex;
        height:100%;

    }

    header.mainHeader p.siteTitle {
        padding:0px;
        margin:calc(var(--headerHeight) * 0.11) auto;
        height:auto;
        width:min(calc(100vw - 40px),calc(var(--headerHeight) * 0.78 / 50 * 270));
        display:inline-block;
    }

    header.mainHeader p.siteTitle img {
        width: 100%;
        height: auto;
    }




    .centerWrap::before,
    .centerWrap::after {
        content:'';
        position:absolute;
        top:0px;
        width:15px;
        height:100%;
    }

    .centerWrap::before {
        left:-15px;
        background: linear-gradient(to left, rgba(172,145,114,0.8), rgba(172,145,114,0));
        mix-blend-mode: multiply;
    }

    .centerWrap::after {
        right:-15px;
        background: linear-gradient(to right, rgba(172,145,114,0.8), rgba(172,145,114,0));
        mix-blend-mode: multiply;
    }

    .pcSide {
        display:block;
        position:fixed;
        left:0px;
        top: var(--headerHeight);
        width:100%;
        height:calc(100% - var(--headerHeight));
        color:var(--beigeColor);
        visibility: hidden;
        background-color: var(--beigeColor);
    }

    .js-disabled .pcSide,
    .loaded .pcSide {
        visibility: visible;
        opacity:0;
        animation:pc_side_fade_in 2s 4s forwards;
    }

    .js-disabled .pcSide .pcSideText,
    .loaded .pcSide .pcSideText {
        opacity:0;
        animation:pc_side_fade_in 2s 5s ease-out forwards;
    }
    

    @keyframes pc_side_fade_in {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }


    .pcSide a {
        color:unset;
    }

    .pcSideLeft,
    .pcSideRight {
        position:absolute;
        top:0px;
        width:calc(50% - 195px);
        height:100%;
        user-select: none;
        overflow:hidden;        
    }

    .pcSideLeft > div,
    .pcSideRight > div {
        opacity:0;
        transition:opacity 0.5s ease-in-out;
    }

    .pcSideLeft {
        left:0px;
    }

    .pcSideBG,
    .pcSideText {
        position:absolute;
        width:100%;
        height:100%;
    }

    .pcSideLeft .pcSideBG {
        background-image:url(../img/pc_left.jpg);
        background-size:contain;
        background-position:center;
        background-repeat: no-repeat;
    }

    .pcSideLeft .pcSideText {
        background-image:url(../img/pc_left_text.png);
        background-size:contain;
        background-position:center;
        background-repeat: no-repeat;
    }


    .pcSideRight {
        right:0px;
    }

    .pcSideRight .pcSideBG {
        background-image:url(../img/pc_right.jpg);
        background-size:contain;
        background-position:center;
        background-repeat: no-repeat;
        transform:scale(1.65);
    }

    .pcSideRight .pcSideText {
        display:flex;
        justify-content: center;
        align-items: center;
    }

    .pcSideRight .pcSideText svg {
        width:min(calc((50vw - 195px) * 529 / 1050),calc((100vh - var(--headerHeight)) / 206 * 529));
        height:auto;
    }


    .pcSidePageTop {
        width:295px;
        height:100%;
        max-height:465px;
    }

    .centerWrap {
        width:390px;
        margin:0px auto;
    }

}

@media screen and (max-height: 1000px){
}


@media screen and (max-height: 780px){

}

/* ::::::::::::::::::::::::::::::::: PC ::::::::::::::::::::::::::::::::: */
/* ヘッダーまわりのみ */
/* @media screen and (min-width: 990px){
    .pageTop {
        min-height:calc(100vh - var(--headerHeight));
    }

    .pageTopTitleWrap {
        min-height:max(600px,calc(100vh - var(--headerHeight)));
    }
} */

@media screen and (min-width:1100px) {

    .pcSideLeft > div,
    .pcSideRight > div {
        opacity: 1;
    }

}

@media screen and (max-height: 550px){
    .pcSideLeft > div,
    .pcSideRight > div {
        opacity: 0;
    }
}