@charset "utf-8";

/*======================================================
メイン
======================================================*/

body{
    background: var(--grey-bg);
}

/*----------------------------------------
背景
----------------------------------------*/
.top-line01-wrapper{
    position:relative;
}

.line-dot01{
    animation: lineAnime ease 20s .2s infinite;
    opacity:0;
}

@keyframes lineAnime{
    0%{
        stroke-dashoffset:500;
    }
    100%{
        stroke-dashoffset: -500;
        opacity:1;
    }
}

.bg-main{
    position: absolute;
    right:5%;
    top:60px;
    z-index:-3;
}

.top-facility-inner{
    position:relative;
}

.bg-facility{
    position:absolute;
    top:30px;
    left:10%;
}
/* -----------------------------------------------------------
2つ目のドットはdata-reveal-class="bg-anime-line"を設定しておいて
JSでクラス名を取得してからアニメーションを実行する
（画面に入ってから表示させるため）
------------------------------------------------------------ */

.bg-anime-line.line-dot02{
    animation: lineAnime02 ease 20s .2s infinite;
    opacity:0;
}

@keyframes lineAnime02{
    0%{
        stroke-dashoffset:-500;
    }
    100%{
        stroke-dashoffset: 500;
        opacity:1;

    }
}

.top-line01-wrapper{
    /* background-image: url(../img/index/bg-line01.svg); */
    background-repeat: no-repeat;
    background-position: left 80% top 60px;
}
.top-line02-wrapper{
    /* padding-top:400px;
    margin-top:200px; */
    /* 背景にドットライン表示 */
    /* background-image: url(../img/index/bg-line02.svg); */
    background-repeat: no-repeat;
        /* article{
            margin-top:-600px;

        } */
}


/*----------------------------------------
メインイメージ部分
----------------------------------------*/
.main-image-wrapper{
    position:relative;
    max-width: 1200px;
    margin-inline:auto;
}
.main-image{
    display: grid;
    /* grid-template-columns: minmax(200px,900px) auto; */
    grid-template-columns: 8fr 1fr;
    justify-content: center;
    @media(min-width:768px){
        column-gap: 2em;
    }    
}


.top-main-img{
    position: relative;
}

.bg-cosmos-3{
    position:absolute;
    right: -260px;
    bottom: -260px;
    z-index: -1;
    @media(max-width:767px){
        display: none;
    }


}
.top-main-copy{
    font-family: var(--mincho);
    font-weight: 400;
    font-style: normal;
    letter-spacing:0.5em;
        -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size:clamp(1.5rem,3.2vw,3.2rem);
    display: grid;
    align-self: self-end;
    text-align: right;
    @media(min-width:768px){
        margin-right:2em;
    }
}

.top-main-img-kazari{
    position: absolute;
    right:10px;
    bottom:-10px;
    @media(min-width:768px){
        bottom:-160px;
    }    
    height:min(240vw / 12, 240px);
    z-index: -1;
    animation: balloon 5s infinite ease-in-out alternate;
}

@keyframes balloon{
    0%{
        transform: translate(3px, 3px) rotate(10deg);
    }

    50%{
        transform: translate(-3px, -3px) rotate(-10deg);
    }
    75%{
        transform: translate(3px, 3px) rotate(0deg);
    }
    
    100%{
        transform: translate(-6px, 0px) rotate(-10deg);
    }
}

.top-main-img-leaf{
    position: absolute;
    left:10px;
    bottom:60px;
    /* @media(max-width:400px){
        bottom:60px;
    }     */
    width:min(20vw, 240px);
    height:auto;
    /* z-index: -1; */
    animation: leaf 4s infinite alternate;
}

