body {
    margin:0px;
    padding:0px;
    font-family:"Poppins", sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    overflow-x:hidden!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:0.9rem;
}


body {
  --sb-track-color: #232E33;
  --sb-thumb-color: #0e0e0e;
  --sb-size: 1px;
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 1px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 1px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

.post img{
    width:100%;
    height: 140px;
    object-fit: cover;
}

.event-icon{
    width:160px;
    height: auto;
}

.event-icon img{
    width:100%;
    height: auto;
}


.post{
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-flow:column nowrap;
    width:100%;
    cursor:pointer;
    transition:.2s ease all;
}

.post:hover{
    opacity:0.7;
}

#blog-list .post {
  display: none;
}

#blog-list.show-all .post {
  display: flex; /* tüm postlar */
}

#blog-list:not(.show-all) .post:nth-child(-n+3) {
  display: flex; /* sadece son 3 post */
}

.date {
    font-size:0.7rem;
    color:gray;
}
.wrap{
    width:1100px;
    margin:0 auto;
    position:relative;
    height:auto
}

#blog-detail img{
    width:100%;
    height: auto;
    justify-self:center;
}


#blog-detail{
    display:flex;
    flex-flow:column;
    gap:5px;
}

h2{
    margin:0;
    padding:0;
    font-weight:600;
    font-size:1.0rem;
}

h3{
    margin:0;
    padding:0;
    font-weight:600;
    font-size:1rem;
}

/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#000000; /* change if the mask should have another color then white */
	z-index:999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../img/status.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/* Language */
.language-bar{
    width:100%;
    height:5px;
    position:fixed;
    z-index:100;
}

.language-button{
    color:white;
    background:rgb(0, 0, 0);
    width:auto;
    height:auto;
    position:fixed;
    z-index:102;
    right:15px;
    font-size:0.7rem;
    padding:5 10 5px;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* Topbar */
.topbar{
    width:100%;
    position:relative;
    height:80px;
    display:flex;
    align-items:center;
    position:fixed;
    z-index:99;
    transition:.2s ease all;
    background:rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
}

.topbar-wrap{
    width:1000px;
    margin:0 auto;
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.footer-wrap{
    width:1000px;
    margin:0 auto;
    position:relative;
    display:grid;
    grid-template-columns: 33.33%  33.33% 33.33% ;
    font-size:0.9rem;
    justify-content:center;
    align-items:center;
    font-weight:500;
    color:#2c2c2c;
}

#logo{
    width:160px;
    height: auto;
    transition:.2s ease all;
    opacity:0.7;
    cursor:pointer;
}

.logo img:hover{
    opacity:0.8;
    transition:.2s ease all;
}

.logo img{
    width:100%;
    height: auto;
    transition:.2s ease all;
}

.navlist{
    display:flex;
    gap:50px;
}

.nav-item{
    display:flex;
    gap:3px;
    flex-flow: column nowrap;
    font-weight:600;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    justify-content:center;
    align-items:center;
    transition:.2s ease all;
    opacity:0.8;
    position:relative;
}



.logo-footer{
    transition:.2s ease all;
}
.logo-footer img{
    width:180px;
    opacity:0.7;
}

.logo-footer:hover{
    opacity:0.7;
    transition:.2s ease all;
    cursor:pointer;
}

.protective {
    position:absolute;
    width:100%;
    height:100%;
    z-index:999;
}

.nav-button{
    display:flex;
    gap:5px;
    flex-flow:column nowrap;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s ease all;
}

.nav-button:hover{
    opacity:0.5;
    transition:.2s ease all;
}


#nav-img{
    opacity:1;
    transition:.2s ease all;
    height:18px;
}

.nav-item img{
    width:16px;
    height: auto;
    opacity:0.9;
}


.social{
    display:flex;
    align-items:center;
    gap:10px;    
    transition:.2s ease all;
    cursor:pointer;
    margin-top:10px;
}

.social img:hover{
    opacity:0.5;
    transition:.2s ease all;
}

.social img{
    width:18px;
    height: auto;
    opacity:0.7;
    transition:.2s ease all;
    
}

