@charset "utf-8";

/*linkBtn*/
.linkBtn{
    display: flex;
    justify-content: center;
    position: relative;
}
.linkBtn__link{
    text-decoration: none;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.linkBtn__txt{
    color: #000;
    font-size: min(calc(30 / var(--vw-min) * 100vw),30px);
    font-family: var(--font-en);
    font-weight: 500;
    transition: color .4s ease;
}
.linkBtn__arrow{
    width: min(calc(12 / var(--vw-min) * 100vw),12px);
    height: min(calc(13 / var(--vw-min) * 100vw),13px);
    -webkit-mask: url(../img/common/icon/ic_arrow.svg) no-repeat center center / contain;
    mask: url(../img/common/icon/ic_arrow.svg) no-repeat center center / contain;
    background-color: #000;
    transition: all .4s ease;
    position: absolute;
    right: -15%;
    top: 0;
    bottom: 0;
    margin: auto;
}

@media screen and (hover:hover) and (pointer: fine){
	.linkBtn:hover .linkBtn__txt{
        color: var(--color-main);
    }
    .linkBtn:hover .linkBtn__arrow{
        background-color: var(--color-main);
        right: -18%;
    }
}

/*---------------------
visualArea
----------------------*/
.visualArea{
    height: 100vh;
    min-height: min(calc(620 / var(--vw-min) * 100vw),620px);
    position: relative;
}
.visualArea__inner{
    display: flex;
}
@media screen and (max-width:767px){
    .visualArea{
        height:unset;
        min-height: unset
    }
    .visualArea__inner{
        height: calc(900 / var(--vw-min) * 100vw);
    }
}
/* visual > img */
.visualImgBlock{
    width: 50%;
    display: flex;
    height: 100vh;
    min-height: min(calc(620 / var(--vw-min) * 100vw),620px);
}
.imgBox{
    display: flex;
    width: 100%;
    background-color: #f8f9f4;
    justify-content: center;
}
.imgBox img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media screen and (max-width:767px){
	.visualImgBlock{
        width: 100%;
        height:100%;
    }
    .imgBox{
        display: block;
        width: 100%;        
    }
}
/* visual > txt */
.visualTxtBlock{
    width: 50%;
    display: flex;
    position: relative;
    height: 100vh;
    min-height: min(calc(620 / var(--vw-min) * 100vw),620px);
    background-color: #eceadd;
}
@media screen and (max-width:767px){
	.visualTxtBlock{
        width: 100%;
        display: flex;
        position: absolute;
        top: 0;
        bottom: 0;
        height: calc(900 / var(--vw-min) * 100vw);
        min-height: unset;
        background-color: transparent;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        padding-bottom: calc(70 / var(--vw-min) * 100vw);
    }
}
/* visual > logo */
.visualTxt__logo{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.visualTxt__logo img{
    width: 100%;
    height: auto;
}
.visualTxt__logo._visual1{
    width: calc(430 / var(--vw-min) * 100vw);
    height: calc(250 / var(--vw-min) * 100vw);
}
@media screen and (max-width:767px){
	.visualTxt__logo{
        position: relative;
        top: unset;
        bottom: unset;
        left: unset;
        right: unset;
        margin: unset;
    }
    .visualTxt__logo._visual1{
        width: calc(633 / var(--vw-min) * 100vw);
        height: calc(236 / var(--vw-min) * 100vw);
    }
}


/* visual > date */
.visualTxt__date{
    position: absolute;
    top: calc(50% + min(calc(190 / var(--vw-min) * 100vw),190px));
    left: 0;
    right: 0;
    margin: auto;
}
.visualTxt__date img{
    width: 100%;
    height: auto;
}
.visualTxt__date._visual1{
    width: min(calc(298 / var(--vw-min) * 100vw),298px);
    height:  min(calc(32 / var(--vw-min) * 100vw),32px);
}
@media screen and (max-width:767px){
	.visualTxt__date{
        position: relative;
        top: unset;
        bottom: unset;
        left: unset;
        right: unset;
        margin: unset;
    }
    .visualTxt__date._visual1{
        width: calc(362 / var(--vw-min) * 100vw);
        height:calc(38 / var(--vw-min) * 100vw);
    }
}



.visual__more{
    width: 100%;
    position: absolute;
    bottom: min(calc(60 / var(--vw-min) * 100vw),60px);
}
.visual__more .linkBtn__arrow{
    position: relative;
    margin-left: min(calc(5 / var(--vw-min) * 100vw),5px);
}
@media screen and (max-width:767px){
    .visual__more{
        width: calc(230 / var(--vw-min) * 100vw);
        height: calc(85 / var(--vw-min) * 100vw);
        border-radius: calc(50 / var(--vw-min) * 100vw);
        background-color: #FFF;
        position: absolute;
        bottom:unset;
        top: calc(20 / var(--vw-min) * 100vw);
        right: calc(20 / var(--vw-min) * 100vw);
    }
    .visual__more .linkBtn__txt{
        color: var(--color-red);
        font-size: calc(40 / var(--vw-min) * 100vw);
    }
    .visual__more .linkBtn__arrow{
        margin-left: 0;
        background-color: var(--color-red);
        right: -5%;
    }
}

/* visual__logo */
.visual__logo{
    width: min(calc(124 / var(--vw-min) * 100vw),124px);
    height: min(calc(124 / var(--vw-min) * 100vw),124px);
    background-color: #FFF;
    border-radius: 100px;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
}
.visual__logo::after{
    width: min(calc(96 / var(--vw-min) * 100vw),96px);
    height: min(calc(65 / var(--vw-min) * 100vw),65px);
    background: url(../img/common/logo/logo_bl.svg) no-repeat center center / contain;
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
}
@media screen and (max-width:767px){
    .visual__logo{
        position: absolute;
        width: calc(85 / var(--vw-min) * 100vw);
        height:calc(85 / var(--vw-min) * 100vw);
        top:calc(20 / var(--vw-min) * 100vw);
        left: calc(50 / var(--vw-min) * 100vw);
        right: unset;
        bottom: unset;
        z-index: 10;
    }
    .visual__logo::after{
        width: calc(66 / var(--vw-min) * 100vw);
        height: calc(44 / var(--vw-min) * 100vw);
    }
}
/*------------------------------------------
CONTENTS
-------------------------------------------*/

.section__ttl{
    font-size: min(calc(80 / var(--vw-min) * 100vw),80px);
    line-height: 0.8;
    opacity: 0;
    transition: all .4s ease;
    transform: translateX(-40px);
}
.is-ani .section__ttl{
    opacity: 1;
    transform: translateX(0);
}
.section__ttl .font-en{
    transform-origin: left;
}
@media screen and (max-width:767px){
    .section__ttl{
        line-height: 1;
        margin-right: calc(20 / var(--vw-min) * 100vw);
    }
}
.section__contents{
    opacity: 0;
    transition: all .4s ease;
    transition-delay: .4s;
    transform: translateY(40px);
}
.is-ani .section__contents{
    opacity: 1;
    transform: translateY(0);
}
/*---------------------
newsArea
----------------------*/
.newsArea{
    clip-path: inset(0);
}
.news__bg{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(../img/top/news/news_bg.jpg) no-repeat center center / cover;
    z-index: -1;
}
.newsArea__inner{
    display: flex;
    padding: min(calc(100 / var(--vw-min) * 100vw),100px) 0 min(calc(100 / var(--vw-min) * 100vw),100px) min(calc(60 / var(--vw-min) * 100vw),60px);
}
.news__ttlBlock{
    width: min(calc(270 / var(--vw-min) * 100vw),270px);   
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media screen and (max-width:767px){
    .news__bg{
        background: url(../img/top/news/news_bg_sp.jpg) no-repeat center center / cover;
    }
    .newsArea__inner{
        flex-direction: column;
        padding: calc(94 / var(--vw-min) * 100vw) 0 calc(50 / var(--vw-min) * 100vw) calc(50 / var(--vw-min) * 100vw);
    }
    .news__ttlBlock{
        width: 100%;
        flex-direction: row;
        align-items: flex-end;
        margin-bottom: calc(48 / var(--vw-min) * 100vw);
    }
}

.news__more{
    margin-top: min(calc(28 / var(--vw-min) * 100vw), 28px);
}

/* NEWS > CONTENTS */
.newsLists{
    display: flex;
    flex-direction: column;
}
/* newsItem */
.newsItem:not(:last-child){
    margin-bottom: min(calc(50 / var(--vw-min) * 100vw),50px);
}
.newsItem__link {
    width: 100%;
    display: flex;
    flex-direction: row;
    text-decoration: none;
}
/* img */
.newsItem__imgBlock{
    width: min(calc(230 / var(--vw-min) * 100vw),230px);   
    height:min(calc(138 / var(--vw-min) * 100vw),138px); 
    overflow: hidden;
    position: relative;   
}
.newsItem__img{
   position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%; 
    height:min(calc(138 / var(--vw-min) * 100vw),138px); 
    border-radius: min(calc(10 / var(--vw-min) * 100vw), 10px);
    overflow: hidden;
    margin: auto;
}
.newsItem__img img{
    width: 100%; 
    height:100%; 
    object-fit: cover;
    transition: all .4s ease;
}
@media screen and (hover:hover) and (pointer: fine){
    .newsItem__link:hover .newsItem__img img{
        transform: scale(1.06);
    }
}
/* .newsItem > ttl */
.newsItem__ttlBlock{
    width: calc(100vw - min(calc(560 / var(--vw-min) * 100vw),560px));
    height:min(calc(138 / var(--vw-min) * 100vw),138px); 
    padding-top: min(calc(54 / var(--vw-min) * 100vw),54px) ;
}
@media screen and (max-width:767px){
    .newsItem__ttlBlock{
        width: calc(100vw - calc(230 / var(--vw-min) * 100vw));
        padding-top: calc(26 / var(--vw-min) * 100vw);
    }
}
.newsItem__date{
    position: relative;
    display: block;
    line-height: 1;
    padding-left: min(calc(30 / var(--vw-min) * 100vw),30px);
    margin-bottom: min(calc(24 / var(--vw-min) * 100vw),24px) ;
}
.newsItem__date::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 1px;
	background-color:#000;
    z-index: -1;
}
.newsItem__date::before{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 0%;
	height: 1px;
	background-color: var(--color-main);
}
.newsItem__ttl{
    font-size: min(calc(20 / var(--vw-min) * 100vw),20px);
    padding-left: min(calc(30 / var(--vw-min) * 100vw),30px);
    line-height: 1;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    width: calc(100% - min(calc(120 / var(--vw-min) * 100vw),120px));
}
@media screen and (max-width:767px){
   .newsItem__ttl{
        font-size: calc(24 / var(--vw-min) * 100vw);
        line-height: unset;
    }
}
/* news__more */
.news__more .font-en{
    transform-origin: 0;
}
.news__more .font-en{
    font-size: min(calc(20 / var(--vw-min) * 100vw),20px);
}
.news__more .linkBtn__arrow {
    width: min(calc(8 / var(--vw-min) * 100vw),8px);
    height: min(calc(9/ var(--vw-min) * 100vw), 9px);
}
/**/
.ic_logo{
	display: block;
	position: absolute;
	right: min(calc(30 / var(--vw-min)* 100vw), 30px);
	top: min(calc(16 / var(--vw-min) * 100vw), 16px);
	bottom: 0;
	margin: auto;
	background-color: #000;
	border-radius: 50px;
	width: min(calc(36 / var(--vw-min)* 100vw), 36px);
	height: min(calc(36 / var(--vw-min)* 100vw), 36px);
}
.ic_logo::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: min(calc(26 / var(--vw-min)* 100vw), 26px);
	height: min(calc(17 / var(--vw-min)* 100vw), 17px);
	-webkit-mask: url(../img/common/icon/ic_logo.svg) no-repeat center center/ contain;
	mask: url(../img/common/icon/ic_logo.svg) no-repeat center center/ contain;
	background-color: var(--color-red);
}
/*link hover*/
@media screen and (hover:hover) and (pointer: fine){
    .newsItem__link:hover .newsItem__date::before{
        width: 100%;
        transition: all .3s ease;
    }
    .newsItem__link:hover .ic_logo{
        background-color: var(--color-main);
        transition: all .2s ease;
        transition-delay: .2s;
    }
    .newsItem__link:hover  .ic_logo::after{
        background-color: #FFF;
        transition: all .2s ease;
        transition-delay: .2s;
    }
}
/*---------------------
aboutArea
----------------------*/
.aboutArea__inner {
    display: flex;
    padding: min(calc(90 / var(--vw-min) * 100vw), 90px) 0 min(calc(100 / var(--vw-min) * 100vw), 100px) min(calc(60 / var(--vw-min) * 100vw), 60px);
}
.about__ttlBlock {
    width: min(calc(270 / var(--vw-min) * 100vw), 270px);
    margin-top: min(calc(15 / var(--vw-min) * 100vw), 15px);
}
@media screen and (max-width:767px){
    .aboutArea__inner {
        flex-direction: column;
        padding: calc(94 / var(--vw-min) * 100vw) calc(50 / var(--vw-min) * 100vw);
    }
    .about__ttlBlock{
        width: 100%;
        margin-bottom: calc(48 / var(--vw-min) * 100vw);
        margin-top: unset;
    }
}

/* about > contents */
.about__contentsBlock{
    width: calc(100vw - min(calc(330 / var(--vw-min) * 100vw),330px));
    padding-right: min(calc(60 / var(--vw-min) * 100vw), 60px);
}
.about__contents-ttl{
    font-size: min(calc(60 / var(--vw-min) * 100vw), 60px);
    line-height: min(calc(78 / var(--vw-min) * 100vw), 78px);
    font-weight: 700;
    margin-bottom: min(calc(48 / var(--vw-min) * 100vw), 48px);
}
.about__contents-txt p{
    font-weight: 300;
    font-size: min(calc(30 / var(--vw-min) * 100vw), 30px);
    line-height: min(calc(58 / var(--vw-min) * 100vw), 58px);
}
@media screen and (max-width:767px){
    .about__contentsBlock{
        width: 100%;
        padding-right: 0;
    }
}
/*---------------------
profileArea
----------------------*/
.profileArea__inner{
    padding: min(calc(100 / var(--vw-min) * 100vw), 100px) 0 0;
}
@media screen and (max-width:767px){
   .profileArea__inner{
        padding: 0;
    }
}

.profile__ttlBlock{
    padding-left: min(calc(60 / var(--vw-min) * 100vw), 60px);
    margin-bottom: min(calc(30 / var(--vw-min) * 100vw), 30px);
}
.profileItem{
    display: flex;
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    font-weight: 300;
    border-bottom: 1px solid #dcdcdc;
    padding: min(calc(30 / var(--vw-min) * 100vw), 30px);
}
.profileItem__ttl{
    width:  min(calc(320 / var(--vw-min) * 100vw), 320px);
}
.nameWrap{
    position: relative;
}
.nameWrap-logo{
    width: min(calc(97 / var(--vw-min) * 100vw), 97px);
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
@media screen and (max-width:767px){
    .profileItem{
        flex-direction: column;
        font-size:calc(24 / var(--vw-min) * 100vw);
    }
    .profileItem__ttl{
        width:  100%;
        margin-bottom: calc(20 / var(--vw-min) * 100vw);
    }
}
/* map */
.profile__map{
    display: flex;
}
.profile__map iframe{
    width: 100%;
    height: min(calc(560 / var(--vw-min) * 100vw), 560px);
}
@media screen and (max-width:767px){
   .profile__map iframe{
        height: calc(430 / var(--vw-min) * 100vw);
    }
}


/*---------------------
worksArea
----------------------*/
.worksArea{
    clip-path: inset(0);
}
.works__bg{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(../img/top/works/works_bg.jpg) no-repeat center center / cover;
    z-index: -1;
}
.worksArea__inner{
    padding: min(calc(134 / var(--vw-min) * 100vw), 134px) 0 min(calc(110 / var(--vw-min) * 100vw), 110px);
    display: flex;
    flex-direction: row;
}
@media screen and (max-width:767px){
    .works__bg{
        background: url(../img/top/works/works_bg_sp.jpg) no-repeat center center / cover;
    }
    .worksArea__inner{
        padding:calc(92 / var(--vw-min) * 100vw) 0;
        flex-direction: column;
    }
}


.works__ttlBlock{
    width: min(calc(330 / var(--vw-min) * 100vw), 330px);
    padding-left: min(calc(60 / var(--vw-min) * 100vw), 60px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media screen and (max-width:767px){
    .works__ttlBlock{
        width: 100%;
        padding-left: calc(50 / var(--vw-min) * 100vw);
        margin-bottom: calc(48 / var(--vw-min) * 100vw);
        flex-direction: row;
        align-items: flex-end;
    }
}



/* works__more */
.works__more{
    margin-top: min(calc(28 / var(--vw-min) * 100vw), 28px);
}
.works__more .font-en{
    transform-origin: 0;
}
.works__more .font-en{
    font-size: min(calc(20 / var(--vw-min) * 100vw),20px);
}
.works__more .linkBtn__arrow {
    width: min(calc(8 / var(--vw-min) * 100vw),8px);
    height: min(calc(9/ var(--vw-min) * 100vw), 9px);
}
@media screen and (max-width:767px){
    .works__more{
        margin-top: 0;
    }
}

/* WORKS > CONTENTS*/
.works__contentsBlock{
    width: calc(100vw - min(calc(330 / var(--vw-min) * 100vw),330px));
    padding-right: min(calc(60 / var(--vw-min) * 100vw), 60px);
}
@media screen and (max-width:767px){
    .works__contentsBlock{
        width: 100%;
        padding:0 calc(50 / var(--vw-min) * 100vw);
    }
}
.worksItemLists{
    display: flex;
}
.worksItem{
   /* width: min(calc(247 / var(--vw-min) * 100vw), 247px);
    margin-left:min(calc(28 / var(--vw-min) * 100vw), 28px);*/
    width: 30%;
    margin-left: 3%;
}
@media screen and (max-width:767px){
    .worksItem:not(:first-child){
        display: none;
    }
    .worksItem{
        width: calc(500 / var(--vw-min) * 100vw);
        margin:0 auto;
    }
}
.worksItem__link{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
.worksItem__link._cs{
    pointer-events: none;
}
.worksItem__img{
    width: 100%;
    padding-top: 140%;
    position: relative;
    overflow: hidden;
    border-radius: min(calc(10 / var(--vw-min) * 100vw),10px);
    margin-bottom: min(calc(15 / var(--vw-min) * 100vw), 15px);
}
.worksItem__img img{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .4s ease;
}
.worksItem__ttl{
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    font-weight: 500;
    text-align: center;
    line-height: 1.6;
}
@media screen and (max-width:767px){
    .worksItem__ttl{
        font-size: calc(30 / var(--vw-min) * 100vw);
    }
}
@media screen and (hover:hover) and (pointer: fine){
    .worksItem__link:hover .worksItem__img img{
        transform: scale(1.08);
    }
}
/*---------------------
recruitArea
----------------------*/
.recruitArea__inner{
    padding: min(calc(100 / var(--vw-min) * 100vw), 100px) 0 min(calc(60 / var(--vw-min) * 100vw), 60px);
}
.recruit__ttlBlock{
    padding-left: min(calc(60 / var(--vw-min) * 100vw), 60px);
    margin-bottom: min(calc(30 / var(--vw-min) * 100vw), 30px);
}

.recruit__contentsBlock{
    padding: 0 min(calc(60 / var(--vw-min) * 100vw), 60px);
}
.messegeBox{
    font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
    line-height: min(calc(58 / var(--vw-min) * 100vw), 58px);
}
@media screen and (max-width:767px){
    .messegeBox{
        font-size:calc(28 / var(--vw-min) * 100vw);
    }
}
.messege__txt{
    font-weight: 300;
}
.messege__name{
    display: block;
    text-align: right;
    font-weight: 500;
    margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.recruitBtnWrap{
    margin-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
    display: flex;
    justify-content: center;
}
.recruitBtn{
    width:min(calc(340 / var(--vw-min) * 100vw), 340px);
    height:min(calc(70 / var(--vw-min) * 100vw), 70px);
    background-color: #000;
    color: #FFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: min(calc(40 / var(--vw-min) * 100vw), 40px);
    transition: all .4s ease;
}
@media screen and (hover:hover) and (pointer: fine){
	.recruitBtn:hover{
        background-color:var(--color-main);
    }
}
@media screen and (max-width:767px){
    .recruitBtn{
        width:100%;
        height:calc(120 / var(--vw-min) * 100vw);
        border-radius: calc(80 / var(--vw-min) * 100vw);
        font-size: calc(28 / var(--vw-min) * 100vw);
    }
}
/*------------------------------------
* loading
-------------------------------------*/
#loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1002;
    background: #FFF;
    width: 100%;
    height: 100vh;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading__logo {
    width: min(calc(550 / var(--vw-min) * 100vw), 550px);
    height: min(calc(550 / var(--vw-min) * 100vw), 550px);
    width: 100vw;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    transition: all .3s linear;
    border-radius: 100%;
}
.loading__video{
    width: 250%;
    max-width: 1200px;
    height: 250%;
    width: 100%;
    height: 100%;
    transition: all .4s linear;
}
@media screen and (max-width:767px){
	#loading{
		height: 100svh;
	}
    .loading__logo {
        width: 100vw;
        height: 100vw;
    }
}

#loading.-ani{
    background-color: transparent;
    transition: background-color .2s ease;
    /*position: absolute;*/
}

#loading.-ani .loading__logo {
    border-radius: 100%;
    width: min(calc(124 / var(--vw-min) * 100vw),124px);
    height: min(calc(124 / var(--vw-min) * 100vw),124px);
    overflow: hidden;
}
#loading.-ani .loading__video{
    width: 270%;
    height: 270%;
}
@media screen and (max-width:767px){
    ._sc #loading.-ani .loading__logo {
        position: absolute;
        width: calc(85 / var(--vw-min) * 100vw);
        height:calc(85 / var(--vw-min) * 100vw);
        top:calc(20 / var(--vw-min) * 100vw);
        left: calc(50 / var(--vw-min) * 100vw);
        right: unset;
        bottom: unset;
        z-index: 10;
    }
    #loading.-ani .loading__logo {
        width: calc(85 / var(--vw-min) * 100vw);
        height:calc(85 / var(--vw-min) * 100vw);
        z-index: 10;
    }
}