@charset "UTF-8";
/* ©SCHNEID 
Kazumi Nishibayashi */
/* ------------------------------
	メニュー
------------------------------ */
body.fixed {
 overflow: hidden; /* メニューが開いた時にスクロールさせないようにする */
}
#top-head {
 position: absolute;
 right: 0;
 z-index: 100;
 top: -120px;
 margin-top: 120px;
}
.header .nav .link {
 line-height: 1em;
 text-decoration: none;
 text-align: center;
 white-space: nowrap;
 color: var(--base-white);
 display: block;
 -webkit-transition: .3s;
 transition: .3s;
}
.header .nav .link .s {
 font-size: .9em;
 vertical-align: baseline;
 margin: 0 4px 0 3px;
}
.header .nav-wrap.open .nav .link {
 color: var(--base-white);
 opacity: 1;
}
.header .nav-wrap.open .nav .link:hover {
 color: var(--link-color);
}
.nav .menu-item {
 width: 100%;
 display: inline-flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 position: relative;
}
#top-head.fixed .nav-wrap .nav .menu-item {
 margin: 1.4vh 0;
}
#top-head .nav-wrap {
 left: 0;
 top: 0;
 display: none;
 width: 100%;
 height: 100%;
}
#top-head .nav-wrap.open {
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 background: rgba(0, 0, 0, .6);
 -webkit-backdrop-filter: blur(8px);
 backdrop-filter: blur(8px)
}
#top-head .nav-wrap.close {
 display: none;
}
#top-head .nav-wrap.open .nav-wrap-inner {
 animation-name: fadeLightAnime;
 animation-duration: 0.5s;
 background: var(--main-red);
 animation-fill-mode: forwards;
 opacity: 0;
 width: 60%;
 max-width: 400px;
 min-height: 600px;
 height: 100%;
 padding: 70px 30px 20px;
 display: table;
}
@keyframes fadeLightAnime {
 from {
  opacity: 0;
  transform: translateX(-100px); /* 左から開始 */
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}
.sns-fixed {
 position: fixed;
 right: 1.5rem;
 top: 1.5rem;
}
.sns {
 z-index: 10;
 display: flex;
 column-gap: 1rem;
}
.sns img {
 width: 24px;
}
.sns li a {
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 50%;
 background: #fff;
 width: 40px;
 height: 40px;
}
.share .item .link {
 display: block;
}
/*--------固定化されたときのCSS-----------*/
#top-head.fixed {
 position: fixed;
 top: 0;
 margin-top: 0;
 transition: top 0.6s ease;
 -webkit-transition: top 0.6s ease;
 -moz-transition: top 0.6s ease;
}
#top-head.fixed .nav-wrap .nav {
 font-size: clamp(2.4rem, 3vw, 4rem);
 display: flex;
 flex-direction: column;
 justify-content: center;
 margin-top: 5vh;
}
.header {
 justify-content: space-between;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 width: 100%;
}
#top-head.open .nav-wrap {
 position: fixed;
 overflow-x: hidden;
 overflow-y: auto;
}
#top-head .nav-wrap-inner {
 display: flex;
 transition: all 1000ms;
}
.nav-button {
 z-index: 1001;
 position: fixed;
 left: 0;
 top: 0;
 width: 100px;
 height: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 transition: transform 1.2s cubic-bezier(0.3, 0.7, 0.4, 1);
 background-color: var(--link-color);
}
.btn-menu__icon {
 position: relative;
 display: block;
 width: 40%;
 height: 2px;
 background: #000;
}
.btn-menu__icon:before, .btn-menu__icon:after {
 position: absolute;
 top: 50%;
 display: block;
 width: 100%;
 height: 2px;
 content: "";
 background: #000;
 transition: .2s ease transform, .2s ease translate;
}
.btn-menu__icon:before {
 translate: 0 -8px;
}
.btn-menu__icon:after {
 translate: 0 6px;
}
.nav-button.active .btn-menu__icon {
 background: transparent
}
.nav-button.active .btn-menu__icon:before {
 transform: rotate(135deg);
 translate: 0 0
}
.nav-button.active .btn-menu__icon:after {
 transform: rotate(225deg);
 translate: 0 0
}
#top-head:not(.fixed) .nav-button {
 display: none;
}
@media screen and (min-width: 813px) {
 #top-head .nav-wrap.open .nav-wrap-inner {
  padding-left: 50px;
 }
 #top-head.fixed .nav-wrap .nav .menu-item .header-x {
  width: 32px;
 }
}
@media screen and (min-width: 1025px) {
 #top-head:not(.fixed) .nav-wrap {
  display: flex;
  padding-right: 1.5%;
  padding-left: 1.5%;
 }
 #top-head:not(.fixed) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 0;
  background-color: var(--main-red);
 }
 .nav .menu-item {
  margin-right: 1.5%;
 }
}
@media screen and (min-width: 1240px) {
 .nav .menu-item {
  margin-right: 20px;
 }
}
@media screen and (max-width: 1024px) {
 #top-head:not(.fixed) .nav-button {
  display: flex;
 }
 #top-head .nav-wrap .nav .menu-item {
  margin: 1.6vh 0;
 }
}
@media screen and (max-width: 812px) {
 .nav-button {
  width: 60px;
  height: 50px;
 }
 .btn-menu__icon:before {
 translate: 0 -6px;
}
.btn-menu__icon:after {
 translate: 0 4px;
}
 .sns-fixed {
  top: .5rem;
  right: .5rem;
 }
 .sns li a {
  width: 30px;
  height: 30px;
 }
 .sns li a img {
  width: 18px;
 }
}
.slide-on {
 display: inline-flex;
}
.slide-on {
 position: relative;
 z-index: 0;
}
.slide-on::before {
 content: '';
 display: block;
 position: absolute;
 bottom: 2px;
 left: 0;
 z-index: -1;
 width: 0%;
 height: 2px;
 background-color: var(--link-color);
 -webkit-transition: .3s;
 transition: .3s;
}
.slide-on:hover::before {
 width: 100%;
}

/* ------------------------------
	メニュー
------------------------------ */
#top-head .nav-wrap .nav {
 font-size: clamp(3.2rem, 3.2vw, 4rem);
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 justify-content: center;
 margin-top: 5vh;
}
.header .nav-wrap.open .nav .link {
 opacity: 1;
}
#top-head:not(.fixed) .nav-wrap.open .nav .menu-item.sns {
 display: inline-flex;
}
#top-head:not(.fixed) .nav-wrap.open .nav .menu-item.sns .header-x {
 fill: #fff;
}
#top-head:not(.fixed) .nav-wrap .nav .menu-item .link:hover .header-x {
 fill: #fff;
}
@media screen and (min-width: 1025px) {
 #top-head:not(.fixed) .nav-wrap:not(.open) .nav-wrap-inner {
  display: none;
 }
 #top-head:not(.fixed) .nav-wrap.open {
  padding-right: 0;
  padding-left: 0;
 }
 #top-head:not(.fixed) .nav-wrap.open .nav {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
 }
 #top-head:not(.fixed) .nav-wrap.open .nav .menu-item {
  margin: 1.4vh 0;
 }
 #top-head:not(.fixed) .nav-button {
  display: flex;
 }
 #top-head {
  position: fixed;
  top: 0;
  margin-top: 0;
  height: 0;
 }
}