@charset "UTF-8";

body.noscroll {
overflow: hidden;
}
header {
position: sticky;
left: 0;
top: 0;
width: 100%;
z-index: 10;
}
.toppage header {
position: fixed;
}
.header_wrap {
display: flex;
justify-content: space-between;
padding-top: 54px;
gap: min(13.802vw, 106px);
align-items: center;
}
.header_wrap h1 {
width: 152px;
aspect-ratio: 152/29;
}
.header_wrap h1 img,
.header_wrap h1 svg,
.header_wrap h1 svg .a {
width: 100%;
aspect-ratio: 152.25 / 29.5;
}
.home .header_wrap h1 img {
opacity: 0.6;
}
.header__nav-sp {
display: none;
justify-content: space-between;
gap: 10px;
}
.header__nav-sp-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 3.7px;
}
.header__nav-sp-link.login img {
width: 21.47px;
height: 23.31px;
}
.header__nav-sp-link.contact img {
width: 29.7px;
height: 23.31px;
}
.header__nav-sp-text {
display: inline-block;
text-align: center;
color: #ffffff;
font-size: 7px;
}
.brand-child_menu {
position: absolute;
left: 0;
top: 107px;
background-color: var(--white70);
width: 100%;
padding-top: 26px;
padding-bottom: 26px;
opacity: 0;
visibility: hidden;
transition: all 0.3s var(--easeout);
}
.brand-child_menu.open {
opacity: 1;
z-index: 10;
visibility: visible;
}
.gnav_child {
display: grid;
gap: min(3.255vw, 25px);
grid-template-columns: repeat(6, 1fr);
}
.gnav_child a {
transition: all 0.3s var(--easeout);
}
.gnav_child a:hover {
opacity: 0.6;
}
.gnav_child a figure {
aspect-ratio: 135/94;
background-color: white;
}
.gnav_child a figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gnav_child a .menu_tit {
margin-top: 12px;
}
.gnav_child a .menu_tit i {
display: block;
margin-bottom: 4px;
}
.gnav_child a .menu_tit i img {
width: auto;
height: 13px;
display: block;
}
.gnav_child a .menu_tit i img.invert {
filter: invert();
}
.gnav_child a .menu_tit .txt {
display: block;
font: var(--font3);
color: black;
}
#head-nav_wrap {
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
gap: min(7.813vw, 60px);
}
#gnav {
display: flex;
gap: var(--blankM3);
}
#gnav a {
color: white;
font: var(--hfont2);
display: inline-block;
padding: var(--blankXXS) 0;
position: relative;
white-space: nowrap;
}
#gnav > li > a:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 2px;
background-color: white;
transition: width 0.3s var(--easeout);
}
#gnav > li > a:hover:after {
width: 100%;
}
#snav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: calc(1.5 * var(--blankXXS));
}
#btn_serch {
display: block;
width: 32px;
height: 32px;
}
#snav .snav_li a {
display: flex;
justify-content: center;
align-items: center; background-color: transparent; font: var(--hfont3);
width: 112px;
height: 34px;
transition: all 0.3s var(--easeout);
aspect-ratio: 112/34;
}
#snav .snav_li a svg .rectangle path {
stroke: white;
fill: none;
}
#snav .snav_li a svg .txt {
fill: white;
}
.light-mode #gnav > li > a,
.light-mode #snav a,
.light-mode #btn_serch_sp,
.light-mode .header__nav-sp-link,
.light-mode #ham {
filter: invert();
}
.notop h1 a svg {
fill: #858b88;
opacity: 1;
}
.notop #snav .snav_li a svg .rectangle path {
fill: #ededed;
}
.notop .light-mode #snav .snav_li a {
filter: inherit;  padding-top: 1.2px;
}
.notop .light-mode #snav .snav_li a svg .rectangle path {
stroke: var(--black);
}
.notop .light-mode #snav .snav_li a svg .txt {
fill: var(--black);
}
#snav .snav_li a:hover svg .rectangle path {
fill: rgba(0, 0, 0, 0.25);
}
.notop .light-mode #snav .snav_li a:hover {
color: white;
}
.notop .light-mode #snav .snav_li a:hover svg .txt {
fill: white;
}
.overlay-menu_wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100svh;
background-color: rgb(255 255 255 / 0.7);
padding-top: 153px;
opacity: 0;
z-index: -1;
transition: all 0.3s var(--easeout);
}
.overlay-menu_wrap.open {
opacity: 1;
z-index: 11;
}
#sform {
width: 100%;
display: flex;
align-items: center;
gap: var(--blankXXS);
border-bottom: 2px solid var(--black);
padding-bottom: var(--blankXXS);
}
#sform label {
font: var(--hfont2);
}
#sform input#s-box {
background-color: transparent;
flex: 1;
}
#sform button#s-btn-area {
background-color: transparent;
filter: invert();
width: 32px;
height: 32px;
}
.overlay-menu_wrap #close {
background-color: transparent;
width: 20px;
height: auto;
aspect-ratio: 1/1;
position: fixed;
top: var(--blankM2);
right: var(--outergap);
}
.overlay-menu_wrap #close span {
display: block;
width: 20px;
height: 3px;
background-color: black;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
}
.overlay-menu_wrap #close span:first-child {
transform: rotate(45deg);
}
.overlay-menu_wrap #close span:last-child {
transform: rotate(-45deg);
}
@media (max-width: 1320px) {
.header_wrap {
gap: 40px;
}
#head-nav_wrap {
justify-content: flex-end;
gap: 40px;
}
}
@media (max-width: 1279px) {
.header_wrap h1 {
width: min(19.792vw, 110px);
}
.header_wrap {
gap: min(13.802vw, 40px);
}
#head-nav_wrap {
gap: min(7.813vw, 40px);
}
#gnav {
gap: var(--blankS);
}
#gnav a { margin-top: -3px;
}
#btn_serch {
width: 22px;
height: 22px;
}
#snav .snav_li a {
width: 100px;
}
}
@media (max-width: 1024px) {
.header_wrap {
flex-direction: row-reverse;
justify-content: space-between;
padding-top: 34px;
}
.header_wrap h1 {
order: 2;
width: min(32.267vw, 121px);
}
#btn_serch_sp {
width: 32px;
height: 32px;
}
#ham {
order: 3;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
width: 33px;
height: 25px;
background-color: transparent;
padding: 1px;
}
#ham.off {
opacity: 0;
}
#ham span {
width: 100%;
height: 2px;
background-color: white;
}
#ham span:nth-of-type(2) {
width: calc(100% / 3 * 2);
}
#ham span:nth-of-type(3) {
width: calc(100% / 3);
}
.overlay-menu_wrap {
padding-top: 80px;
background-color: rgb(255 255 255 / 0.9);
overflow-y: auto;
}
.overlay-menu_wrap .inner {
padding-inline: 0;
}
.overlay-menu_wrap #close {
top: 34px;
}
.gnav_menu-list {
border-bottom: 1px solid #000000;
}
.gnav_link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--blankS) 0;
font: var(--hfont2);
}
.gnav_accordion.is-opened .gnav_accordion-head::after {
display: none;
}
.gnav_accordion.is-opened .gnav_accordion-head {
display: flex;
flex-direction: row-reverse;
}
.gnav_accordion.is-opened .gnav_accordion-head::before {
display: block;
}
.gnav_accordion-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--blankS) 0;
font: var(--hfont2);
}
.gnav_accordion-head::before {
display: none;
content: "";
width: 14px;
height: 14px;
background: url(//flacedesign.com/flace/wp-content/themes/flace2025/assets/img/gnav-close.svg) center no-repeat;
background-size: 100% auto;
}
.gnav_accordion-head::after {
content: "";
width: 14px;
height: 10px;
background: url(//flacedesign.com/flace/wp-content/themes/flace2025/assets/img/arw_btm.svg) center no-repeat;
background-size: 100% auto;
}
.gnav_accordion-head::marker {
content: "";
}
.gnav_link-lower-list {
padding-left: 22px;
border-bottom: 1px solid #000000;
}
.gnav_link-lower-list:first-child {
border-top: 1px solid #000000;
}
.gnav_link-lower-list:last-child {
border-bottom: none;
}
.gnav_link-lower {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--blankS) 0;
font: var(--hfont2);
}
.gnav_link::after {
content: "";
width: 14px;
height: 10px;
background: url(//flacedesign.com/flace/wp-content/themes/flace2025/assets/img/arw_btm.svg) center no-repeat;
background-size: 100% auto;
rotate: -90deg;
}
#snav_sp {
display: flex;
justify-content: center;
margin-top: var(--blankM2);
gap: calc(1.5 * var(--blankXS));
padding-bottom: var(--blankL2);
}
#snav_sp li {
width: min(calc(50% - (1.5 * var(--blankXS) / 2)), 155px);
}
.snav_li a {
width: 100%;
height: 38px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
font: var(--hfont3);
background-color: rgb(255 255 255 / 0.6);
}
.header__nav-sp {
display: flex;
}
}