/* header */
/**header**/
.site-header{

  top:0;
  z-index:1000;

  display:grid;
grid-template-columns:120px 1fr 120px;
  align-items:center;

  width:100%;
  max-width:750px;
  height:64px;
  margin:0 auto;
  padding:0 12px;
  box-sizing:border-box;

  background:#f7f1e3;
}
.menu-button{
  justify-self:start;
}

.instagram-button{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:44px;
  height:44px;
  line-height:1;
}
.instagram-button{
  width:44px;
  min-width:44px;
  max-width:44px;
}
.header-logo{
  display:flex;
  justify-content:center;
  align-items:center;
}

.header-logo a{
  display:block;
  line-height:1;
}

.header-logo img{
  width:100px;
  height:auto;
  display:block;
}
.menu-button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  outline:none;
  background:transparent;
  padding:0;
  margin:0;
  box-shadow:none;
  border-radius:0;

  justify-self:start;
  width:44px;
  height:44px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;

  cursor:pointer;
}

.menu-button span{
  width:36px;
  height:1px;
  background:#5b3b2b;
  transform:translateZ(0);
}
@media (min-width:768px){

  .menu-button span{
    width:34px;
    height:1px;
  }

}
.front-page .menu-button span,
.home .menu-button span{
  background:#fff7dd;
}
.front-page .menu-button,
.home .menu-button{
  color:#fff7dd;
}

/**header**/
.global-menu{
  position:fixed;
  top:0;
  left:0;

  width:80%;
  max-width:400px;
  height:100vh;

  padding:100px 30px;
  box-sizing:border-box;

 background:rgba(251, 251, 251, 0.82);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

  transform:translateX(-100%);
  transition:0.3s;
  z-index:2000;
}

.global-menu.is-open{
  transform:translateX(0);
}

@media (min-width:768px){
  .global-menu{
    left:calc((100vw - 750px) / 2);

    width:400px;
    max-width:none;

    transform:none;
    clip-path:inset(0 100% 0 0);
    pointer-events:none;

    transition:clip-path .55s cubic-bezier(.16, 1, .3, 1);
  }

  .global-menu.is-open{
    clip-path:inset(0 0 0 0);
    pointer-events:auto;
  }
}

.global-menu a{
  position:relative;
  display:block;

  margin-bottom:0;
  padding:18px 0;

  color:#5b3b2b;
  text-decoration:none;
  font-size:20px;

  opacity:0;
  transform:translateY(24px);

  transition:
    opacity .68s cubic-bezier(.16, 1, .3, 1),
    transform .68s cubic-bezier(.16, 1, .3, 1);
}

.global-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:1px;

  background:#5b3b2b;

  transform:scaleX(0);
  transform-origin:left center;

  transition:transform .72s cubic-bezier(.16, 1, .3, 1);
}

.global-menu.is-open a{
  opacity:1;
  transform:translateY(0);
}

.global-menu.is-open a::after{
  transform:scaleX(1);
}

.global-menu.is-open a:nth-of-type(1){
  transition-delay:.04s;
}

.global-menu.is-open a:nth-of-type(1)::after{
  transition-delay:.08s;
}

.global-menu.is-open a:nth-of-type(2){
  transition-delay:.08s;
}

.global-menu.is-open a:nth-of-type(2)::after{
  transition-delay:.12s;
}

.global-menu.is-open a:nth-of-type(3){
  transition-delay:.12s;
}

.global-menu.is-open a:nth-of-type(3)::after{
  transition-delay:.16s;
}

.global-menu.is-open a:nth-of-type(4){
  transition-delay:.16s;
}

.global-menu.is-open a:nth-of-type(4)::after{
  transition-delay:.20s;
}

.global-menu.is-open a:nth-of-type(5){
  transition-delay:.20s;
}

.global-menu.is-open a:nth-of-type(5)::after{
  transition-delay:.24s;
}

.global-menu.is-open a:nth-of-type(6){
  transition-delay:.24s;
}

.global-menu.is-open a:nth-of-type(6)::after{
  transition-delay:.28s;
}

