/* ==========================================
Archive MENU
Cartier mode
archive-menu.php ONLY
========================================== */


/* ==========================
TITLE
========================== */

.archive-menu .section-title{

margin-bottom:90px;

text-align:center;

}


/* ==========================
FILTER
========================== */

.archive-menu .section-filter{

margin-bottom:90px;

}


.archive-menu .filter-group{

display:flex;

gap:20px;

flex-wrap:wrap;

justify-content:center;

}


.archive-menu .filter-btn{

background:none;

border:none;

padding:0;

font-size:12px;

letter-spacing:.18em;

position:relative;

cursor:pointer;

transition:.4s;

color:#777;

font-family:
'Cormorant Garamond',
serif;

}


/* 線 */

.archive-menu .filter-btn:after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:0;

height:1px;

background:var(--accent);

transition:.5s;

}


.archive-menu .filter-btn:hover,

.archive-menu .filter-btn.active{

color:#111;

}


.archive-menu .filter-btn:hover:after,

.archive-menu .filter-btn.active:after{

width:100%;

}


/* ==========================
AJAX
========================== */

#menu-result{

transition:

opacity .5s ease,

transform .5s ease;

}


#menu-result.is-loading{

opacity:0;

transform:
translateY(30px);

pointer-events:none;

}


/* ==========================
親
========================== */

.archive-menu .archive-menu-group{

margin-bottom:160px;

}


.archive-menu .c-menu__parent{

position:relative;

padding-bottom:20px;

}


.archive-menu .c-menu__parent-title{

font-family:
'Cormorant Garamond',
serif;

font-size:42px;

font-weight:400;

letter-spacing:.2em;

text-align:center;

margin-bottom:70px;

position:relative;

padding-bottom:30px;

}


.archive-menu .c-menu__parent-title:after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:
translateX(-50%);

width:80px;

height:1px;

background:
var(--accent);

opacity:.7;

}


/* ==========================
子
========================== */

.archive-menu .c-menu__child{

margin-bottom:80px;

}


.archive-menu .c-menu__child-title{

font-size:14px;

letter-spacing:.25em;

margin-bottom:35px;

padding-left:24px;

position:relative;

font-weight:500;

text-transform:uppercase;

}


.archive-menu .c-menu__child-title:before{

content:"";

position:absolute;

left:0;

top:50%;

transform:
translateY(-50%);

width:10px;

height:1px;

background:
var(--accent);

}


/* ==========================
孫
========================== */

.archive-menu .c-menu__grand{

margin-bottom:45px;

padding-left:30px;

}


.archive-menu .c-menu__grand-title{

font-family:
'Cormorant Garamond',
serif;

font-size:18px;

letter-spacing:.18em;

margin-bottom:25px;

opacity:.65;

position:relative;

display:inline-block;

padding-bottom:10px;

}


.archive-menu .c-menu__grand-title:after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:1px;

background:

linear-gradient(
90deg,
var(--accent),
transparent
);

opacity:.5;

}


/* ==========================
MENU ITEM
========================== */

.archive-menu .c-menu-item{

padding:26px 0;

border-bottom:

1px solid rgba(
0,0,0,.05);

transition:.5s;

background:#fff;

}


.archive-menu .c-menu-item:hover{

padding-left:12px;

}


.archive-menu .menu-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

}


.archive-menu .menu-name{

display:flex;

align-items:center;

gap:10px;

flex:1;

font-size:14px;

letter-spacing:.08em;

}


.archive-menu .menu-name:after{

content:"";

flex:1;

border-bottom:

1px dotted
rgba(
0,0,0,.12);

}


.archive-menu .menu-price{

white-space:nowrap;

font-size:13px;

letter-spacing:.12em;

color:var(--accent);

font-family:
'Cormorant Garamond',
serif;

}


/* ==========================
ホバー演出
========================== */

.archive-menu .c-menu-item{

position:relative;

overflow:hidden;

}


.archive-menu .c-menu-item:before{

content:"";

position:absolute;

left:0;

top:0;

width:0;

height:100%;

background:

linear-gradient(

90deg,

rgba(212,175,55,.05),

transparent

);

transition:.7s;

}


.archive-menu .c-menu-item:hover:before{

width:100%;

}


/* ==========================
SP
========================== */

@media(max-width:768px){

.archive-menu .section-title{

margin-bottom:60px;

}


.archive-menu .section-filter{

margin-bottom:60px;

}


.archive-menu .archive-menu-group{

margin-bottom:100px;

}


.archive-menu .c-menu__parent-title{

font-size:30px;

margin-bottom:50px;

}


.archive-menu .c-menu__child{

margin-bottom:50px;

}


.archive-menu .c-menu__grand{

padding-left:15px;

}


.archive-menu .menu-row{

display:block;

}


.archive-menu .menu-name{

display:block;

}


.archive-menu .menu-name:after{

display:none;

}


.archive-menu .menu-price{

display:block;

margin-top:10px;

}

}