@charset "utf-8";


/* MAIN */
.top-mainwrap{height: 110vh;height: 110svh;position: relative;display: flex;justify-content: center;align-items: center;background-size: cover;background-position: center;background-repeat: no-repeat;}
.top-mainwrap::after{position: absolute;content: '';left: 0;bottom: 0;z-index: 2;width: 100%;height: 8vh;background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 62%,rgba(0,0,0,1) 100%);}
.top-main-inner{position: relative;z-index: 5;width: 70%;max-width: 885px;margin-top: 10vh;}
.top-main-logo{width: 100%;max-width: 1290px;margin: auto;}
.top-main-message{width: 52%;max-width: 671px;margin: 3.625rem auto 0;}
.top-main-ico{width: 52px;margin: 2.62rem auto 0;}
.top-wrap .top-mainvideo{max-width: 100%;height: 100%;position: absolute;z-index: 1;-o-object-fit: cover;object-fit: cover;}
.top-wrap .top-mainvideo.sp{display: none;top: 0;}
@media screen and (max-width: 768px) {
	.top-mainwrap{background-size: cover;-moz-background-size:  cover;-webkit-background-size:  cover;-o-background-size: cover;-ms-background-size:  cover;background-repeat: no-repeat;}
	.top-mainwrap::after{height: 40vh;}
	.top-main-logo{width: 80%;max-width: 300px;}
	.top-main-inner{max-width: 393px;margin-top: 8vh;}
	.top-wrap .top-mainvideo.pc{display: none;}
	.top-wrap .top-mainvideo.sp{display: block;height: 80%;}
}
@media screen and (max-width: 528px) {
	.top-mainwrap{height: 100vh;height: 100svh;}
	.top-mainwrap::after{height: 75vh;}
	.top-main-inner{width: 90%;}
	.top-wrap .top-mainvideo.sp{height: 60%;}
}
@media (max-width: 528px) and (max-height: 700px) {
}