.global-menu.is-open a:nth-of-type(7){
  transition-delay:.28s;
}

.global-menu.is-open a:nth-of-type(7)::after{
  transition-delay:.32s;
}

/**top header menu**/

.home .global-menu,
.front-page .global-menu{
background:rgba(255, 255, 255, 0.82);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
/**header close**/
.menu-close{
  position:absolute;
  top:20px;
  right:20px;

  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;

  color:#5b3b2b;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}

/**insta icon**/
.instagram-icon{
  width:39px;
  height:39px;
  display:block;
  color:#5b3b2b;
}
.front-page .instagram-icon,
.home .instagram-icon{
  color:#fff7dd;
}
/**top insta icon style**/
.home .site-header,
.front-page .site-header{
  grid-template-columns:44px 44px;
  justify-content:space-between;
}
.instagram-button svg{
  flex:0 0 auto;
}

/**category　header lamp**/
/* category / lower page header */
body:not(.home):not(.front-page) .site-header{
  background:#fff;
  position:sticky;
  overflow:visible;
}

/* lamp image */
.header-lamp{
  position:absolute;
  left:58px;
  top:0;
  width:62px;
  height:auto;
  z-index:1001;
  pointer-events:none;
}

/* TOPではランプ非表示 */
.home .header-lamp,
.front-page .header-lamp{
  display:none;
}

@media (min-width:768px){
  .header-lamp{
    left:70px;
    width:70px;
  }
}

/**header follow**/
/* lower pages: first view header */
body:not(.home):not(.front-page) .site-header{
  background:#fff;
}

/* lower pages: transparent when scrolling */
body:not(.home):not(.front-page).is-page-scrolled .site-header{
  background:rgba(255,255,255,.5);

}

/* top page: header stays over FV first */
.home .site-header,
.front-page .site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  transform:none;

  width:100%;
  max-width:750px;
  margin:0 auto;

  background:transparent;
}
.home .menu-button span,
.front-page .menu-button span{
  background:#fff7dd;
}

.home .instagram-icon,
.front-page .instagram-icon{
  color:#fff7dd;
}



.home.is-fv-passed .instagram-icon,
.front-page.is-fv-passed .instagram-icon{
  color:#3a2116;
}
/* top page: after FV, header follows with black icons */

.home.is-fv-passed .site-header,
.front-page.is-fv-passed .site-header{
  background:rgba(255,255,255,.5);
}



.home.is-fv-passed .menu-button span,
.front-page.is-fv-passed .menu-button span{
  background:#3a2116;
}

.home.is-fv-passed .instagram-icon,
.front-page.is-fv-passed .instagram-icon{
  color:#3a2116;
}
.site-header{
  transition:
    background .35s ease,
    backdrop-filter .35s ease;
}
.site-header{
  position:relative;
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;

  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;

  transition:
    background .35s ease,
    backdrop-filter .35s ease;
}

body:not(.home):not(.front-page).is-page-scrolled .site-header::before,
.home.is-fv-passed .site-header::before,
.front-page.is-fv-passed .site-header::before{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
/* lower pages sticky header fix */
body:not(.home):not(.front-page) .site-header{
  position:sticky;
  top:0;
  z-index:1000;
}
/* lower pages fixed header */
body:not(.home):not(.front-page) .site-header{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  z-index:3000;

  width:100%;
  max-width:750px;
  margin:0 auto;
}

/* fixed header分だけ下げる */
body:not(.home):not(.front-page) .site-wrap{
  padding:64px 0;
  box-sizing:border-box;
}
.menu-hair-style-link{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.menu-hair-style-link .menu-instagram-icon{
  width:26px;
  height:26px;
  flex:0 0 auto;
}
.global-menu.is-open a:nth-of-type(8){
  transition-delay:.32s;
}

.global-menu.is-open a:nth-of-type(8)::after{
  transition-delay:.36s;
}

.global-menu.is-open a:nth-of-type(9){
  transition-delay:.36s;
}

.global-menu.is-open a:nth-of-type(9)::after{
  transition-delay:.40s;
}