.social-2{
    display:flex;
    align-items:center;
    justify-content:right;
    gap:15px;    
    transition:.2s ease all;
    cursor:pointer;
}

.social-2 img{
    width:16px;
    height: auto;
    opacity:0.7;
    transition:.2s ease all;
}

.social img:hover{
    opacity:0.5;
    transition:.2s ease all;
}

.social-2 img:hover{
    opacity:0.5;
    transition:.2s ease all;
}

.header{
    width:100%;
    height:700px;
}


.header img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.about-head{
    width:100%;
    height:100svh;
    background-size: cover;
    display:flex;
    align-items:center;
    align-content:center;
    justify-content:center;
    background-attachment:fixed;
    z-index:1;
}

#video{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100svh;
  z-index:-2;
}

#video2{
  right: 0;
  bottom: 0;
  width: 100%;
  height:auto;
}

.middle{
    width:40svw;
    height: auto;
}

.middle img{
    width:100%;
    height: auto;
}


.about-head-grad{
    width:100%;
    height:100svh;
    background: #ffffff;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 30%);
    position:absolute;
}



.backpage{
    width:100%;
    background-repeat:repeat;
    padding-top:80px;
    padding-bottom:80px;
    position:relative;
    background-position:26px 17px;
    background-size: 32px;
    min-height:100svh;
    overflow-x:hidden;
    background:white;
}


.subvid{
    width:100%;
    height: auto;
}

.news-image{
    width:calc(100% + 80px);
    height:calc(100% + 100px);
    position:absolute;
    opacity:0.2;
    filter:blur(2px);
    z-index:0;

}

.news-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover;
}

.special-wrap{
    width:calc(100% - 80px);
    margin:0 auto;
    margin-bottom:90px;
    height: auto;
    padding:50 40 50px;
    color:rgb(44, 44, 44);
    position:relative;
    background:white;
}



.special-wrap:first-of-type{
    margin:0 auto;
}


.divide{
    width:100%;
    display:grid;
    grid-template-columns: 25% 70%;
    column-gap:5%;
}

.divide2{
    width:100%;
    display:grid;
    grid-template-columns: 50% 50%;
    align-items:center;
    justify-content:center;
}

.divide3{
    width:100%;
    display:grid;
    grid-template-columns: 50% 50%;
    align-items:center;
    justify-content:center;
}


.title{
    width:100%;
    align-items:center;
    display:flex;
    font-weight:500;
    font-size:1.5rem;
    justify-content:center;
    flex-flow:column nowrap;
    gap:0px;
    position:relative;
    z-index:3;
    color:#414546;
}

.title-jp{
    font-size:0.8rem;
    font-weight:800;
}

.news-wrap{
    width:100%;
    display:flex;
    flex-flow:column nowrap;
    position:relative;
}

.news-col{
    display:flex;
    border-bottom:1px solid rgb(231, 231, 231);
    gap:15px;
    align-items:center;    
    transition:.2s ease all;
    cursor:pointer;
}

.news-col:hover{
    opacity:0.7;
    transition:.2s ease all;
}

.news-text{
    padding:10.5px;
}

.news-col:first-of-type{
    border-top:1px solid rgb(228, 228, 228);
}

.news-date{
    font-weight:600;
    font-size:0.85rem;
    color:#414546
}

.anti{
    height:90px;
}

.view-more{
    width:100%;
    display:flex;
    font-size:0.8rem;
    align-items:center;
    justify-content:right;
    height:0px;
    position:absolute;
    bottom:-15px;
    color:gray;
    cursor:pointer;
}

.inside{
    width:100%;
    margin:0 auto;
    display:flex;
    gap:40px;
    flex-flow:column nowrap;
}

.info{
    width:100%;
}

.para1{
    width:100%;
}


.footer2{
    width:100%;
    padding-top:60px;
    padding-bottom:60px;
    border-top:1px solid rgb(209, 209, 209);
    background:white;
}

.footer-s{
    display:flex;
    flex-flow:column nowrap;
    gap:15px;
    justify-content:center;
    align-items:center;
}


.para1{
    display:flex;
    flex-flow:column;
    gap:5px;
}