/* STORE */
.section-store{position: relative;padding-top: 9rem;}
.top-store .glow{top: -10rem;left: -20%;width: 80%;z-index: 3;}
.view-pc .top-storelist{border-top: solid;}
.view-pc .top-storelist .top-store{border-bottom: solid;}
.view-pc .top-storelist .top-store:nth-child(odd){border-right: solid;}
.view-pc .top-storelist,.view-pc .top-storelist .top-store,.view-pc .top-storelist .top-store:nth-child(odd){border-color: #fff;border-width: 1px;}
.top-storelist{position: relative;z-index: 5;display: flex;flex-wrap: wrap;}
.top-storelist .top-store{position: relative;width: 50%;height: 35vw;padding: 22px 0;overflow: hidden;}
.top-storelist .top-store a{position: relative;z-index: 6;height: 100%;display: flex;flex-direction: column;align-items: center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color: #fff;}
.top-storelist .top-store:before {position: absolute;z-index: 4;content: '';left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(60,60,91,.4);mix-blend-mode: multiply;}
.top-storelist .top-store .top-store-bg{display: block;position: absolute;z-index: 2;top: 0;height: 100%;transition: all 300ms 0s ease;}
.top-storelist .top-store a p{font-size: 1rem;}
.top-storelist .top-store a p,.top-storelist .top-store a img{position: relative;z-index: 10;}
.top-storelist .top-store.sgclub a img{max-width: 140px;}
.top-storelist .top-store.sglow a img{max-width: 136px;}
.top-storelist .top-store.lequio a img{max-width: 301px;}
.top-storelist .top-store.ash a img{max-width: 200px;}
.top-storelist .top-store.ocho a img{max-width: 210px;}
.top-storelist .top-store.speaklow a span{position: relative;z-index: 2;padding: 1em;background: #fff;border: 1px solid #707070;opacity: 0.7;}
.top-storelist .top-store.speaklow a span img{position: static;width: 260px;}
.top-storelist .top-store.sober a img{max-width: 210px;}
.top-storelist .top-store.oddcouple a img{max-width: 301px;}
.top-storelist .top-store.tavern a img{max-width: 140px;}
.top-storelist .top-store.swirl a img{max-width: 160px;}
@media (any-hover: hover) {
	.top-storelist .top-store:hover .top-store-bg{height: 106%;width: 106%;margin-top: -3%;margin-left: -3%;}
}
@media screen and (max-width: 768px) {
	.slide-store{position: relative;padding-bottom: 4.5rem;}
    .top-store .glow{top: -10rem;left: -40%;width: 170%;}
    .top-storelist{display: block;}
    .top-storelist .top-store{width: 100%;height: 380px;}
	.slide-store .slick-num{display: block;position: absolute;bottom: 0;right: 3em;}
	.slide-store .slick-num{font-size: 2rem;}
	.slide-store .slide-arrow{width: 1.3rem;}
	.slide-store .slide-arrow{position: absolute;bottom: 0;}
	.slide-store .slide-arrow.prev-arrow{right: 15rem;}
	.slide-store .slide-arrow.next-arrow{right: 22px;}
}
@media screen and (max-width: 490px) {
    .top-storelist .top-store .top-store-bg{width: auto;margin-left: -20%;}
    .top-store .glow{top: -8rem;}
}


/* TEAM */
.top-team{position: relative;padding-top: 9rem;}
.top-team .glow{top: -10%;left: -20%;width: 80%;transform: rotate(85deg);}
.top-team-list{position: relative;z-index: 5;display: flex;flex-wrap: wrap;}
.top-team-list .top-team-item{position: relative;width: 33.33%;height: 33vw;overflow: hidden;}
.top-team-list .top-team-item a{display: block;}
.top-team-list .top-team-item a img{display: block;width: 100%;transition: all .5s 0s ease;}
.top-team-list .top-team-item span{position: absolute;bottom: 0;left: 0;right: 0;font-size: 1rem;padding: 1.3em 0 1.3em 1.3em;text-align: left;color: #fff;background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);}
.top-team-list .top-team-item p{font-size: 1em;margin-bottom: .3em;}
.top-team-list .top-team-item h4{font-size: 2em;}
@media (any-hover: hover) {
	.top-team-list .top-team-item a:hover img{width: 110%;margin-left: -5%;margin-top: -5%;opacity: .7;}
}
@media screen and (min-width: 1110px) {
	.top-team-list .top-team-item{height: 369.95px;}
}
@media screen and (max-width: 768px) {
	.top-team .glow{top: 0;left: -40%;width: 120%;transform: rotate(0deg);}
	.top-team .subtxt{margin-bottom: 4rem;}
	.slide-team{position: relative;padding-bottom: 4.5rem;}
	.top-team-list{display: block;}
	.top-team-list .top-team-item{height: 88vw;margin-left: 1vw!important;margin-right: 1vw!important;}
	.slide-team .slick-num{display: block;position: absolute;bottom: 0;right: 0;left: 0;text-align: center;z-index: 2;}
	.slide-team .slick-num{font-size: 2rem;}
	.slide-team .slide-arrow{width: 1.3rem;}
	.slide-team .slide-arrow{position: absolute;bottom: 0;z-index: 10;}
	.slide-team .slide-arrow.prev-arrow{left: calc(50% - 7rem);}
	.slide-team .slide-arrow.next-arrow{right: calc(50% - 7rem);}
	.top-team-list .top-team-item span{padding: 1.5em 0 1.3em 1.5em;}

}


/* SGMISSION */
.top-sgmission{position: relative;padding-top: 9rem;}
.top-sgmission .btn-more{width: 17em;margin: 3rem auto 0;}


/* PRODUCTS */
.top-products{padding-top: 9rem;}
.top-products .btn-more{width: 17em;margin: 3rem auto 0;}


/* GOKAN */
.top-gokan{padding-top: 9rem;}
.top-gokan .subtxt.long{text-align: left;}

/* RECRUIT */
.top-recruit{position: relative;padding-top: 9rem;padding-bottom: 5.56rem;}
.top-recruit .top-recruit-inner .btn-more{margin: 3rem auto 0;width: 17em;display: block;}
.top-recruit-inner.fadeout::before,.top-recruit-inner.fadeout::after{height: 0;}
@media screen and (max-width: 768px) {
	.top-recruit .top-recruit-inner{position: relative;height: 100vw;background-image: url("/image/sipguzzle/top/recruit-bg.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;}
	.top-recruit .top-recruit-inner .btn-more{position: absolute;bottom: 1em;left: 0;right: 0;margin: auto;}
	.top-recruit .subtxt{margin-bottom: 0;}
	.top-recruit-inner.fadeout::before,.top-recruit-inner.fadeout::after{height: 15%;}
}
@media screen and (max-width: 600px) {
	.top-recruit .top-recruit-inner{height: 85vw;}
	.top-recruit .top-recruit-inner .btn-more{bottom: -1rem;}
}

/* AWARD */
.top-award{padding: 9rem 0 1rem;}
.top-award .inner{background-image: url("/image/sipguzzle/top/award-bg.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;}
.top-award .content{position: relative;z-index:6;}
.top-award h3{font-size: 3.75rem;line-height: 1.5em;margin-bottom: 3.43rem;}
.top-award .award-medal-list{display: flex;flex-wrap: wrap;justify-content: center;gap: 2rem;margin: 0 auto 6rem;max-width: 700px;align-items: start;}
.top-award .award-medal-list img{display: block;width: calc(50% - 1rem);max-width: 300px;}
.top-award .award-list{font-size: 1.25rem;line-height: 2em;}
@media screen and (min-width: 1600px) {
	.top-award.fadeout::before,.top-award.fadeout::after{height: 35%;}
}
@media screen and (max-width: 768px) {
	.top-award h3{font-size: 2.75rem;}
}
@media screen and (max-width: 490px) {
	.top-award h3{font-size: 2rem;}
}
@media screen and (max-width: 300px) {
	.top-award .award-medal-list{display: block;}
	.top-award .award-medal-list img{display: block;width: 100%;margin: 0 auto 50px;}
}
@media screen and (min-width: 1100px) {
	.top-gokan{background-position: right -30vw top -3rem;background-size: 130% auto;}
}


/* NEWS */
.top-news{position: relative;padding-top: 9rem;}
.top-news h2.contents-tit{margin-bottom: 6.8125rem;}
.news-list{position: relative;z-index: 2;margin-bottom: 4rem;}
.news-list li{margin-bottom: 1.625rem;}
.top-news .glow.view-pc{display: block;left: -20%;top: -10rem;width: 90%;transform: rotate(5deg);}
.top-news .glow.view-sp{display: none;left: -70%;top: -10rem;width: 160%;transform: rotate(20deg);z-index: 1;}
@media screen and (min-width: 1600px) {
	.top-news .glow.view-pc{width: 60vw;max-width: 2022px;}
}
@media (any-hover: hover) {
	.news-list li a:hover{opacity: .8;transition: all 300ms 0s ease;}
}
@media screen and (max-width: 768px) {
	.top-news .glow.view-pc{display: none;}
	.top-news .glow.view-sp{display: block;}
	.top-news .btnwrap{text-align: center;}
}


/* ABOUT */
#about{margin-bottom: 8rem;}
.top-about{position: relative;padding-top: 9rem;}
.top-about .glow.view-sp{position: absolute;display: none;z-index: 1;}
.top-about .about-table{margin-bottom: 4.625rem;}
.top-about table{position: relative;z-index: 5;}
.top-about table th{text-align: left;width: 20rem;vertical-align: top;font-weight: normal;}
.top-about table th span{display: none;}
.top-about hr{width: 11em;height: 3px;background: #fff;margin: 1.6rem 0;}
@media screen and (max-width: 768px) {
	.top-about .glow.view-sp{display: block;right: -70%;bottom: -5rem;width: 150%;transform: rotate(-20deg);}
	.top-about .contents-tit{margin-bottom: 6rem;}
	.top-about .subtxt{text-align: left;}
	.top-about table tr{margin-bottom: 1em;}
	.top-about table tr,.top-about table th,.top-about table td{display: block;}
	.top-about hr{display: none;}
	.top-about table th span{display: inline;}
}