@charset "UTF-8";

/* =================================
HEADER
================================= */

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;
  width:100%;
  height:50px;
  background-image:linear-gradient(to bottom, rgba(60,60,60,0.85) 50%, rgba(27,27,27,0.90) 100%);
  box-shadow:0 7px 15px -7px rgba(0,0,0,0.15);
}

@media screen and (min-width:960px){
  .header{height:80px;box-shadow:0 8px 20px -7px rgba(0,0,0,0.15);}
}


/* =================================
INNER
================================= */

.header__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  padding:0 10px;
}

@media screen and (min-width:960px){
  .header__inner{padding:0 15px;}
}


/* =================================
LOGO
================================= */

.header__title{width:55px;}

@media screen and (min-width:960px){
  .header__title{width:85px;}
}

.header__title img{
  display:block;
  width:100%;
  height:100%;
}


/* =================================
NAV WRAP
================================= */

.header__nav{
  position:absolute;
  inset:0;
  width:100%;
  height:100vh;
  transform:translateX(100%);
  background-color:rgba(25,25,25,0.80);
  transition:ease .3s;
}

.header__nav.active{transform:translateX(0);}

@media screen and (min-width:960px){
  .header__nav{
    position:static;
    transform:initial;
    background-color:inherit;
    height:inherit;
    display:flex;
    justify-content:end;
    width:85%;
  }
}


/* =================================
NAV LIST
================================= */

.nav_ul{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:0;
}

@media screen and (min-width:960px){
  .nav_ul{
    position:inherit;
    top:0;
    left:0;
    transform:none;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:end;
    height:initial;
  }
}


/* =================================
NAV LINKS
================================= */

.nav_li a{
  font-family:"Roboto Flex", sans-serif;
  font-weight:700;
  color:#FFFFFF !important;
  width:100%;
  display:block;
  text-align:center;
  font-size:18px;
  letter-spacing:0;
  margin-bottom:0.8em;
}

.nav_li a.sub-menu_sukima{margin-bottom:6px;}

/* トップメニュー hover（グラデ） */
.nav_li > a:hover{
  background:linear-gradient(90deg,var(--accent1),var(--accent3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media screen and (min-width:960px){
  .nav_li a{
    margin-bottom:0;
    font-size:21px;
    letter-spacing:-0.01rem;
    margin-right:2.3rem;
  }
}


/* =================================
SLIDE LINE
================================= */

@media screen and (min-width:960px){
  #slide-line{
    position:absolute;
    bottom:0;
    height:2px;
    background-color:var(--accent1);
    transition:all .3s ease;
  }
}


/* =================================
SUB MENU
================================= */

/* SP */

nav .sub-menu{
  position:relative;
  top:-0.6em;
  padding:0;
}

nav .sub-menu a{
  font-size:15px;
  margin-bottom:0;
  color:#E8E2D2 !important;
}

nav .sub-menu li{margin-bottom:0.1em;}
nav .sub-menu li:last-child{margin-bottom:0.5em;}


/* PC */

@media screen and (min-width:960px){

  .nav_sub{
    position:relative;
    display:block;
    text-align:center;
    line-height:80px;
  }

  nav .sub-menu{
    visibility:hidden;
    opacity:0;
    z-index:1;
    display:block;
    position:absolute;
    font-size:15px;
    top:50px;
    left:50%;
    margin-left:-100px;
    width:200px;
    background:rgba(27,27,27,0.90);
		border-top:1px #867E69 solid;
		border-bottom:1px #867E69 solid;
    transition:all .2s ease;
  }

  nav .sub-menu a{
    display:block;
    border-bottom:1px rgba(230,222,174,0.29) solid;
    padding:15px 0;
    line-height:1.2em;
    margin-bottom:0;
    color:#E8E2D2 !important;
  }

  nav .sub-menu li{display:block;}

  nav .sub-menu li a{font-size:15px;}

  nav .sub-menu li:last-child{
    border-bottom:none;
    margin-bottom:0;
  }

  nav ul > li:hover{
    transition:all .5s;
  }

  nav li:hover ul.sub-menu{
    top:80px;
    visibility:visible;
    opacity:1;
    z-index:9999;
  }

  nav li ul li:after{content:none;}

  nav li:hover ul.sub-menu a{color:#E8E2D2 !important;}

  /* サブメニュー hover */
  nav li:hover ul.sub-menu a:hover{
    color:var(--accent1) !important;
    background:rgba(0,0,0,0.25);
  }
}


/* =================================
HAMBURGER
================================= */

.header__hamburger{width:48px;height:100%;}

.hamburger{
  background-color:transparent;
  border-color:transparent;
  z-index:9999;
}

@media screen and (min-width:960px){
  .hamburger{display:none;}
}

.hamburger span{
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--accent1),var(--accent3)); /* 通常：グラデ */
  position:relative;
  transition:ease .4s;
  display:block;
}

.hamburger span:nth-child(2){margin:8px 0;}


/* OPEN（×状態） */

.hamburger.active span:nth-child(1){
  background:var(--accent1); /* ピンク */
  top:10px;
  transform:rotate(45deg);
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  background:var(--accent1); /* ピンク */
  top:-10px;
  transform:rotate(-45deg);
}


/* =================================
ICON
================================= */

.img-tw{max-width:35px;padding-top:0;}

@media screen and (min-width:960px){
  .img-tw{max-width:22px;padding-top:4px;}
}