/*========================================*/
/*ホーム*/
/*========================================*/
.home-top_img{
    margin-bottom: 50px;
    margin-top: 50px;
    position: relative;
    width: 100%;
    height: 70vw;
    background-repeat: no-repeat; /*背景画像あまりに繰り替えさない*/
    background-size: cover; /*背景画像サイズ*/
    background-position: center center; /*背景画像ポジション*/
}

.home_top h1{
    text-align: center;
    padding-top: 18vw;
    margin: 0;
    font-weight: 700;
    color: var(--home_top_name-color);
    letter-spacing: 20px; /*文字の間隔*/
    font-size: 70px;
    text-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.home_top h2{
    text-align: center;
    margin: 0;
    font-weight: 900;
    color: var(--home_top_name-color);
    letter-spacing: 20px; /*文字の間隔*/
    font-size: 90px;
    text-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

    -webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2024-2-21 18:18:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-contract-bck
 * ----------------------------------------
 */
 @-webkit-keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(300px);
              transform: translateZ(300px);
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(12px);
              transform: translateZ(12px);
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  @keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(300px);
              transform: translateZ(300px);
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(12px);
              transform: translateZ(12px);
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
}
  
.home_top svg{
	position: absolute;
    width: 100%;
	bottom: 0;
	right: 0;
    fill: var(--background-color);
}

@media screen and (max-width:760px) {
    .home_top h1{
        font-size: 50px;
    }
}

@media screen and (max-width:630px) {
    .home_top svg{
        width: 180%;
    }
    .home-top_img{
        background-size: auto; /*背景画像サイズ*/
        background-position: center center; /*背景画像ポジション*/
        height: 60vh;
    }
}

/*==========*/

.SNS_embed{
    margin: 30px auto;
    width: 80%;
    font-family: 'Poppins','Noto Sans JP', sans-serif;
}

.SNS_embed_BG{
    margin: 100px 0;
    padding-bottom: 20px;
    background-color: #e6e5ec;
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #ffffff calc(100% - 1px)),linear-gradient(90deg, transparent calc(100% - 1px), #ffffff calc(100% - 1px));
    background-size: 30px 30px;
    background-repeat: repeat;
    background-position: center center;
}

.SNS_embed .X-Discord{
    display: flex;
    justify-content: center;
    align-items: center;
}

.SNS_embed .YouTube{
    text-align: center;
}

.SNS_embed h1{
    font-size: 4em;
    margin-bottom: 10px;
    text-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.SNS_embed h1 i {
    padding-right: 5px;
}

.SNS_embed .SNS{
    text-align: center;
    margin: 2%;
    margin-bottom: 5px;
}

.SNS_embed .X h1{
    color: var(--SNS_X-color);
}
.SNS_embed .Discord h1{
    color: var(--SNS_Discord-color);
}
.SNS_embed .YouTube h1{
    color: var(--SNS_YouTube-color);
}

.SNS_embed iframe{
    border: solid 3px var(--logo-color);
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.SNS_embed .YouTube{
    margin: auto;
}

.SNS_embed .X .button {
    color: var(--SNS_X-color); /*文字*/
    border: 2px solid var(--SNS_X-color); /*枠*/
    background-color: #ffffff;
    border-radius: 100px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1.5em;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: 0.5s;
    font-weight: 700;
    margin: 5px;
}

.SNS_embed .X .button i {
    padding-right: 10px;
}

.SNS_embed .X .button:hover{
    background-color: var(--SNS_X-color); /*ホバー背景色*/
    color: white;
}

.SNS_embed .Discord .button {
    color: var(--SNS_Discord-color); /*文字*/
    border: 2px solid var(--SNS_Discord-color); /*枠*/
    background-color: #ffffff;
    border-radius: 100px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1.5em;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: 0.5s;
    font-weight: 700;
    margin: 5px;
}

.SNS_embed .Discord .button i {
    padding-right: 10px;
}

.SNS_embed .Discord .button:hover{
    background-color: var(--SNS_Discord-color); /*ホバー背景色*/
    color: white;
}

.SNS_embed .YouTube .button {
    color: var(--SNS_YouTube-color); /*文字*/
    border: 2px solid var(--SNS_YouTube-color); /*枠*/
    background-color: #ffffff;
    border-radius: 100px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1.5em;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: 0.5s;
    font-weight: 700;
    margin: 5px;
}

.SNS_embed .YouTube .button i {
    padding-right: 10px;
}

.SNS_embed .YouTube .button:hover{
    background-color: var(--SNS_YouTube-color); /*ホバー背景色*/
    color: white;
}

/*.SNS_embed .SNS a*/
@media screen and (max-width:1060px) {
    .SNS_embed .X-Discord iframe{
        width: 300px;
    }
    .SNS_embed h1{
        font-size: 2em;
        margin-bottom: 10px;
    }
    
}

@media screen and (max-width:800px) {
    .SNS_embed .X-Discord{
        display: block;
    }
}

@media screen and (max-width:560px) {
    .SNS_embed iframe{
        width: 270px;
    }
    
    .SNS_embed .X-Discord iframe{
        width: 250px;
    }

    .SNS_embed .YouTube{
        margin: 0;
    }
}
/*==========*/

.home_about{
    display: flex;
    width: 80%;
    margin: 30px auto;
}



.home_about .logo{
    transform: rotate(355deg);
    width: 40%;
    height: 30%;
    border-radius: 50px;
    background-color: #ffffff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: var(--logo-color) 1vw solid;
    margin-right: 100px;

    img{
        width: 100%;
        height: 100%;
    }
}

.home_about .profile{
    width: 40%;
    border-radius: 15px;
    padding: 3%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-color: #ffffff;
    border: #c9c9c9 2px solid;

    .name{
        display: flex;
        flex-wrap: wrap;
    }
    h1{
        font-size: 50px;
        margin: 0;
    }
    h2{
        font-size: 30px;
        font-weight: normal;
        margin: 0;
        margin-top: auto;
    }
    h3{
        font-size: 21px;
        margin: 0;
        margin-bottom: 15px;
        color: #696969;
    }
    p{
        font-size: 25px;
        margin: 0;
    }
    .furthermore{
        text-align: end;
        margin-top: 50px;
    }
    .comment{
        margin: 10px 0;
    }
}

@media screen and (max-width:930px) {
    .home_about{
        display: block;
    }
    .home_about .logo{
        width: 60%;
        height: 60%;
        margin: 0 auto;
        margin-bottom: 10vw;
    }
    .home_about .profile{
        width: 90%;
        margin: 0 auto;
    }
}

@media screen and (max-width:1050px) {
    .home_about{
        margin: 5%;
    }
}

@media screen and (max-width:690px) {
    .home_about .profile p{
        font-size: 20px;
    }
}

@media screen and (max-width:380px) {
    .home_about .profile h1{
        font-size: 40px;
    }
}

.rotate-center:hover {
	-webkit-animation: rotate-center 0.5s ease-in-out both;
	        animation: rotate-center 0.5s ease-in-out both;
}

@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-2-11 12:2:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
 @-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }