@charset "UTF-8";
/* ©SCHNEID 
Kazumi Nishibayashi */
/* ------------------------------
	メニュー
------------------------------ */
body.fixed {
 overflow: hidden; /* メニューが開いた時にスクロールさせないようにする */
}
#top-head {
 position: absolute;
 right: 0;
 z-index: 100;
 top: -120px;
 margin-top: 120px;
}
#top-head .nav-wrap .nav {
 font-size: clamp(2.2rem, 2.2vw, 2.6rem);
 display: flex;
}
.header .nav .link {
 line-height: 1em;
 text-decoration: none;
 text-align: center;
 white-space: nowrap;
 color: var(--base-white);
 display: block;
 padding: 0 5px;
 -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);
}
.header .nav-wrap.open .nav .link:hover {
 color: var(--main-red);
}
.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 li {
 display: inline-block;
 margin-left: 1.2rem;
}
.sns svg {
 width: 28px;
 fill: #000;
}
#top-head.fixed .sns.sns-fixed svg {
 transition: .5s;
 filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
 mix-blend-mode: exclusion;
}
#top-head:not(.fixed) .sns.sns-fixed svg, #header.open .sns.sns-fixed svg {
 fill: #fff;
 filter: none;
}
#top-head:not(.fixed) .nav-wrap .nav .sns {
 display: none;
}
#top-head.fixed .nav-wrap .nav .menu-item .header-x {
 fill: #fff;
 padding: 0 2px;
}
#top-head.fixed .nav-wrap .nav .menu-item .link:hover .header-x {
 fill: var(--main-red);
}
/*--------固定化されたときの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: absolute;
 left: 0;
 top: 0;
 width: 100px;
 height: 100px;
 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(--sub-blue);
}
.nav-button.active {}
.nav-button::after {
 content: "MENU";
 font-size: clamp(1.8rem, 2.8vw, 2.8rem);
 line-height: 1em;
 white-space: nowrap;
 color: var(--base-white);
}
.nav-button.active::after {
 content: "CLOSE";
}
#top-head:not(.fixed) .nav-button {
 display: none;
}
#top-head .sns.sns-fixed {
 position: absolute;
 right: 12px;
 top: 12px;
}
#top-head:not(.fixed) .sns img {
 width: 26px;
}
@media screen and (min-width: 813px) {
 #top-head .sns.sns-fixed {
  right: 20px;
  top: 20px;
 }
 #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);
 }
 #top-head:not(.fixed) .sns.sns-fixed {
  position: relative;
  top: 5px;
 }
 .nav .menu-item {
  margin-right: 1.4%;
 }
}
@media screen and (min-width: 1240px) {
 .nav .menu-item {
  margin-right: 16px;
 }
}
@media screen and (max-width: 1024px) {
 #top-head .nav-wrap .nav {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-bottom: 4rem;
 }
 #top-head:not(.fixed) .sns.sns-fixed {
  display: none;
 }
 #top-head:not(.fixed) .nav-button {
  display: flex;
 }
 #top-head .nav-wrap .nav {
  font-size: clamp(2.4rem, 3vw, 4rem);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 5vh;
 }
 #top-head .nav-wrap .nav .menu-item {
  margin: 1.6vh 0;
 }
 #top-head:not(.fixed) .sns.sns-fixed {
  display: block;
 }
 #top-head .sns.sns-fixed {
  right: 5px;
 }
}
@media screen and (max-width: 812px) {
 .nav-button {
  width: 60px;
  height: 60px;
 }
}
.slide-on {
 display: inline-flex;
}
.slide-on {
 position: relative;
 z-index: 0;
 overflow: hidden;
}
.slide-on::before {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 0%;
 height: 100%;
 background-color: var(--base-white);
 color: var(--main-red);
 -webkit-transition: .3s;
 transition: .3s;
}
.slide-on:hover::before {
 width: 100%;
}
.header .nav .link:hover {
 color: var(--main-red);
}
/* Page Top ボタンのスタイル */
#page-top {
 position: fixed; /* 画面に固定 */
 right: 20px; /* 右から20px */
 bottom: -60px; /* 初期状態では画面の下に隠す（ボタンの高さ+α） */
 width: 50px; /* ボタンの幅 */
 height: 50px; /* ボタンの高さ */
 background-color: var(--base-black); /* ボタンの背景色 */
 color: white; /* テキストの色 */
 text-decoration: none; /* 下線を消す */
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 軽い影 */
 opacity: 0; /* 初期状態は透明 */
 visibility: hidden; /* 初期状態は非表示（クリックできないように）*/
 transition: bottom 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s; /* アニメーション */
 z-index: 999; /* 他の要素より手前に表示 */
 font-size: 0; /* テキストのフォントサイズを0にする */
 line-height: 0; /* 行の高さを0にする */
 display: flex; /* flexboxを使って矢印を中央に配置 */
 justify-content: center;
 align-items: center;
}
#page-top::before {
 content: ""; /* 疑似要素には必須 */
 display: block; /* ブロック要素にする */
 width: 16px; /* 矢印のサイズを調整 */
 height: 16px; /* 矢印のサイズを調整 */
 border-top: 3px solid white; /* 上の線 */
 border-right: 3px solid white; /* 右の線 */
 transform: rotate(-45deg); /* 上向きに回転 */
 /* 矢印の位置調整（必要であれば） */
 margin-top: 8px; /* 例: 少し下にずらす */
 margin-left: 0; /* 例: 少し右にずらす */
}
/* ボタンが表示される時のスタイル */
#page-top.is-show {
 bottom: 20px; /* 画面の下から20pxの位置に表示 */
 opacity: 1; /* 不透明にする */
 visibility: visible; /* 表示状態にする */
}
/* ホバー時のスタイル */
#page-top:hover {
 background-color: var(--main-red);
}
@media screen and (max-width: 812px) {
 #page-top {
  width: 40px;
  height: 40px;
  right: 5px;
 }
 #page-top::before {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  margin-left: 4.5px;
 }
 #page-top.is-show {
  bottom: 5px;
 }
}