.text-col{
    display:flex;
    gap:5px;
    flex-flow:column;
}

.space{
    display:flex;
    justify-content:space-between;
    flex-flow:column nowrap;
}

button{
    padding:0px;
    color:black;
    background:none;
    border:0px;
    display:flex;
    justify-content:space-between;
    font-weight:800;
    font-family:Poppins;
    border-radius:3px;
    align-items:center;
    font-size:0.8rem;
}

button img{
    width:24px;
    height: auto;
}

.buttons{
    display:flex;
    flex-flow:column nowrap;
    gap:10px;
}

.number{
    position:absolute;
    top:10px;
    left:15px;
    font-weight:600;
    font-size:0.7rem;
    display:flex;
    gap:10px;
    align-items:center;
    color:rgb(155, 155, 155);
}

.title-small{
    transform:rotate(90deg);
    font-size:1rem;
    position:absolute;
    top:85px;
    left:-50px;
    font-weight:800;
}

.title img{
    width:160px;
    height: auto;
}

.title-img img{
    width:100%;
    height: auto;
}

.angle{
    position:absolute;
    bottom:-17px;
    left:-17.5px;
}

.angles{
    opacity:0.7;
}

.angle2{
    position:absolute;
    top:-18px;
    left:-17.5px;
    transform:rotate(90deg)
}

.angle3{
    position:absolute;
    bottom:-18px;
    right:-17.5px;
    transform:rotate(90deg);
    transform:scaleX(-1);
}

.angle4{
    position:absolute;
    top:-18px;
    right:-17.5px;
    transform:scaleX(-1);
    transform:scale(-1)
}

.angle5{
    position:absolute;
    left:calc(50% - 28.905px);
    bottom:-25px;
}

.angle6{
    position:absolute;
    left:calc(50% - 28.905px);
    top:-25px;
    transform:scaleY(-1)
}

.angle img{
    width:24px;
}

.angle2 img{
    width:24px;
}

.angle3 img{
    width:24px;
}

.angle4 img{
    width:24px;
}

.angle5 img{
    height: 24px;
}

.angle6 img{
    height: 24px;
}

.angle7 img{
    height: 24px;
}

.angle8 img{
    height: 24px;
}

.first-box{
    width:16px;
    height:8px;
    background:#2c2c2c;
}

.second-box{
    width:16px;
    height:8px;
    background:#444444;
}

.third-box{
    width:16px;
    height:8px;
    background:#818181;
}

.fourth-box{
    width:16px;
    height:8px;
    background:rgb(202, 202, 202);
}

.grid-index{
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    position:relative;
    background:white;
    padding:20px;
    margin-bottom:90px;
}

.grid-index-2{
    width:100%;
    display:grid;
    grid-template-columns: 31% 31% 31%;
    column-gap:3.5%;
    position:relative;
    row-gap:20px;
}

.grid-item{
    display:flex;
    justify-content:center;
    align-items:center;
}

.grid-item img{
    width:100%;
    height: 100%;
    object-fit: cover;
    transition:.2s ease all;
    cursor:pointer;
}

.grid-item:hover img{
    opacity:0.7;
    transition:.2s ease all;
}

.grid-item2:hover img{
    opacity:0.7;
    transition:.2s ease all;
}

.grid-item2 img{
    transition:.2s ease all;
}

.grid-item2{
    width: 90%;
    height: 90%;
    margin:0 auto;
    display:flex;
    align-items:center;
    text-align:center;
    justify-content:center;
    flex-flow:column nowrap;
    gap:7px;
    cursor:pointer;
}

.grid-name{
    font-weight:600;
    font-size:0.9rem;
}

.grid-desc{
    font-weight:400;
    font-size:0.8rem;
    color:gray;
}



.grid-image img{
    width:100%;
    height: auto;
}

.line-v{
    height:100%;
    width:1px;
    background:rgb(212, 212, 212);
    position:absolute;
    top:0px;
    left:-1px;
}

.line-v2{
    height:100%;
    width:1px;
    background:rgb(212, 212, 212);
    position:absolute;
    top:0px;
    right:-1px;
}