@keyframes leaf{
    0%{
        transform: rotate(4deg);
    }

    50%{
        transform: rotate(-4deg);

}
}
/* メインイメージを動かす

.top-main-img__wrapper01{
	    max-width: 100%;
	    height: 100%;
	}
	 
	.circle{
        background-image:url(../img/index/main-img01-s.jpg);
	    background: #7fcce3 url(../img/index/main-img01-s.jpg) 1x, url(../img/index/main-img01.jpg) 2x;
        background-repeat:  no-repeat;
        background-position: center center;
        background-size:cover;
        border-radius: 50%;
	    padding-top: 10%;
	    width: 80%;
        height:80%;
    aspect-ratio: 1;	  
        box-shadow:4px 4px 4px 4px var(--grey-bg-90);
        animation: circleAnime 20s infinite;
	}

@keyframes circleAnime {
    0%    { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
    12.5% { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    25%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    37.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    50%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    62.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    75%   { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    87.5% { border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%; }
    100%  { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
}


.top-main-img__wrapper02{
	    width: 100%;
	    height: 100%;
	}
	 
	.circle02{
	    background: #7fcce3 url(../img/index/main-img02.jpg) no-repeat center center;
        background-size:cover;
	    position:absolute;
        bottom:0;
        right:0;
	    width: 30%;
        height:40%;	  
	    animation-name: puyopuyo-s;
	    animation-duration: 10.0s;
	    animation-timing-function: ease;
	    animation-iteration-count: infinite;
        box-shadow:4px 4px 4px 4px var(--grey-bg-90);
	}
	 
	@keyframes puyopuyo-s{  
	    0%{
	        border-radius: 48% 52% 65% 35% / 39% 43% 57% 61%;
	    }
	    14%{
	        border-radius: 59% 41% 60% 40% / 46% 43% 57% 54%;
	    }
	    28%{
	        border-radius: 67% 33% 52% 48% / 46% 53% 47% 54%;
	    }
	    42%{
	        border-radius: 67% 33% 61% 39% / 56% 61% 39% 44%;
	    }
        56%{
	        border-radius: 55% 45% 61% 39% / 62% 51% 49% 38%;
	    }
        70%{
	        border-radius: 60% 40% 61% 39% / 45% 51% 49% 55%;
	    }
	    84%{
	        border-radius: 46% 54% 61% 39% / 35% 60% 40% 65%;
        }   
	    100%{
	        border-radius: 47% 52% 65% 35% / 40% 43% 57% 61%;
	    }
}

 */


/* テキストを少しずつ表示 */
.blur-box{
  animation-name: blur;
  animation-duration: 2s;
  animation-fill-mode:forwards;
  animation-iteration-count: forwards;
}

@keyframes blur{
  from {
    filter: blur(50px);
  }

  to {
    filter: blur(0);
  }
}



/*----------------------------------------
ABOUT
----------------------------------------*/

.top-about-wrapper{
    display: grid;
    @media(min-width:768px){
        grid-template-columns: 1fr 1fr
    }    
    align-items: center;
}

/*----------------------------------------
施設紹介
----------------------------------------*/

.top-facility{
        background-color: var(--green-bg);
        background-position: center top -100px;
        /* padding-top:100px; */
        padding-top:0 !important;
}

.facility-wrapper{
    display: grid;
    gap:1em;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    /* justify-content: start;
    justify-items: center; */
    margin-bottom:2em;
    .card-wrapper{
        display: grid;
        justify-items: center;
    }
}

/*----------------------------------------
採用情報
----------------------------------------*/
@media(min-width:600px){
    .top-recruit-wrapper{
        display: grid;
        grid-template-columns: repeat(6,minmax(100px,1fr));
        grid-template-rows: repeat(4,minmax(100px,1fr));
        max-width: 1000px;
    }
    .top-recruit01{
        grid-column: 1/5;
        grid-row: 1/4;
    }
    .top-recruit-text{
        grid-column: 1/4;
        grid-row: 4/5;
        padding-right:1em;
    }
    .top-recruit02{
        grid-column: 4/7;
        grid-row: 3/5;
    }
}

/*----------------------------------------
パララックス背景
----------------------------------------*/

.bg-image-wrapper{
    width:100%;
    background-image: url('../img/index/bg-spring.jpg');
    height:200px;
    background-repeat:no-repeat;
    background-size: contain;
    background-position: center;
  @media(min-width:767px)
    {
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: 400px;
    }
}