.wrap__footer {
position: relative;
}
.wrap__footer-contact {
position: relative;
display: block;
background-color: black;
}
.wrap__footer-contact a {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--color-light-gray);
padding-block: 150px 157px;
transition: all .4s ease-in-out;
overflow: hidden;
}
.wrap__footer-contact a::before {
content: "";
display: block;
position: absolute;
inset: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100%;
height: 100%;
background: var(--color-yellow);
transition: all .4s ease-in-out;
border-radius: 50%;
}
.wrap__footer-contact a:hover {
opacity: 1;
color: white;
}
.wrap__footer-contact a:hover::before {
transform: translate(-50%, -50%) scale(1.5);
}
.wrap__footer-contact a .text-en {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--featured-font);
font-style: italic;
font-size: 120px;
line-height: 0.7;
font-weight: 600;
gap: 35px;
padding-bottom: 12px;
margin-bottom: 32px;
}
.wrap__footer-contact a .text-en:after {
content: "";
display: inline-block;
width: max(1.388vw, 20px);
height: max(1.388vw, 20px);
color: var(--color-light-gray);
background-image: url("data:image/svg+xml,%3Csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M20%20-8.74228e-07V20L17.6305%2020L17.7433%203.97122L1.88999%2019.1079L0%2017.0072L16.1636%202.33093L0.394922%202.41727L0.394922%20-1.72626e-08L20%20-8.74228e-07Z'%20fill='%23B9B9B9'/%3E%3C/svg%3E");
background-size: 100%;
transition: all .4s ease-in-out;
}
.wrap__footer-contact a:hover .text-en:after {
filter: brightness(0) invert(1);
}
.wrap__footer-contact a .text-en:before {
content: "";
display: block;
position: absolute;
width: calc(100% - 0.4167vw);
bottom: 0;
right: 0;
border-top: 1px solid var(--color-light-gray);
}
.wrap__footer-contact a:hover .text-en:before {
border-top-color: white;
}
.wrap__footer-contact a .text-jp {
position: relative;
display: inline-block;
font-size: 16px;
font-weight: 500;
line-height: 12px;
z-index: 2;
}
.wrap__footer-content {
position: relative;
padding: 87px 5.56vw 40px;
}
.wrap__footer-top {
display: flex;
align-items: flex-start;
margin-bottom: 160px;
}
.wrap__footer-left {
display: flex;
align-items: flex-start;
}
.wrap__footer-top .wrap__footer-logo {
display: block;
flex: 0 0 16.67vw;
max-width: 16.67vw;
margin-right: 5.9722vw;
}
.wrap__navigation-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-left: auto;
gap: 1.4583vw 1.5278vw;
}
.wrap__navigation-links .item__link {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
padding-block: 2.5vw 1.67vw;
}
.wrap__navigation-links .item__link:before {
content: "";
display: inline-block;
position: absolute;
top: 12px;
right: 12px;
width: 8px;
height: 8px;
background-image: url("data:image/svg+xml,%3Csvg%20width='8'%20height='8'%20viewBox='0%200%208%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M8%201.27146e-07V8L7.05219%208L7.09732%201.58849L0.755995%207.64317L0%206.80288L6.46544%200.932374L0.157969%200.966907L0.157969%204.69932e-07L8%201.27146e-07Z'%20fill='black'/%3E%3C/svg%3E");
background-size: 100%;
}
.wrap__navigation-links .item__link span {
display: block;
font-size: 13px;
font-weight: 400;
line-height: 0.7692;
margin-bottom: 8px;
}
.wrap__navigation-links .item__link .logo {
display: block;
padding-inline: 1.67vw 1.5972vw;
}
.wrap__go-top {
flex: 0 0 2.22vw;
max-width: 2.22vw;
margin-left: 5.3472vw;
}
.wrap__go-top a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.wrap__go-top a .icon {
width: 100%;
transition: all .3s ease-in-out;
}
.wrap__go-top a:hover .icon {
transform: translateY(-6px);
}
.wrap__go-top a span:last-child {
display: flex;
align-items: center;
font-family: var(--featured-font);
font-style: italic;
font-weight: 500;
font-size: 20px;
line-height: 0.7;
color: black;
writing-mode: tb-rl;
-webkit-writing-mode: tb-rl;
width: max-content;
}
.wrap__menu {
position: relative;
}
.wrap__menu .nav-menu-footer>li {
line-height: 1;
margin-bottom: 32px;
}
.wrap__menu .nav-menu-footer>li>a {
position: relative;
display: block;
color: black;
font-family: var(--featured-font);
font-size: 32px;
line-height: 0.6875;
font-weight: 600;
font-style: italic;
}
.wrap__menu .nav-menu-footer>li:has(.sub-menu)>a {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.wrap__menu .nav-menu-footer>li:last-child {
margin-bottom: 0;
}
.wrap__menu .nav-menu-footer>li .sub-menu a {
display: block;
color: black;
font-family: var(--featured-font);
font-size: 16px;
line-height: 0.6875;
font-weight: 500;
margin-bottom: 20px;
}
.wrap__footer-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.footer-menu-sns-navigation .nav-menu-sns-footer {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: max(1.11vw, 16px);
}
.footer-menu-sns-navigation .nav-menu-sns-footer li {
line-height: 0;
order: 1;
}
.footer-menu-sns-navigation .nav-menu-sns-footer li:nth-child(3) {
order: 0;
}
.footer-menu-sns-navigation .nav-menu-sns-footer a {
position: relative;
display: inline-block;
font-size: 14px;
line-height: 0.7142;
font-weight: 500;
text-decoration-line: underline !important;
}
.wrap__copyright {
display: block;
line-height: 0;
}
.wrap__copyright p {
display: inline-block;
font-size: 11px;
line-height: 0.7273;
font-weight: 400;
}
@media screen and (min-width: 769px) {
.wrap__footer-contact a .text-jp br,
.wrap__navigation-links .item__link span br {
display: none;
}
}
@media screen and (max-width: 1270px) {
.wrap__footer-contact a {
padding-block: 94px 88px;
}
.wrap__footer-contact a .text-en {
font-size: 48px;
gap: 20px;
line-height: 0.7083;
padding-bottom: 6px;
margin-bottom: 18px;
}
.wrap__footer-contact a .text-en:after {
width: min(3.73vw, 14px);
height: min(3.73vw, 14px);
}
.wrap__footer-contact a .text-jp {
text-align: center;
font-size: 12px;
line-height: 1.67;
}
.wrap__footer-content {
padding: 40px 6.4vw 24px;
}
.wrap__footer-top {
position: relative;
display: block;
margin-bottom: 48px;
}
.wrap__footer-left {
flex: 1;
flex-direction: column;
}
.wrap__footer-top .wrap__footer-logo {
max-width: min(49.866vw, 187px);
width: 100%;
height: auto;
margin-bottom: 34px;
margin-right: 0;
max-height: max-content;
}
.wrap__menu .nav-menu-footer>li:has(.sub-menu)>a {
margin-bottom: 22px;
}
.wrap__go-top {
position: absolute;
top: 0;
right: 0;
max-width: min(8.533vw, 32px);
margin-left: 0;
}
.wrap__go-top a .icon {
width: min(8.533vw, 32px);
}
.wrap__navigation-links {
grid-template-columns: repeat(1, minmax(0, 1fr));
margin-top: 40px;
gap: 12px;
}
.wrap__navigation-links .item__link:before {
width: 6px;
height: 6px;
top: 10px;
right: 10px;
}
.wrap__navigation-links .item__link {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 22px 16px 22px 24px;
}
.wrap__navigation-links .item__link span {
font-size: 12px;
line-height: 1.5;
margin-bottom: 0;
}
.wrap__navigation-links .item__link .logo {
flex: 0 0 min(42.67vw, 160px);
max-width: min(42.67vw, 160px);
padding-inline: 0;
}
.wrap__footer-bottom {
display: block;
}
.footer-menu-sns-navigation .nav-menu-sns-footer {
gap: 9px min(6.4vw, 24px);
margin-bottom: 48px;
}
.footer-menu-sns-navigation .nav-menu-sns-footer li:nth-child(1),
.footer-menu-sns-navigation .nav-menu-sns-footer li:nth-child(2) {
order: 1;
}
.footer-menu-sns-navigation .nav-menu-sns-footer:before {
content: '';
width: 100%;
order: 2;
}
.footer-menu-sns-navigation .nav-menu-sns-footer li:nth-child(n+3) {
order: 3;
}
.footer-menu-sns-navigation .nav-menu-sns-footer a {
font-size: 14px;
}
}
@media screen and (min-width: 769px) and (max-width: 1270px) {
.wrap__footer-contact a .text-en {
font-size: 80px;
}
.wrap__footer-contact a .text-jp {
font-size: 14px;
}
.wrap__navigation-links {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 24px;
padding-inline: 50px;
margin-top: 0;
flex: 1;
}
.footer-menu-sns-navigation .nav-menu-sns-footer li:nth-child(2) {
margin-right: 0;
}
.wrap__footer-top {
display: flex;
}
.wrap__footer-left {
flex: 0 0 20%;
}
.wrap__footer-bottom {
display: flex;
}
.footer-menu-sns-navigation .nav-menu-sns-footer:before {
display: none;
}
.footer-menu-sns-navigation .nav-menu-sns-footer {
margin-bottom: 0;
}
}
@media screen and (min-width: 1024px) and (max-width: 1270px) {
.wrap__navigation-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}