.line-h{
    width:300svw;
    height:1px;
    background:rgb(212, 212, 212);
    position:absolute;
    top:-1px;
    left:-100svw;
}

.line-h2{
    width:300svh;
    height:1px;
    background:rgb(212, 212, 212);
    position:absolute;
    bottom:-1px;
    left:-100svh;
}

.line-h3{
    width:100%;
    height:1px;
    background:rgb(212, 212, 212);
    position:absolute;
    top:510px;
}

.line-h4{
    width:100%;
    height:1px;
    background:rgb(212, 212, 212);
    position:absolute;
    top:789px;
}

.h-text{
    position:absolute;
    top:-13px;
    font-size:0.7rem;
    font-weight:800;
    opacity:0.7;
    left:0px;
}

.h-text-2{
    position:absolute;
    top:-13px;
    font-size:0.7rem;
    font-weight:800;
    right:0px;
    opacity:0.7;
    cursor:pointer;
}

.news-type{
    border:2px solid black;
    font-size:0.6rem;
    padding:0 10 0px;
    font-weight:800;
    display:flex;
    align-items:center;
    min-width:50px;
    text-align:center;
    justify-content:center;
}



#homepage {
    display:block;
    position:relative;
}
#about {
    height:0px;
    opacity:0;
    position:relative;
    display:none;
    top:40px;
}
#goods {
    height:0px;
    opacity:0;
    position:relative;
    display:none;
    top:40px;

}

.maintenance{
    display:flex;
    width:100%;
    justify-content:center;
    align-items:center;
}

.maintenance img{
    width:700px;
    height: auto;
}

#exhibition {
    height:0px;
    opacity:0;
    position:relative;
    display:none;
    top:40px;
}
#sightings {
    height:0px;
    opacity:0;
    position:relative;
    display:none;
    top:40px;
}
#releases {
    height:0px;
    opacity:0;
    position:relative;
    display:none;
    top:40px;
}
#blogpost {
    height:0px;
    opacity:0;
    position:relative;
    display:none;
    top:40px;
}



.members {
    display:grid;
    grid-template-columns: 45% 45%;
    column-gap:10%;
    cursor:pointer;
    position:relative;
}

.members-2{
    display:grid;
    grid-template-columns: 17.3% 17.3% 17.3% 17.3% 17.3%;
    column-gap:3.4%;
    cursor:pointer;
    position:relative;
}


.members2 {
    display:grid;
    grid-template-columns: 6% 6% 6% 6% 6% 6% 6% 6% 6% 6% 6% 6%;
    column-gap:2.54444%;
    row-gap:30px;
}

.cv-member3{
    width:100%;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-flow: column nowrap;
    gap:7px;
}

.item-link{
    cursor:pointer;
}

.cv-member3:hover {
    cursor:pointer;
}

.cv-member3 img{
    width:100%;
    height: auto;
    transition: .2s all ease;
    filter:grayscale(1)
}

.member-social:hover img{
    opacity:1!important;
    transition:.2s ease all;
}

.member-social:hover{
    opacity:1!important;
    transition:.2s ease all;
}

.member3{ 
    opacity:1;
    transition: .1s all ease;
    filter:grayscale(1);
    overflow:hidden;
    background:black;
}



.cv-member3:hover .member3{
    filter:grayscale(0);
    transform:scale(1.0);
    transition: .1s all ease;
    opacity:0.2;
}

.member-frame-2{
    border:1px solid rgb(221, 221, 221);
}



.member-social {
    z-index:3;
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:.1s ease all;
    backdrop-filter:blur(2px);
}

.member-social img{
    opacity:0;
    width:24px;
    height:auto;
    user-select:none;
}


#member {
    width:100%;
    height:auto;
    cursor:pointer;
}


#member-name {
    width:100%;
    margin-top:10px;
    text-align:center;
    font-size:0.8rem;
    font-weight: 700;
    font-family: "Poppins", "Murecho", sans-serif;
}

#member-name-2 {
    width:100%;
    margin-top:10px;
    text-align:center;
    font-size:0.7rem;
    font-weight: 700;
    font-family: "Poppins", "Murecho", sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
}

