@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@100..900&display=swap");
@keyframes btnOnTop {
0% {
top: -1rem;
transform: rotate(0deg);
}
75% {
top: 0;
transform: rotate(0deg);
}
100% {
top: 0;
transform: rotate(45deg);
}
}
@keyframes btnOnBottom {
0% {
top: 1rem;
transform: rotate(0deg);
}
75% {
top: 0;
transform: rotate(0deg);
}
100% {
top: 0;
transform: rotate(-45deg);
}
}
@keyframes btnOffTop {
0% {
top: 0;
transform: rotate(45deg);
}
25% {
top: 0;
transform: rotate(0deg);
}
100% {
top: -1rem;
transform: rotate(0deg);
}
}
@keyframes btnOffBottom {
0% {
top: 0;
transform: rotate(-45deg);
}
25% {
top: 0;
transform: rotate(0deg);
}
100% {
top: 1rem;
transform: rotate(0deg);
}
}
@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
/*--------------------
number
---------------------*/
/*--------------------
area
---------------------*/
html {
font-size: 62.5%;
}
@media screen and (max-width: 1440px) {
html {
font-size: 0.7320644217vw;
}
}
@media screen and (max-width: 749.98px) {
html {
font-size: 2.6666666667vw;
}
}
main {
overflow-x: hidden;
}
.subpage main {
padding-top: 8rem;
}
@media screen and (max-width: 749.98px) {
.subpage main {
padding-top: 6rem;
}
}
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
margin: 0;
}
img {
width: 100%;
height: auto;
}
a {
display: inline-block;
text-decoration: none;
color: #000;
}
p {
margin: 0;
}
figure {
margin: 0;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.menuon {
overflow: hidden;
}
.c-btn {
display: inline-block;
}
.c-btn.-arrow1 {
min-width: 21.2rem;
min-height: 4rem;
position: relative;
display: inline-flex;
align-items: center;
transition: all 0.3s ease 0s;
border: 2px solid #000;
border-radius: 0.5rem;
padding: 1rem 1rem 1rem 2.8rem;
overflow: hidden;
}
.c-btn.-arrow1:before {
content: "";
display: block;
width: 0;
height: 100%;
background-color: #000;
position: absolute;
top: 0;
left: 0;
z-index: 0;
transition: all 0.2s ease 0s;
}
.c-btn.-arrow1 span {
font-size: 1.4rem;
font-family: "Roboto", serif;
font-optical-sizing: auto;
font-weight: 700;
line-height: 1.2142857143;
letter-spacing: 0.02em;
position: relative;
z-index: 1;
}
.c-btn.-arrow1 i {
display: inline-block;
width: 3.6rem;
height: 3.6rem;
background-color: #000;
border-radius: 0.3rem;
margin-left: auto;
margin-right: 0;
position: relative;
overflow: hidden;
transition: all 0.3s ease 0s;
}
.c-btn.-arrow1 i:before, .c-btn.-arrow1 i:after {
content: "";
display: block;
width: 0.8rem;
height: 0.9rem;
aspect-ratio: 13/15;
background-color: #fff;
clip-path: polygon(25% 50%, 0 0, 100% 50%, 0% 100%);
position: absolute;
top: calc((100% - 0.9rem) / 2);
transition: all 0.3s ease 0s;
}
.c-btn.-arrow1 i:before {
right: calc((100% - 0.8rem) / 2);
}
.c-btn.-arrow1 i:after {
right: 100%;
}
@media (hover: hover) {
.c-btn.-arrow1:hover:before {
width: 100%;
}
.c-btn.-arrow1:hover span {
color: #fff;
}
.c-btn.-arrow1:hover i {
opacity: 1;
background-color: #fff;
}
.c-btn.-arrow1:hover i:before {
right: -1rem;
background-color: #000;
}
.c-btn.-arrow1:hover i:after {
opacity: 1;
right: calc((100% - 0.8rem) / 2);
background-color: #000;
}
}
.c-btn.-arrow2 {
display: inline-block;
width: 3.6rem;
height: 3.6rem;
background-color: transparent;
border-radius: 0.5rem;
margin-left: auto;
margin-right: 0;
overflow: hidden;
position: relative;
}
.c-btn.-arrow2:before, .c-btn.-arrow2:after {
content: "";
display: block;
width: 0.8rem;
height: 0.9rem;
aspect-ratio: 13/15;
background-color: #000;
clip-path: polygon(25% 50%, 0 0, 100% 50%, 0% 100%);
position: absolute;
top: calc((100% - 0.9rem) / 2);
transition: all 0.3s ease 0s;
}
.c-btn.-arrow2:before {
right: calc((100% - 0.8rem) / 2);
}
.c-btn.-arrow2:after {
right: 100%;
}
@media (hover: hover) {
.c-btn.-arrow2:hover {
opacity: 1;
}
.c-btn.-arrow2:hover:before {
right: -1rem;
}
.c-btn.-arrow2:hover:after {
opacity: 1;
right: calc((100% - 0.8rem) / 2);
}
}
.c-btn.-window01 {
min-width: 21.2rem;
min-height: 6rem;
position: relative;
display: inline-flex;
align-items: center;
transition: all 0.3s ease 0s;
border: 2px solid #000;
border-radius: 0.5rem;
padding: 1rem 2rem;
}
.c-btn.-window01 span {
font-size: 1.4rem;
line-height: 1.4285714286;
letter-spacing: 0.07em;
padding-right: 6rem;
position: relative;
}
.c-btn.-window01 span:after {
content: "";
display: block;
width: 1.5rem;
height: 1.5rem;
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 14.89/14.89;
position: absolute;
top: calc((100% - 1.5rem) / 2);
right: 0;
transition: all 0.3s ease 0s;
}
.c-btn.-login {
min-width: 21.2rem;
min-height: 6rem;
position: relative;
display: inline-flex;
align-items: center;
transition: all 0.3s ease 0s;
border: 2px solid #000;
border-radius: 0.5rem;
padding: 1rem 2rem;
}
.c-btn.-login span {
font-size: 1.4rem;
line-height: 1.4285714286;
letter-spacing: 0.07em;
padding-right: 6rem;
position: relative;
}
.c-btn.-login span:after {
content: "";
display: block;
width: 1.5rem;
height: 1.5rem;
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 18.3/17.1;
position: absolute;
top: calc((100% - 1.5rem) / 2);
right: 0;
transition: all 0.3s ease 0s;
}
.logo {
display: inline-block;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 199.87/17.887;
}
#header {
position: fixed;
width: 100%;
height: 8rem;
z-index: 110;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 749.98px) {
#header {
height: 6rem;
z-index: 110;
}
}
#header .header__pc {
height: 8rem;
padding-right: 8rem;
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 749.98px) {
#header .header__pc {
height: 6rem;
}
}
#header .header__pc-logo {
padding-left: 3rem;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-logo {
padding-left: 1.6rem;
}
}
#header .header__pc-logo a {
width: 23.6rem;
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 199.87/17.887;
transition: all 0.3s ease 0s;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-logo a {
width: 17.2rem;
}
}
#header .header__pc-nav {
padding-right: 2rem;
}
#header .header__pc-nav-top {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-nav-top {
display: none;
}
}
#header .header__pc-nav-top-btn {
min-width: 14.4rem;
height: 2.6rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 200rem;
letter-spacing: 0.12em;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease 0s;
}
#header .header__pc-nav-top-btn span {
font-size: 1.2rem;
font-weight: 500;
line-height: 1.4166666667;
position: relative;
padding-left: 1.8rem;
transition: all 0.3s ease 0s;
}
#header .header__pc-nav-top-btn span:after {
content: "";
display: block;
width: 1.1rem;
height: 1.1rem;
position: absolute;
top: calc((100% - 1.1rem) / 2);
left: 0;
transition: all 0.3s ease 0s;
}
#header .header__pc-nav-top-btn.-partner span:after {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 12.19/12.62;
}
#header .header__pc-nav-top-btn.-member span:after {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 18.32/22.48;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-nav .nav {
display: none;
}
}
#header .header__pc-nav .nav__list {
display: flex;
margin-top: 0.4rem;
}
#header .header__pc-nav .nav__item {
margin-left: 0.8rem;
}
#header .header__pc-nav .nav__item a {
padding: 0.4rem 0.8rem;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.4285714286;
letter-spacing: 0.12em;
color: #fff;
transition: all 0.3s ease 0s;
}
#header .header__pc-nav .burger {
width: 8rem;
height: 8rem;
border-left: 1px solid rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
transition: all 0.3s ease 0s;
z-index: 101;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-nav .burger {
width: 6rem;
height: 6rem;
}
}
#header .header__pc-nav .burger span {
display: inline-block;
width: 2.8rem;
height: 1px;
background-color: #fff;
position: relative;
transition: all 0.3s ease 0s;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-nav .burger span {
width: 2.1rem;
}
}
.menuon #header .header__pc-nav .burger span {
background-color: transparent;
}
#header .header__pc-nav .burger span::before, #header .header__pc-nav .burger span::after {
content: "";
position: absolute;
width: 2.8rem;
height: 1px;
background-color: #fff;
transition: all 0.3s ease 0s;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-nav .burger span::before, #header .header__pc-nav .burger span::after {
width: 2.1rem;
}
}
#header .header__pc-nav .burger span::before {
top: -0.8rem;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-nav .burger span::before {
top: -0.6rem;
}
}
.menuon #header .header__pc-nav .burger span::before {
transform: rotate(45deg);
top: 0;
}
#header .header__pc-nav .burger span::after {
bottom: -0.8rem;
}
@media screen and (max-width: 749.98px) {
#header .header__pc-nav .burger span::after {
bottom: -0.6rem;
}
}
.menuon #header .header__pc-nav .burger span::after {
transform: rotate(-45deg);
bottom: 0;
}
@media (hover: hover) {
#header .header__pc-nav .burger:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
.menuon #header .header__pc-nav .burger {
border-left: none;
}
@media screen and (max-width: 749.98px) {
.menuon #header .header__pc-nav .burger {
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
}
.menuon #header {
border-bottom-color: transparent;
}
@media screen and (max-width: 749.98px) {
.menuon #header .header__pc {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
}
.menuon #header .header__pc-logo, .menuon #header .header__pc-nav-top,
.menuon #header .header__pc .nav {
opacity: 0;
pointer-events: none;
}
@media screen and (max-width: 749.98px) {
.menuon #header .header__pc-logo, .menuon #header .header__pc-nav-top,
.menuon #header .header__pc .nav {
opacity: 1;
pointer-events: auto;
}
}
#header.scroll-active, #header.-black {
border-bottom: 1px solid #e7e5e2;
backdrop-filter: blur(5px);
}
.menuon #header.scroll-active, .menuon #header.-black {
background-color: transparent;
border-bottom: none;
backdrop-filter: none;
}
#header.scroll-active .header__pc-logo a, #header.-black .header__pc-logo a {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 199.87/17.887;
}
@media screen and (max-width: 749.98px) {
.menuon #header.scroll-active .header__pc-logo a, .menuon #header.-black .header__pc-logo a {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 199.87/17.887;
}
}
#header.scroll-active .header__pc-nav-top-btn, #header.-black .header__pc-nav-top-btn {
background-color: #f3f2f0;
}
#header.scroll-active .header__pc-nav-top-btn span, #header.-black .header__pc-nav-top-btn span {
color: #000;
}
#header.scroll-active .header__pc-nav-top-btn.-partner span, #header.-black .header__pc-nav-top-btn.-partner span {
color: #000;
}
#header.scroll-active .header__pc-nav-top-btn.-partner span:after, #header.-black .header__pc-nav-top-btn.-partner span:after {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 12.19/12.62;
}
#header.scroll-active .header__pc-nav-top-btn.-member span, #header.-black .header__pc-nav-top-btn.-member span {
color: #000;
}
#header.scroll-active .header__pc-nav-top-btn.-member span:after, #header.-black .header__pc-nav-top-btn.-member span:after {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 18.32/22.48;
}
#header.scroll-active .header__pc-nav .nav__item a, #header.-black .header__pc-nav .nav__item a {
color: #000;
}
#header.scroll-active .header__pc-nav .burger, #header.-black .header__pc-nav .burger {
border-left: 1px solid #e7e5e2;
}
.menuon #header.scroll-active .header__pc-nav .burger, .menuon #header.-black .header__pc-nav .burger {
border-left: none;
}
@media screen and (max-width: 749.98px) {
.menuon #header.scroll-active .header__pc-nav .burger, .menuon #header.-black .header__pc-nav .burger {
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
}
#header.scroll-active .header__pc-nav .burger span, #header.-black .header__pc-nav .burger span {
background-color: #000;
}
.menuon #header.scroll-active .header__pc-nav .burger span, .menuon #header.-black .header__pc-nav .burger span {
background-color: transparent;
}
#header.scroll-active .header__pc-nav .burger span:before, #header.scroll-active .header__pc-nav .burger span:after, #header.-black .header__pc-nav .burger span:before, #header.-black .header__pc-nav .burger span:after {
background-color: #000;
}
.menuon #header.scroll-active .header__pc-nav .burger span:before, .menuon #header.scroll-active .header__pc-nav .burger span:after, .menuon #header.-black .header__pc-nav .burger span:before, .menuon #header.-black .header__pc-nav .burger span:after {
background-color: #fff;
}
#header.-black {
background-color: #fff;
backdrop-filter: none;
}
.sub-menu {
opacity: 0;
visibility: hidden;
pointer-events: none;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease, visibility 0s linear 0.4s;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #333;
z-index: 100;
}
.menuon .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: inset(0 0 0% 0);
transition: clip-path 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease, visibility 0s;
}
.menu-closing .sub-menu {
opacity: 0;
visibility: visible;
pointer-events: none;
clip-path: inset(100% 0 0 0);
transition: clip-path 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease, visibility 0s;
}
.sub-menu__inner {
height: 100vh;
display: flex;
justify-content: space-between;
align-items: stretch;
}
@media screen and (max-width: 749.98px) {
.sub-menu__inner {
overflow-y: auto;
}
}
.sub-menu__img {
width: calc(100% - 87rem);
}
@media screen and (max-width: 749.98px) {
.sub-menu__img {
display: none;
}
}
.sub-menu__img img {
width: 100%;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
}
.sub-menu__box {
width: 87rem;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 749.98px) {
.sub-menu__box {
width: 100%;
height: 100%;
display: block;
}
}
.sub-menu__box-content {
min-width: 64.8rem;
}
@media screen and (max-width: 749.98px) {
.sub-menu__box-content {
min-width: auto;
width: 100%;
display: flex;
flex-direction: column;
padding: 0 2.5rem;
}
}
.sub-menu__nav {
display: flex;
justify-content: space-between;
gap: 4rem;
}
@media screen and (max-width: 749.98px) {
.sub-menu__nav {
margin-top: 3rem;
flex-direction: column;
gap: 0;
order: 2;
}
}
.sub-menu__nav-list {
width: calc((100% - 8rem) / 3);
}
@media screen and (max-width: 749.98px) {
.sub-menu__nav-list {
width: 100%;
margin-top: 2.4rem;
}
}
.sub-menu__nav-list:first-of-type {
margin-top: 0;
}
.sub-menu__nav-item {
margin-top: 3.6rem;
opacity: 0;
transform: translateY(17px);
transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media screen and (max-width: 749.98px) {
.sub-menu__nav-item {
margin-top: 2.4rem;
}
}
.menuon .sub-menu__nav-item {
opacity: 1;
transform: translateY(0);
}
.sub-menu__nav-item a {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.4444444444;
letter-spacing: 0.12em;
color: #fff;
padding-left: 2rem;
position: relative;
}
@media screen and (max-width: 749.98px) {
.sub-menu__nav-item a {
padding-left: 0;
font-size: 1.5rem;
line-height: 1.4666666667;
display: inline-block;
}
}
@media screen and (max-width: 749.98px) {
.sub-menu__nav-item.has-child > a {
padding-right: 3rem;
}
.sub-menu__nav-item.has-child > a:after {
content: "";
display: block;
width: 1.2rem;
height: 1.2rem;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;
opacity: 1;
transition: all 0.3s ease 0s;
}
.sub-menu__nav-item.has-child.is-active > a:after {
transform: translateY(-50%) rotate(0);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}
}
.sub-menu__nav-item > a:before {
content: "";
display: block;
width: 1rem;
height: 1rem;
aspect-ratio: 13/15;
background-color: #fff;
clip-path: polygon(25% 50%, 0 0, 100% 50%, 0% 100%);
position: absolute;
top: 0.6rem;
left: 0;
height: 1.5rem;
background-color: #fff;
opacity: 0;
transition: all 0.3s ease 0s;
}
@media (hover: hover) {
.sub-menu__nav-item > a:hover:before {
opacity: 1;
}
}
.sub-menu__nav-item .child {
margin-top: 2rem;
padding-left: 2rem;
}
@media screen and (max-width: 749.98px) {
.sub-menu__nav-item .child {
margin-top: 0;
padding-top: 2.4rem;
padding-left: 0;
display: none;
overflow: hidden;
box-sizing: border-box;
}
}
.sub-menu__nav-item .child li {
margin-top: 1.2rem;
}
@media screen and (max-width: 749.98px) {
.sub-menu__nav-item .child li:first-of-type {
margin-top: 0;
}
}
.sub-menu__nav-item .child li a {
font-size: 1.4rem;
line-height: 1.4285714286;
font-weight: 500;
letter-spacing: 0.1em;
padding-left: 1.4rem;
position: relative;
}
@media screen and (max-width: 749.98px) {
.sub-menu__nav-item .child li a {
transition: none !important;
}
}
@media screen and (min-width: 750px) {
.sub-menu__nav-item .child li a {
transition: all 0.3s ease 0s;
}
}
.sub-menu__nav-item .child li a:before {
content: "";
display: block;
width: 0.6rem;
height: 1px;
background-color: #838383;
position: absolute;
top: 50%;
left: 0;
}
@media (hover: hover) {
.sub-menu__nav-item .child li a:hover {
opacity: 0.6;
}
}
.sub-menu__nav-item:first-of-type {
margin-top: 0;
}
.sub-menu .btnbox {
margin-top: 8rem;
display: flex;
gap: 2rem;
order: 2;
}
@media screen and (max-width: 749.98px) {
.sub-menu .btnbox {
order: 1;
gap: 0.8rem;
margin-top: 9rem;
}
}
.sub-menu .btnbox .c-btn {
opacity: 0;
z-index: 1;
transform: translateY(17px);
transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menuon .sub-menu .btnbox .c-btn {
opacity: 1;
transform: translateY(0);
}
.sub-menu .btnbox .c-btn.-arrow1 {
width: calc((100% - 2rem) / 2);
height: 7.8rem;
border: none;
background-color: #fff;
font-size: 1.5rem;
line-height: 1.4666666667;
font-weight: 700;
letter-spacing: 0.14em;
}
@media screen and (max-width: 749.98px) {
.sub-menu .btnbox .c-btn.-arrow1 {
min-width: 0;
height: 5rem;
padding: 0.8rem;
justify-content: center;
}
}
.sub-menu .btnbox .c-btn.-arrow1:before {
z-index: -1;
}
@media screen and (max-width: 749.98px) {
.sub-menu .btnbox .c-btn.-arrow1 i {
display: none;
}
}
@media (hover: hover) {
.sub-menu .btnbox .c-btn.-arrow1:hover {
color: #fff;
}
}
.sub-menu__bottom {
border-top: 1px solid #d6d4ce;
padding-top: 2.4rem;
margin-top: 2.4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 749.98px) {
.sub-menu__bottom {
order: 3;
margin-top: 4rem;
padding-bottom: 6rem;
flex-direction: column;
align-items: flex-start;
}
}
.sub-menu__bottom-member {
display: flex;
align-items: center;
gap: 3rem;
}
@media screen and (max-width: 749.98px) {
.sub-menu__bottom-member {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
}
.sub-menu__bottom-member .c-btn {
opacity: 0;
transform: translateY(17px);
transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menuon .sub-menu__bottom-member .c-btn {
opacity: 1;
transform: translateY(0);
}
.sub-menu__bottom-member .c-btn.-window01, .sub-menu__bottom-member .c-btn.-login {
color: #fff;
padding: 0;
height: auto;
min-height: auto;
border: none;
}
.sub-menu__bottom-member .c-btn.-window01 span, .sub-menu__bottom-member .c-btn.-login span {
padding-right: 2.4rem;
}
.sub-menu__bottom-member .c-btn.-window01 span:after {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 14.89/14.89;
}
.sub-menu__bottom-member .c-btn.-login span:after {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 18.3/17.1;
}
.sub-menu__bottom-sns {
display: flex;
align-items: center;
gap: 1.6rem;
opacity: 0;
transform: translateY(17px);
transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media screen and (max-width: 749.98px) {
.sub-menu__bottom-sns {
display: none;
}
}
.menuon .sub-menu__bottom-sns {
opacity: 1;
transform: translateY(0);
}
.sub-menu__bottom-sns-link {
width: 1.6rem;
height: 1.6rem;
}
.sub-menu__bottom-sns-link.-facebook {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 9.96/19.77;
}
.sub-menu__bottom-sns-link.-instagram {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 165.12/167.93;
}
.sub-menu__bottom-sns-link.-youtube {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 204.814/145.414;
}
.sub-menu__bottom-sns-link.-tiktok {
background-image: url('data:image/svg+xml;utf8,');
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 16.954/19;
}
.sub-menu__nav-item:nth-child(1) {
transition-delay: 0.15s;
}
.sub-menu__nav-item:nth-child(2) {
transition-delay: 0.2s;
}
.sub-menu__nav-item:nth-child(3) {
transition-delay: 0.25s;
}
.sub-menu__nav-item:nth-child(4) {
transition-delay: 0.3s;
}
.sub-menu__nav-item:nth-child(5) {
transition-delay: 0.35s;
}
.sub-menu__nav-item:nth-child(6) {
transition-delay: 0.4s;
}
.sub-menu__nav-item:nth-child(7) {
transition-delay: 0.45s;
}
.sub-menu__nav-item:nth-child(8) {
transition-delay: 0.5s;
}
.sub-menu__nav-item:nth-child(9) {
transition-delay: 0.55s;
}
.sub-menu__nav-item:nth-child(10) {
transition-delay: 0.6s;
}
.sub-menu .btnbox .c-btn {
transition-delay: 0.35s;
}
.sub-menu .btnbox .c-btn:nth-child(2) {
transition-delay: 0.4s;
}
.sub-menu__bottom-member .c-btn {
transition-delay: 0.45s;
}
.sub-menu__bottom-member .c-btn:nth-child(2) {
transition-delay: 0.5s;
}
.sub-menu__bottom-sns {
transition-delay: 0.5s;
}