#first {
    text-decoration:underline;
}

#member img{
    width:100%;
    height: auto;
    filter:grayscale(1);
    transition: .1s all ease;
}

.member-frame {
    overflow:hidden;
    position:relative;
    border:1px solid rgb(206, 206, 206);
}

#kuro {
    background:rgb(255, 255, 255);
    width:99%;
    height:99%;
    position:absolute;
    z-index:-1;
    top:0.5%;
    left:0.5%;
    border-radius:999px;
}

#kuro2 {
    background:rgb(255, 255, 255);
}

.member-social-2{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:3;
    opacity:0;
    transition: .1s all ease;
    backdrop-filter:blur(2px)
}

.member-frame-img{
    transform:scale(1.01);
    filter:grayscale(1);
    transition: .1s all ease;
    opacity:1; 
}

.member-frame:hover .member-frame-img{
    transform:scale(1.00);
    filter:grayscale(0);
    transition: .1s all ease;
    opacity:0.5;
}

.member-frame:hover .member-social-2{
    opacity:1;
}


.member-social-2 img{
    width:100px!important;
    height: auto!important;
}


.row{
    display:flex;
    flex-flow:column nowrap;
    width:100%;
    position:relative;
    background:white;
}

.row-in{
    display:grid;
    grid-template-columns: calc(23% - 40px) calc(77% - 40px);     
    padding-top:40px;
    padding-bottom:40px;
    margin-left:50px;
    margin-right:50px;
    gap:80px;
    width:calc(100% - 100px);    
    border-bottom:1px solid rgb(231, 231, 231);
}

.row-img{
    width:100%;
}


.row-info{
    width:100%;
    display:flex;
    gap:15px;
    flex-flow:column nowrap;
}

.event-main{
    display:flex;
    gap:10px;
    flex-flow:column nowrap;
}

.event-name{
    font-size:1.5rem;
    font-weight:800;
}

.event-date{
    font-size:0.8rem;
    color:gray;
}

.event-location{
    font-size:0.9rem;
}

.event-extra{
    font-size:0.9rem;
}


.row-img img{
    width:100%;
    height: auto;
}


.event-links span{
    text-decoration:underline!important;
    cursor:pointer;
}

#member-name-2{
    white-space:nowrap;
}

@media (min-width: 300px) and (max-width: 1200px) {

    .social{
        justify-content:center;
        margin-top:0px;
    }

    body{
        font-size:0.8rem;
    }

    .topbar-wrap{
        width:90%!important;
    }

    .footer-wrap{
        width:90%!important;
    }

    .special-wrap{
        margin-bottom:20px;
    }

    .special-wrap{
    width:calc(100% - 60px);
    margin:0 auto;
    margin-bottom:90px;
    height: auto;
    padding:50 30 50px;
    color:rgb(44, 44, 44);
    position:relative;
    }

    .backpage{
        padding-top:0px;
    }

    .divide{
        grid-template-columns:100%;
        overflow:hidden;
    }

    .title{
        width:auto;
    }

    .grid-index{
        grid-template-columns: 50% 50%;
    }

    .header{
        height:80px;
        opacity:0;
    }

    .wrap{
        width:100%;
    }
    
    .number{
        display:none;
    }

    .navlist{
        display:none;
    }

    .language-bar{
        display:none;
    }

    .language-button{
        display:none;
    }

    .news-type{
        display:none;
    }

    .angles{
        opacity:0.2;
    }

    .middle{
        width:90%;
    }

    .members2 {
    display:grid;
    grid-template-columns: 20% 20% 20% 20%;
    column-gap:6.66%;
    row-gap:30px;
    }

    #log{
        display:none;
    }

    .divide2 {
        grid-template-columns:100%;
        row-gap:30px;
    }

    .divide2 h2{
        height:30px;
    }

    .divide3{
    display:grid;
    grid-template-columns: 50% 50%;
    height:max-content;
    text-align:center;

}.divide3{
    width:100%;
    display:grid;
    grid-template-columns: 50% 50%;
    align-items:center;
    justify-content:center;
}

#desc{
    display:none;
}
}