@charset "utf-8";

@font-face {
  font-family: "NotoSansJP-Black";
  src: url("../fonts/NotoSansJP-Black.otf") format("OpenType");
  font-weight: bold;
}

@font-face {
  font-family: "NotoSansJP-Bold";
  src: url("../fonts/NotoSansJP-Bold.otf") format("OpenType");
  font-weight: bold;
}

@font-face {
  font-family: "NotoSansJP-Medium";
  src: url("../fonts/NotoSansJP-Medium.otf") format("OpenType");
  font-weight: 500;
}

@font-face {
  font-family: "NotoSansJP-Regular";
  src: url("../fonts/NotoSansJP-Regular.otf") format("OpenType");
  font-weight: 500;
}

@font-face {
  font-family: "NotoSerifJP-Black";
  src: url("../fonts/NotoSerifJP-Black.otf") format("OpenType");
  font-weight: bold;
}

@font-face {
  font-family: "NotoSerifJP-Bold";
  src: url("../fonts/NotoSerifJP-Bold.otf") format("OpenType");
  font-weight: bold;
}

@font-face {
  font-family: "NotoSerifJP-Medium";
  src: url("../fonts/NotoSerifJP-Medium.otf") format("OpenType");
  font-weight: 500;
}

@font-face {
  font-family: "NotoSerifJP-Regular";
  src: url("../fonts/NotoSerifJP-Regular.otf") format("OpenType");
  font-weight: 400;
}

@font-face {
  font-family: "NotoSerifJP-SemiBold";
  src: url("../fonts/NotoSerifJP-SemiBold.otf") format("OpenType");
  font-weight: bold;
}

@font-face {
  font-family: "OleoScript-Bold";
  src: url("../fonts/OleoScript-Bold.ttf") format("TrueType");
  font-weight: bold;
}

@font-face {
  font-family: "OleoScript-Regular";
  src: url("../fonts/OleoScript-Regular.ttf") format("TrueType");
  font-weight: 400;
}

@font-face {
  font-family: "Poppins-ExtraBold";
  src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "NotoSerif-Regular";
  src: url("../fonts/NotoSerif-Regular.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "JosefinSans-Bold";
  src: url("../fonts/JosefinSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "JosefinSans-Regular";
  src: url("../fonts/JosefinSans-Regular.ttf") format("truetype");
  font-weight: 900;
}

body {
  display: flex;
  flex-flow: column;
  width: calc((100 / 1366) * 1366vw);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
  opacity: 0;
  animation: fadeIn 3s ease;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

:root {
  --font-jp: "NotoSansJP-Regular";
  --font-eng: "JosefinSans-Regular";
  --font-jp_b: "NotoSansJP-Bold";
  --font-eng_b: "JosefinSans-Bold";
  /*darkorange　R:255 G:140 B:0*/
  --menu-color: #ff8c00;
  /*blue R:0 G:0 B:255*/
  --blue: #0000ff;
  /*mediumturquoise R:72 G:209 B:204*/
  --mediumturquoise: #48d1cc;
  /*turquoise R:64 G:224 B:208*/
  --turquoise: #40e0d0;
}

a {
  text-decoration: none;
}

html {
  -webkit-overflow-scrolling: touch;
}

li {
  list-style: none;
}

/*footerをウィンドウ最下部へ固定する_______________________________________________________________wrapper*/
.wrapper {
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
  /*←footerと相対位置*/
  padding-bottom: calc((100 / 1366) * 450vw);
  /*←footerの高さ*/
  box-sizing: border-box;
  /*←全て含めてmin-height:100vhに*/
}

/*___________________________________________________________________________________________スクロールバーデザイン*/
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track-piece {
  display: none;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 1);
}

::-webkit-scrollbar-thumb {
  height: 50px;
  background: #fff;
  border-radius: 5px;
}

/*___________________________________________________________________________________________プログレスカウント*/

/* Loading背景画面設定　*/

#progress {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #fff;
  /*fixedで全面に固定*/
  position: fixed;
  z-index: 10;
}

/* Loadingバー中央配置　*/
#progressbar {
  width: 10%;
  color: #fff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/*見出し設定*/
h1 {
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 img {
  width: calc((100 / 1366) * 50vw);
}

/*___________________________________________________________________________________________スクロールダウン*/

/*スクロールダウン全体の場所*/
.scrolldown1 {
  display: none;
  width: calc((100 / 1366) * 1366vw);
  height: calc((100 / 1366) * 50vw);
  /*描画位置※位置は適宜調整してください*/
  position: relative;
  top: 40%;
  /*全体の高さ*/
}

/*Scrollテキストの描写*/
.scrolldown1 span {
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 14vw);
  color: #fff;
  /*描画位置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 線の描写 */
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  left: 50%;
  /*線の形状*/
  width: 2px;
  height: 200px;
  background: #fff;
  margin-top: 30px;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: linemove 1.4s ease-in-out infinite;
  opacity: 0;
  transition: all 1.5s ease;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes linemove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }

  30% {
    height: 30px;
    opacity: 1;
  }

  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}

/*___________________________________________________________________________________________各要素のフェードイン設定*/
/*___________________________________________________________________________________________newsのフェードイン*/
/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity 0.5s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp1 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity 0.5s, transform 0.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp1.is-inview1 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

/*___________________________________________________________________________________________concept 4つのフェードイン*/

/* フェードイン(初期値) */
.js-fadeUp2 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp2.is-inview2 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeUp3,
.js-fadeUp3-3 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp3.is-inview3,
.js-fadeUp3-3.is-inview3-3 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeUp3-2,
.js-fadeUp3-4 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp3-2.is-inview3-2,
.js-fadeUp3-4.is-inview3-4 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeUp4,
.js-fadeUp4-3 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp4.is-inview4,
.js-fadeUp4-3.is-inview4-3 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 1s;
  /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeUp4-2,
.js-fadeUp4-4 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp4-2.is-inview4-2,
.js-fadeUp4-4.is-inview4-4 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeUp4-1-1,
.js-fadeUp4-3-1 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(0px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp4-1-1.is-inview4-1-1,
.js-fadeUp4-3-1.is-inview4-3-1 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeUp4-2-1,
.js-fadeUp4-4-1 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(0px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp4-2-1.is-inview4-2-1,
.js-fadeUp4-4-1.is-inview4-4-1 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.8s;
  /* フェード開始を0.5秒遅らせる */
}

/*___________________________________________________________________________________________menuのフェードイン*/
/* フェードイン(初期値) */
.js-fadeUp5 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp5.is-inview5 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 1s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp5-2 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp5-2.is-inview5-2 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 1s;
  /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeUp6 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp6.is-inview6 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 1.3s;
  /* フェード開始を0.5秒遅らせる */
}

/* フェードイン(初期値) */
.js-fadeUp6-2 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp6-2.is-inview6-2 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 1.3s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp6-3 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1.5s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp6-3.is-inview6-3 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 1.3s;
  /* フェード開始を0.5秒遅らせる */
}

/*___________________________________________________________________________________________inquiryのフェードイン*/
.js-fadeUp7 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp7.is-inview7 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp8 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp8.is-inview8 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.8s;
  /* フェード開始を0.5秒遅らせる */
}

/*___________________________________________________________________________________________galleryのフェードイン*/
.js-fadeUp9 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp9.is-inview9 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp10 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp10.is-inview10 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.8s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp11 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp11.is-inview11 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.2s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp11-2 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp11-2.is-inview11-2 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 1s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp12 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp12.is-inview12 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.7s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp12-2 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp12-2.is-inview12-2 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 1s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp13 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp13.is-inview13 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 1.2s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp13-2 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp13-2.is-inview13-2 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 1s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp14 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp14.is-inview14 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.8s;
  /* フェード開始を0.5秒遅らせる */
}

/*___________________________________________________________________________________________footerのフェードイン*/
.js-fadeUp15 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp15.is-inview15 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.8s;
  /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp16 {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 下に30pxの位置から */
  transition: opacity 1s, transform 1s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.js-fadeUp16.is-inview16 {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0px);
  /* 30px上に移動する */
  transition-delay: 0.8s;
  /* フェード開始を0.5秒遅らせる */
}

/*___________________________________________________________________________________________header*/

/*header設定*/
#header {
  height: 100vh;
  /*高さを全画面にあわせる*/
  position: relative;
}

/*___________________________________________________________________________________________背景動画設定のCSS*/

#video-area {
  width: 100vw;
  position: fixed;
  z-index: -1;
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

.mgr-10 {
  margin-right: 10px;
}

.mgl-10 {
  margin-left: 10px;
}

.site-header {
  display: none;
  width: calc((100 / 1366) * 1366vw);
  height: calc((100 / 1366) * 200vw);
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 999;
  opacity: 0;
  animation-name: fadein1;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  transition: 0.5s all ease;
}

@keyframes fadein1 {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fixedが付与された時のCSS */
.site-header.fixed {
  width: calc((100 / 1366) * 1366vw);
  height: calc((100 / 1366) * 80vw);
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0;
  animation-name: fadein2;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes fadein2 {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header.fixed p {
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 14vw);
  color: #fff;
  position: absolute;
  /*要素を天地中央寄せ*/
  bottom: 100%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  transition: opacity 0.5s, transform 1s;
}

.site-header.fixed .menu-simbol h2 img {
  width: calc((100 / 1366) * 200vw);
  position: absolute;
  top: -10px;
  left: 50px;
}

.site-header.fixed::after {
  width: 100%;
}

.site-header.fixed nav {
  height: calc((100 / 1366) * 50vw);
  position: absolute;
  top: calc((100 / 1366) * 60vw);
}

.site-header.fixed ul {
  position: absolute;
  top: calc((100 / 1366) * 0vw);
  left: calc((100 / 1366) * 750vw);
}

.site-header.fixed .subTitle {
  opacity: 0;
}

.site-header.fixed nav ul li a {
  color: #fff;
}

/*変形後のメニューカラー*/
.site-header.fixed nav ul li.current a,
.site-header.fixed nav ul li a:hover {
  color: var(--menu-color);
}

/*gallery ドロップダウン*/
.g-nav_gallery {
  position: relative;
}

.site-header.fixed .g-nav_sns {
  display: none;
  width: calc((100 / 1366) * 70vw);
  padding-top: calc((100 / 1366) * 10vw);
  padding-bottom: calc((100 / 1366) * 10vw);
  position: absolute;
  top: calc((100 / 1366) * 25vw);
  left: 0;
  text-align: center;
}

.site-header.fixed .g-nav_sns img {
  display: inline-block;
  width: calc((100 / 1366) * 25vw);
  margin-top: calc((100 / 1366) * 10vw);
}

/* ホバー時の画像 */
.site-header.fixed .g-nav_sns li a img:nth-child(2) {
  display: none;
}

/* ホバー時のスタイル */
.site-header.fixed .g-nav_sns li a:hover img:nth-child(1) {
  display: none;
}

.site-header.fixed .g-nav_sns li a:hover img:nth-child(2) {
  display: inline-block;
}

/* /Fixed */

.is-hidden {
  visibility: hidden;
  opacity: 0;
  transition: 0.5s all ease;
}

.subTitle {
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 14vw);
  color: #fff;
  position: absolute;
  /*要素を天地中央寄せ*/
  bottom: -50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.menu-simbol {
  width: calc((100 / 1366) * 1366vw);
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

h2 {
  width: calc((100 / 1366) * 400vw);
}

h2 img {
  width: calc((100 / 1366) * 400vw);
}

.openbtn1 {
  display: none;
}

nav {
  display: flex;
  justify-content: center;
  width: calc((100 / 1366) * 1366vw);
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

nav ul {
  display: flex;
  justify-content: space-between;
  width: calc((100 / 1366) * 500vw);
  list-style: none;
}

nav ul li a {
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 14vw);
  color: #fff;
  position: relative;
}

/*メニュー下線の動き*/
nav ul li.current a,
nav ul li a:hover {
  color: var(--menu-color);
}

nav li a::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  top: 15px;
  left: 0;
  /*線の形状*/
  width: 100%;
  height: 2px;
  background: var(--menu-color);
  border-radius: 5px;
  /*アニメーションの指定*/
  transition: all 0.2s;
  transform: scale(0, 1);
  /*X方向0、Y方向1*/
  transform-origin: center top;
  /*上部中央基点*/
}

/*現在地とhoverの設定*/
nav li.current a::after,
nav li a:hover::after {
  transform: scale(1, 1);
  /*X方向にスケール拡大*/
}

/*gallery ドロップダウン*/
.g-nav_gallery {
  position: relative;
}

.g-nav_sns {
  display: none;
  width: calc((100 / 1366) * 70vw);
  padding-top: calc((100 / 1366) * 10vw);
  padding-bottom: calc((100 / 1366) * 10vw);
  position: absolute;
  top: calc((100 / 1366) * 25vw);
  left: 0;
  text-align: center;
}

.g-nav_sns img {
  display: inline-block;
  width: calc((100 / 1366) * 25vw);
  margin-top: calc((100 / 1366) * 10vw);
}

/* ホバー時の画像 */
.g-nav_sns li a img:nth-child(2) {
  display: none;
}

/* ホバー時のスタイル */
.g-nav_sns li a:hover img:nth-child(1) {
  display: none;
}

.g-nav_sns li a:hover img:nth-child(2) {
  display: inline-block;
}

/*___________________________________________________________________________________________news_header*/

#news {
  width: calc((100 / 1366) * 1366vw);
  height: calc((100 / 1366) * 868vw);
  background-color: rgba(255, 255, 255, 0);
}

h3 {
  font-family: var(--font-eng_b);
  font-size: calc((100 / 1366) * 100vw);
  color: #fff;
  text-align: center;
}

.news_wrapper {
  width: calc((100 / 1366) * 1366vw);
  background: rgba(0, 0, 0, 0);
  padding-top: calc((100 / 1366) * 50vw);
  padding-right: calc((100 / 1366) * 200vw);
  padding-bottom: calc((100 / 1366) * 50vw);
  padding-left: calc((100 / 1366) * 200vw);
}

/*___________________________________________________________________________________________news_スクロールデザイン*/
/*Google Chrome、Safariへの対応*/

.news_contentsWrapper::-webkit-scrollbar {
  width: 5px;
}

.news_contentsWrapper::-webkit-scrollbar-track-piece {
  display: none;
}

.news_contentsWrapper::-webkit-scrollbar-track {
  display: none;
}

.news_contentsWrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.news_main:hover .news_contentsWrapper::-webkit-scrollbar-thumb {
  height: 50px;
  background: rgba(244, 244, 244, 1);
  border-radius: 5px;
  opacity: 1;
}

/*___________________________________________________________________________________________news_main*/

.news_main {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: calc((100 / 1366) * 20vw);
  border-radius: 10px;
  margin-top: calc((100 / 1366) * 30vw);
  margin-right: calc((100 / 1366) * 50vw);
  margin-bottom: calc((100 / 1366) * 10vw);
  margin-left: calc((100 / 1366) * 50vw);
}

.news_contentsWrapper {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  height: calc((100 / 1366) * 250vw);
  padding-top: calc((100 / 1366) * 30vw);
  padding-right: calc((100 / 1366) * 20vw);
  padding-bottom: calc((100 / 1366) * 30vw);
  padding-left: calc((100 / 1366) * 50vw);
  margin-top: calc((100 / 1366) * 20vw);
  border-radius: 10px;
  overflow: auto;
}

.news_title_info {
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 16vw);
  color: #fff;
  text-align: center;
}

.news_title_info img {
  width: calc((100 / 1366) * 30vw);
}

.news_contents {
  width: 100%;
  height: 100%;
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 18vw);
  color: #fff;
  overflow-wrap: break-word;
}

.news_contents p {
  margin-top: 30px;
}

.news_contents p:first-child {
  margin-top: 0;
}

.news_flex {
  display: flex;
  justify-content: left;
}

.news_sidetitle {
  width: calc((100 / 1366) * 30vw);
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 12vw);
  color: #fff;
  padding-left: 10px;
  text-align: center;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

/*contents-maker 投稿後のレイアウト*/
.news_contents .cm-box {
  margin-top: 20px;
}

.news_contents .cm-box:nth-child(1) {
  margin-top: 0px;
}

.news_contents a {
  color: #fff;
  text-decoration: underline red 3px;
  text-underline-offset: 5px;
}

/*___________________________________________________________________________________________concept*/
#concept {
  width: 100%;
  height: calc((100 / 1366) * 1100vw);
  background-color: rgba(255, 255, 255, 0);
  scroll-margin-top: 200px;
}

.concept_title {
  font-family: var(--font-eng_b);
  font-size: calc((100 / 1366) * 73vw);
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

.concept_title h2 {
  width: 100%;
}

.concept_wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  /* グリッド間のスペースを設定 */
  width: 100%;
  height: 100vh;
  /* ビューポート全体の高さを使用 */
  padding: 20px;
}

.concept_content1,
.concept_content2,
.concept_content3,
.concept_content4 {
  position: relative;
  padding: 10px;
  /* 内側のパディングを設定 */
}

.concept_content1 img,
.concept_content2 img,
.concept_content3 img,
.concept_content4 img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: filter 0.1s ease;
}

.concept_content1 img:hover,
.concept_content2 img:hover,
.concept_content3 img:hover,
.concept_content4 img:hover {
  filter: grayscale(100%);
}

.concept_content_main1,
.concept_content_main2,
.concept_content_main3,
.concept_content_main4 {
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 16vw);
  border-radius: 10px;
  padding: calc((100 / 1366) * 10vw);
  position: absolute;
  top: 60%;
  left: 10%;
  z-index: 10;
  color: #fff;
  /* テキスト色を白に設定 */
  max-width: 75%;
  /* 最大幅を設定してコンテンツがはみ出ないように */
}

.concept_content_title1_1,
.concept_content_title2_1,
.concept_content_title3_1,
.concept_content_title4_1 {
  display: inline-block;
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 25vw);
  color: var(--menu-color);
  background: rgba(0, 0, 0, 1);
  /* 背景色を追加して読みやすくする */
  padding: 3px 3px 0 3px;
  border-radius: 3px 3px 0 0;
}

.concept_content_title1_2,
.concept_content_title2_2,
.concept_content_title3_2,
.concept_content_title4_2 {
  display: inline-block;
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 20vw);
  color: #ffffff;
  background: rgba(0, 0, 0, 1);
  /* 背景色を追加して読みやすくする */
  padding: 0 3px 3px 3px;
  border-radius: 0 3px 3px 3px;
}

/*___________________________________________________________________________________________menu*/

:root {
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
  --color-base: #f8f8f8;
  --color-gray: #ddd;
  --color-theme: #f5695f;
  --color-theme-darken: #f12617;
  --box-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
    -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, 0.08),
    -1rem -1rem 1.5rem #fff;
  --box-shadow-inset: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
    inset -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-dark: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.1),
    -0.8rem -0.8rem 1.2rem rgba(#fff, 0.2);
}

#top-menu {
  /*scroll-snap-align: start;*/
  width: calc((100 / 1366) * 1366vw);
  background-color: rgba(0, 0, 0, 0);
  margin-top: calc((100 / 1366) * 100vw);
  scroll-margin-top: 100px;
}

.top-menu_wrapper {
  width: 100%;
  padding-top: calc((100 / 1366) * 100vw);
  padding-right: calc((100 / 1366) * 50vw);
  padding-bottom: calc((100 / 1366) * 50vw);
  padding-left: calc((100 / 1366) * 50vw);
}

.top-menu_title {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 70vw);
  text-align: center;
  color: #fff;
}

.top-menu_title h2 {
  width: 100%;
}

.top-menu_subtitle {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.top-menu_subtitle h3 {
  display: block;
  width: 100%;
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 25vw);
  line-height: 2;
  color: #fff;
}

.top-menu_subtitle2 {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 100px;
}

.top-menu_subtitle2 h3 {
  display: block;
  width: 100%;
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 25vw);
  line-height: 2;
  color: #fff;
}

/*========= スワイパー1 ===============*/
/* スライド全体の余白 */
.basicMenu-swiper {
  margin-top: 50px;
}

/* 他のスライドを暗くする */
.basicMenu-swiper:hover .basicMenu-slide:not(:hover) {
  opacity: 0.7;
  filter: brightness(60%);
  cursor: pointer;
  transition: 0.5s all;
}

.basicMenu-slide {
  height: 70%;
  border-radius: 10px;
  overflow: hidden;
}

/* スライド画像のサイズ */
.basicMenu-slide img {
  width: 100%;
  height: 70%;
  border-radius: 10px;
  transition: 1s all;
}

.basicMenu-slide img:hover {
  transition: 0.5s all;
}

/* タイトルのスタイル */
.basicmenu_title {
  display: block;
  font-family: var(--font-eng_b);
  font-size: calc((100 / 1366) * 25vw);
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央位置を維持 */
  transition: opacity 0.5s ease-in-out; /* フェードアウト用 */
  opacity: 1; /* 初期表示は不透明 */
  z-index: 1; /* article より上に表示 */
}

/* タイトルのフェードアウト */
.basicMenu-slide:hover .basicmenu_title {
  opacity: 0; /* 小さくならずにそのままフェードアウト */
  transition: opacity 0.5s ease-in-out; /* 即座に消える */
  z-index: 0; /* article の下に移動 */
}

/* article 要素のスタイル */
.basicMenu-slide article {
  width: 100%; /* 背景画像と同じ幅 */
  max-width: 80%;
  margin-left: 20px;
  height: 100%; /* 背景画像と同じ高さ */
  position: absolute;
  top: 0%;
  left: 0;
  transform: scale(0.9); /* 小さく始める */
  opacity: 0; /* 初期は非表示 */
  border-radius: 10px; /* 背景画像の角丸と一致 */
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out; /* フェードイン調整 */
  display: flex; /* 子要素を中央揃え */
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 2; /* タイトルより上に表示 */
}

.basicMenu-slide article h3 {
  font-size: calc((100 / 1366) * 25vw);
  margin-bottom: calc((100 / 1366) * 20vw);
}

/* リンクのデフォルトスタイルをリセット */
.basicMenu-slide article a {
  color: #fff; /* 親要素の色を引き継ぐ */
  text-decoration: none; /* 下線を消す */
  transition: color 0.3s ease-in-out; /* カスタムアニメーションが必要なら */
}

/* ホバー時に色やスタイルをカスタマイズ（必要に応じて） */
.basicMenu-slide article a:hover {
  color: #fff; /* 色を維持（またはカスタマイズ） */
  text-decoration: none; /* ホバー時も下線を表示しない */
}

/* article 要素のフェードイン */
.basicMenu-slide:hover article {
  opacity: 1; /* フェードイン */
  transform: scale(1); /* 中心位置に拡大 */
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out; /* ゆっくりフェードイン */
}

/* ホバー解除時のタイトル遅延 */
.basicMenu-slide:not(:hover) .basicmenu_title {
  opacity: 1; /* 再び表示 */
  transition: opacity 0.5s ease-in-out 0.8s; /* article のアニメーションが完了してから表示 */
  z-index: 1; /* 再び上に移動 */
}

/* article 要素のフェードアウト */
.basicMenu-slide:not(:hover) article {
  opacity: 0; /* フェードアウト */
  transform: scale(0.9); /* 元に戻る */
  transition: opacity 0.5s ease-in-out, transform 1.2s ease-in-out;
}

/*.basicMenu_blur {
    filter: blur(3px) brightness(50%);
}*/

/*========= スワイパー2 ===============*/
#swiper-container {
  width: 100%;
  padding-left: 50px;
}

.menu-swiper {
  width: 100%;
  cursor: pointer;
}

.menu-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.menu-swiper .swiper-slide {
  width: calc((100 / 1366) * 300vw);
  height: calc((100 / 1366) * 450vw);
  background-color: var(--mediumturquoise);
  border-radius: 10px;
  margin-top: calc((100 / 1366) * 50vw);
  /*overflow: hidden;*/
  transition: all 0.5s ease-in-out;
}

.menu-swiper .swiper-slide figure {
  width: 100%;
  height: calc((100 / 1366) * 220vw);
  /*overflow: hidden;*/
}

.menu-swiper .swiper-slide img {
  width: 100%;
  filter: none;
  /* 通常時はフィルターなし */
  transition: 1s all;
}

.menu-swiper .swiper-slide:hover :nth-child(1) :nth-child(1) {
  transform: scale(1.2, 1.2);
  transition: 0.5s all;
}

.menu-swiper .swiper-slide:hover img {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  /* 画像の被写体に影を付ける */
}

.menu-swiper:hover .swiper-slide:not(:hover) {
  opacity: 1;
  filter: brightness(100%);
  cursor: pointer;
}

/* 前へ次への矢印カスタマイズ */
.menu-swiper .swiper-button-prev::after,
.menu-swiper .swiper-button-next::after {
  content: "";
  width: 0;
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}

.slide-content {
  width: 100%;
  max-width: 90%;
  height: calc((100 / 1366) * 190vw);
  padding: 10px;
  position: absolute;
  /* 画像上に配置するためabsoluteを使用 */
  overflow: hidden;
  z-index: 2;
  /* 画像より上に表示するためにz-indexを設定 */
}

.slide-content_title {
  font-family: var(--font-jp_b);
  font-size: calc((100 / 1366) * 20vw);
  color: #fff;
  margin-bottom: 5px;
  position: absolute;
  top: 10%;
}

.slide-content_contents {
  width: 100%;
  max-width: 90%;
  font-family: var(--font-jp_b);
  font-size: calc((100 / 1366) * 18vw);
  color: #fff;
  position: absolute;
  top: 30%;
}

/*___________________________________________________________________________________________inquiry*/

#inquiry {
  /*scroll-snap-align: start;*/
  width: calc((100 / 1366) * 1366vw);
  height: calc((100 / 1366) * 968vw);
  margin-top: 200px;
  scroll-margin-top: 100px;
}

.inquiry_title {
  width: 100%;
}

.inquiry_title_contnt {
  width: 100%;
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 100vw);
  color: #fff;
  text-align: center;
}

.inquiry_wrapper {
  width: calc((100 / 1366) * 1366vw);
  height: 100%;
  padding-top: calc((100 / 1366) * 50vw);
  padding-right: calc((100 / 1366) * 200vw);
  padding-bottom: calc((100 / 1366) * 50vw);
  padding-left: calc((100 / 1366) * 200vw);
}

.inquiry_inner {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: calc((100 / 1366) * 50vw);
  padding-right: calc((100 / 1366) * 150vw);
  padding-bottom: calc((100 / 1366) * 50vw);
  padding-left: calc((100 / 1366) * 150vw);
  border-radius: 10px;
  margin-top: 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.inquiry_inner:hover {
  background-color: rgba(0, 0, 0, 1);
  transition: 0.5s ease-in-out;
}

.inquiry_content_info {
  width: 100%;
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 20vw);
  color: #fff;
  margin-bottom: calc((100 / 1366) * 30vw);
}

.inquiry_content {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px;
  line-height: 2;
}

.tel {
  width: 100%;
  padding: 10px 0px 10px 0px;
  text-align: center;
  position: relative;
}

.tel a {
  font-family: var(--font-jp_b);
  font-size: calc((100 / 1366) * 20vw);
  color: #fff;
}

.inquiry_centerLine {
  border: 1px solid #fff;
  border-radius: 5px;
}

.mail {
  width: 100%;
  padding: 25px 0px 10px 0px;
  text-align: center;
}

.tel_icon {
  width: calc((100 / 1366) * 40vw);
  padding-bottom: 20px;
}

.comme_icon {
  width: calc((100 / 1366) * 40vw);
  position: absolute;
  top: 10px;
  left: 52%;
}

.mail_icon {
  width: calc((100 / 1366) * 60vw);
  margin-bottom: 25px;
}

.tel_info,
.tel_no,
.mail_info,
.mail_add,
.mail_form {
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 20vw);
  color: #fff;
}

.tel_info_bold,
.mail_info_bold {
  font-family: var(--font-jp_b);
  color: #fff;
}

/*___________________________________________________________________________________________inquiry 矢印エフェクト*/
.inquiry_arrow {
  display: inline-block;
  width: 65%;
  padding: 10px 30px 10px 20px;
  text-align: center;
  font-family: var(--font-jp_b);
  font-size: calc((100 / 1366) * 20vw);
  color: #fff;
  margin: 2px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.inquiry_arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 5px);
  right: calc((100 / 1366) * 10vw);
  width: calc((100 / 1366) * 35vw);
  height: 6px;
  border: none;
  border-right: 2px solid #fff;
  border-bottom: 1px solid #fff;
  transform: skew(45deg);
  transition: 0.2s;
}

.inquiry_arrow:hover::after {
  right: calc((100 / 1366) * 0vw);
  width: calc((100 / 1366) * 45vw);
}

/*___________________________________________________________________________________________/inquiry 矢印エフェクト*/

.gmail-info {
  width: 100%;
  padding-top: 10px;
}

.gmail-info_content {
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 20vw);
  color: #fff;
}

.gmail-info_gmail {
  display: flex;
  justify-content: center;
  width: 100%;
  font-family: var(--font-jp_b);
  font-size: calc((100 / 1366) * 20vw);
  padding-top: 20px;
  position: relative;
}

.gmail-info_gmail a {
  position: relative;
  color: #fff;
  text-decoration: none;
}

/* 下線のスタイル */
.gmail-info_gmail a::after {
  content: "";
  position: absolute;
  top: calc((100 / 1366) * 30vw);
  /* 下線の位置を微調整 */
  left: 0;
  width: 100%;
  height: 3px;
  background: red;
  border-radius: 5px;
  transition: all 0.2s;
  transform: scale(0, 1);
  transform-origin: center top;
}

.gmail-info:hover .gmail-info_gmail a::after,
.gmail-info_gmail a:hover::after {
  transform: scale(1, 1);
}

/*___________________________________________________________________________________________gallery*/

.gallery_title {
  width: 100%;
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 40vw);
  color: #fff;
  margin-top: calc((100 / 1366) * 100vw);
  margin-bottom: calc((100 / 1366) * 20vw);
}

.gallery_title h2 {
  width: 100%;
  text-align: center;
}

.gallery_content {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 70%;
}

.gallery_sns {
  width: 15%;
  height: calc((100 / 1366) * 120vw);
  position: relative;
}

.gallery_bg {
  /*width: 100%;*/
  height: 100%;
}

.gallery_sns:first-child:hover .gallery_snsIcon:nth-child(2) {
  opacity: 1;
  cursor: pointer;
}

.gallery_sns:nth-child(2):hover .gallery_snsIcon:nth-child(2) {
  opacity: 1;
  cursor: pointer;
}

.gallery_sns:nth-child(3):hover .gallery_snsIcon:nth-child(2) {
  opacity: 1;
  cursor: pointer;
}

.gallery_sns a img {
  width: calc((100 / 1366) * 35vw);
  height: calc((100 / 1366) * 35vw);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease 0s;
}

.gallery_sns a img:last-child {
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery_sns a:hover img:last-child {
  opacity: 1;
}

.gallery_announce {
  display: flex;
  justify-content: center;
  text-align: center;
}

.gallery_announce p {
  width: 100%;
  /*background-color: #000;*/
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 18vw);
  color: #fff;
  border-radius: 5px;
  padding-top: calc((100 / 1366) * 50vw);
  padding-right: calc((100 / 1366) * 5vw);
  padding-bottom: calc((100 / 1366) * 5vw);
  padding-left: calc((100 / 1366) * 5vw);
}

/*___________________________________________________________________________________________footer*/

#footer {
  width: calc((100 / 1366) * 1366vw);
  height: calc((100 / 1366) * 568vw);
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  /*←絶対位置*/
  bottom: 0;
  /*下に固定
    z-index: 10;*/
}

.footer_wrapper {
  width: 100%;
  height: 100%;
  padding-top: calc((100 / 1366) * 150vw);
  padding-right: calc((100 / 1366) * 50vw);
  padding-bottom: calc((100 / 1366) * 20vw);
  padding-left: calc((100 / 1366) * 50vw);
}

.footer_inner {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  margin-top: calc((100 / 1366) * 60vw);
}

.footer_logo img {
  width: calc((100 / 1366) * 200vw);
  object-fit: cover;
  object-position: left top;
}

.footer_address {
  width: 100%;
  text-align: center;
  padding-top: calc((100 / 1366) * 50vw);
  line-height: 2;
}

.footer_address p {
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 14vw);
  color: #fff;
}

.footer_address p:nth-child(3) {
  margin-top: 10px;
}

.footer_address a {
  font-family: var(--font-jp);
  font-size: calc((100 / 1366) * 14vw);
  color: #fff;
  text-decoration: none;
}

.footer_address a .color {
  transition: all 0.3s ease 0s;
}

.footer_address a:hover .color {
  color: var(--menu-color);
}

.footer_address .mgr {
  margin-right: calc((100 / 1366) * 20vw);
}

.footer_inner2 {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  margin-top: calc((100 / 1366) * 50vw);
}

.footer_nav {
  width: 100%;
}

.footer_nav_li {
  display: flex;
  justify-content: center;
  width: 100%;
}

.footer_nav_content {
  display: flex;
  justify-content: space-between;
  width: 35%;
}

.footer_nav_item {
  cursor: pointer;
}

.footer_nav_item a {
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 14vw);
  color: #fff;
  border-left: 2px solid #fff;
  padding-top: calc((100 / 480) * 1vw);
  padding-left: calc((100 / 480) * 3vw);
  transition: all 0.3s ease 0s;
}

.footer_nav_item a:hover {
  color: var(--menu-color);
  border-color: var(--menu-color);
}

.footer_copylight {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
}

.footer_copylight p {
  font-family: var(--font-eng);
  font-size: calc((100 / 1366) * 14vw);
  color: #fff;
}

.footer_copylight img {
  width: calc((100 / 1366) * 100vw);
  margin-left: 10px;
}

/*____________________________________________________________________________________________________________media_768*/
@media (max-width: 768px) {
  /*footerをウィンドウ最下部へ固定する_______________________________________________________________tab_wrapper*/
  .wrapper {
    /*scroll-snap-type: y mandatory;*/
    min-height: 100vh;
    position: relative;
    /*←footerと相対位置*/
    padding-bottom: calc((100 / 768) * 550vw);
    /*←footerの高さ*/
    box-sizing: border-box;
    /*←全て含めてmin-height:100vhに*/
  }

  /*___________________________________________________________________________________________768_スクロールダウン*/

  /*スクロールダウン全体の場所*/
  .scrolldown1 {
    display: none;
    width: calc((100 / 768) * 768vw);
    height: calc((100 / 768) * 50vw);
    /*描画位置※位置は適宜調整してください*/
    position: relative;
    top: 40%;
    /*全体の高さ*/
  }

  /*Scrollテキストの描写*/
  .scrolldown1 span {
    font-family: var(--font-eng);
    font-size: calc((100 / 768) * 14vw);
    color: #fff;
    /*描画位置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 線の描写 */
  .scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    left: 50%;
    /*線の形状*/
    width: 2px;
    height: 200px;
    background: #fff;
    margin-top: 30px;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: linemove 1.4s ease-in-out infinite;
    opacity: 0;
    transition: all 1.5s ease;
  }

  /*高さ・位置・透過が変化して線が上から下に動く*/
  @keyframes linemove {
    0% {
      height: 0;
      top: 0;
      opacity: 0;
    }

    30% {
      height: 30px;
      opacity: 1;
    }

    100% {
      height: 0;
      top: 50px;
      opacity: 0;
    }
  }

  /*___________________________________________________________________________________________768_headerのCSS*/
  #header {
    height: 100vh;
    /*高さを全画面にあわせる*/
    position: relative;
  }

  /*___________________________________________________________________________________________tab_背景動画設定のCSS*/

  #video-area {
    width: 100vw;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
    /*最背面に設定*/
  }

  #video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh;
    /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw;
    /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
  }

  .mgr-10 {
    margin-right: 10px;
  }

  .mgl-10 {
    margin-left: 10px;
  }

  .site-header {
    display: none;
    width: calc((100 / 768) * 768vw);
    height: calc((100 / 768) * 200vw);
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 10;
    opacity: 0;
    animation-name: fadein1;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  @keyframes fadein1 {
    0% {
      opacity: 0;
      transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Fixedが付与された時のCSS */
  .site-header.fixed {
    width: calc((100 / 768) * 768vw);
    height: calc((100 / 768) * 100vw);
    background: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0px;
    left: 0%;
    animation-name: fadein2;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  @keyframes fadein2 {
    0% {
      opacity: 0;
      transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .site-header.fixed p {
    font-family: var(--font-eng);
    font-size: calc((100 / 768) * 14vw);
    color: #fff;
    position: absolute;
    /*要素を天地中央寄せ*/
    bottom: 0%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: opacity 0.5s, transform 1s;
  }

  .site-header.fixed .menu-simbol h2 img {
    width: calc((100 / 768) * 200vw);
    position: absolute;
    top: -20px;
    left: 50px;
  }

  .site-header.fixed::after {
    width: 100%;
  }

  .site-header.fixed nav {
    width: 100%;
    height: 20vh;
    position: absolute;
    z-index: -1;
    top: -120%;
    left: 0;
    transform: none;
  }

  .site-header.fixed ul {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .site-header.fixed .subTitle {
    opacity: 0;
  }

  .site-header.fixed nav ul li a {
    font-family: var(--font-eng);
    font-size: calc((100 / 768) * 14vw);
    color: #fff;
  }

  /*変形後のメニューカラー*/
  .site-header.fixed nav ul li.current a,
  .site-header.fixed nav ul li a:hover {
    color: #0000ff;
  }

  .site-header.fixed .openbtn1 {
    display: block;
    position: fixed;
    /*ボタンを最前面に*/
    top: -10px;
    right: 50px;
    cursor: pointer;
    width: 50px;
    height: 50px;
  }

  /*×に変化*/
  .site-header.fixed .openbtn1 span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 14px;
    height: 1px;
    border-radius: 2px;
    background-color: #fff;
    width: 70%;
  }

  .site-header.fixed .openbtn1 span:nth-of-type(1) {
    top: 15px;
  }

  .openbtn1 span:nth-of-type(2) {
    top: 23px;
  }

  .site-header.fixed .openbtn1 span:nth-of-type(3) {
    top: 31px;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(2) {
    opacity: 0;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
  }

  /*gallery ドロップダウン*/
  .site-header.fixed .g-nav_gallery {
    position: relative;
  }

  .site-header.fixed .g-nav_sns {
    display: none;
    background-color: var(--menu-color);
    width: calc((100 / 768) * 70vw);
    border: solid #ff8c00 1px;
    border-radius: 10px;
    padding-top: calc((100 / 768) * 10vw);
    padding-bottom: calc((100 / 768) * 10vw);
    position: absolute;
    z-index: -1;
    top: 0%;
    left: 0;
    text-align: center;
    transform: translateY(20%);
  }

  /*吹き出しの三角部分*/
  .site-header.fixed .g-nav_sns::before {
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ff8c00 transparent;
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -9px;
    display: block;
    width: 0px;
    height: 0px;
    z-index: 0;
  }

  .site-header.fixed .g-nav_sns img {
    width: calc((100 / 768) * 25vw);
    margin-top: calc((100 / 768) * 10vw);
  }

  /* ホバー時の画像 */
  .site-header.fixed .g-nav_sns li a img:nth-child(2) {
    display: none;
  }

  /* ホバー時のスタイル */
  .site-header.fixed .g-nav_sns li a:hover img:nth-child(1) {
    display: none;
  }

  .site-header.fixed .g-nav_sns li a:hover img:nth-child(2) {
    display: inline-block;
  }

  /* /Fixed */

  .is-hidden {
    display: block;
    visibility: hidden;
    opacity: 0;
  }

  .subTitle {
    font-family: var(--font-eng);
    font-size: calc((100 / 768) * 14vw);
    color: #fff;
    position: absolute;
    top: 90%;
    bottom: 20%;
    left: 50%;
    /*要素を天地中央寄せ*/
    transform: translateY(-50%) translateX(-50%);
  }

  .menu-simbol {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  h2 {
    width: calc((100 / 768) * 350vw);
  }

  h2 img {
    width: 100%;
  }

  nav {
    width: 100%;
    height: 20vh;
    /*ナビの高さ*/
    background-color: var(--menu-color);
    position: fixed;
    top: -150%;
    left: 0;
    opacity: 0;
    /*動き*/
    transition: all 0.6s;
    transform: none;
  }

  .site-header.fixed nav.panelactive {
    top: 0;
    opacity: 1;
    transform: none;
  }

  nav ul {
    display: flex;
    justify-content: space-between;
    width: 60%;
    list-style: none;
    position: absolute;
    z-index: 999;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  nav ul li a {
    font-family: var(--font-eng);
    font-size: calc((100 / 768) * 18vw);
    color: #fff;
    position: relative;
  }

  /*メニュー下線の動き*/
  nav ul li.current a,
  nav ul li a:hover {
    color: #0000ff;
  }

  nav li a::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    top: 15px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background: #0000ff;
    border-radius: 5px;
    /*アニメーションの指定*/
    transition: all 0.2s;
    transform: scale(0, 1);
    /*X方向0、Y方向1*/
    transform-origin: center top;
    /*上部中央基点*/
  }

  /*現在地とhoverの設定*/
  nav li.current a::after,
  nav li a:hover::after {
    transform: scale(1, 1);
    /*X方向にスケール拡大*/
  }

  /*___________________________________________________________________________________________tab_news_header*/

  #news {
    /*scroll-snap-align: start;*/
    width: 100%;
    height: calc((100 / 768) * 500vw);
    background-color: rgba(255, 255, 255, 0);
    scroll-margin-top: 100px;
  }

  #news h3 {
    font-size: calc((100 / 768) * 60vw);
  }

  .news_wrapper {
    width: 100%;
    background: rgba(0, 0, 0, 0);
    padding-top: calc((100 / 768) * 0vw);
    padding-right: calc((100 / 768) * 50vw);
    padding-bottom: calc((100 / 768) * 50vw);
    padding-left: calc((100 / 768) * 50vw);
  }

  /*___________________________________________________________________________________________tab_news_main*/
  .news_main {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: calc((100 / 768) * 20vw);
    border-radius: 10px;
    margin-top: calc((100 / 768) * 30vw);
    margin-right: calc((100 / 768) * 0vw);
    margin-bottom: calc((100 / 768) * 10vw);
    margin-left: calc((100 / 768) * 0vw);
  }

  .news_contentsWrapper {
    background-color: rgba(0, 0, 0, 0);
    height: calc((100 / 768) * 200vw);
    padding-top: calc((100 / 768) * 0vw);
    padding-right: calc((100 / 768) * 20vw);
    padding-bottom: calc((100 / 768) * 30vw);
    padding-left: calc((100 / 768) * 10vw);
    margin-top: calc((100 / 768) * 10vw);
    border-radius: 10px;
    overflow: auto;
  }

  .news_title_info {
    font-family: var(--font-eng);
    font-size: calc((100 / 768) * 16vw);
    color: #fff;
    text-align: center;
  }

  .news_title_info img {
    width: calc((100 / 768) * 30vw);
  }

  .news_contents {
    width: 100%;
    height: 100%;
    font-family: var(--font-jp);
    font-size: calc((100 / 768) * 16vw);
    color: #fff;
    margin-top: calc((100 / 768) * 20vw);
    overflow-wrap: break-word;
  }

  .news_contents p {
    margin-top: 25px;
  }

  .news_contents p:first-child {
    margin-top: 0;
  }

  .news_flex {
    display: flex;
    justify-content: left;
  }

  .news_sidetitle {
    width: calc((100 / 768) * 30vw);
    font-family: var(--font-eng);
    font-size: calc((100 / 768) * 12vw);
    color: #fff;
    padding-left: 15px;
    text-align: center;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
  }

  /*contents-maker 投稿後のレイアウト*/
  .news_contents .cm-box {
    margin-top: 20px;
  }

  .news_contents .cm-box:nth-child(1) {
    margin-top: 0px;
  }

  /*___________________________________________________________________________________________concept*/
  #concept {
    height: calc((100 / 768) * 650vw);
    padding-bottom: calc((100 / 768) * 50vw);
    scroll-margin-top: 150px;
  }

  .concept_title {
    font-family: var(--font-eng_b);
    font-size: calc((100 / 768) * 40vw);
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }

  .concept_title h2 {
    width: 100%;
  }

  .concept_wrapper {
    width: 100%;
    height: 50%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    /* グリッド間のスペースを設定 */
    padding: calc((100 / 768) * 20vw);
  }

  .concept_content1,
  .concept_content2,
  .concept_content3,
  .concept_content4 {
    position: relative;
    padding: 10px;
    /* 内側のパディングを設定 */
  }

  .concept_content_main1,
  .concept_content_main2,
  .concept_content_main3,
  .concept_content_main4 {
    padding: calc((100 / 768) * 10vw);
    max-width: 85%;
    /* 最大幅を設定してコンテンツがはみ出ないように */
    position: absolute;
    top: 60%;
    left: 5%;
  }

  .concept_content_title1_1,
  .concept_content_title2_1,
  .concept_content_title3_1,
  .concept_content_title4_1 {
    font-size: calc((100 / 768) * 18vw);
    background: rgba(0, 0, 0, 1);
    /* 背景色を追加して読みやすくする */
    padding: 5px 3px 0 3px;
    border-radius: 3px 3px 0 0;
  }

  .concept_content_title1_2,
  .concept_content_title2_2,
  .concept_content_title3_2,
  .concept_content_title4_2 {
    font-size: calc((100 / 768) * 14vw);
  }

  /*___________________________________________________________________________________________tab_menu*/

  #top-menu {
    /*scroll-snap-align: start;*/
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    margin-top: calc((100 / 768) * 50vw);
  }

  .top-menu_wrapper {
    width: 100%;
    height: 100%;
    padding-top: calc((100 / 768) * 50vw);
    padding-right: calc((100 / 768) * 30vw);
    padding-bottom: calc((100 / 768) * 50vw);
    padding-left: calc((100 / 768) * 30vw);
  }

  .top-menu_title {
    font-size: calc((100 / 768) * 40vw);
  }

  .top-menu_title h2 {
    width: 100%;
  }

  .top-menu_subtitle {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }

  .top-menu_subtitle h3 {
    display: block;
    width: 100%;
    font-family: var(--font-jp);
    font-size: calc((100 / 768) * 20vw);
    line-height: 2;
    color: #fff;
  }

  .top-menu_subtitle2 {
    margin-top: 30px;
  }

  .top-menu_subtitle2 h3 {
    width: 100%;
    font-family: var(--font-jp);
    font-size: calc((100 / 768) * 20vw);
  }

  /*========= スワイパー1 ===============*/
  /* スライド全体の余白 */
  .basicMenu-swiper {
    margin-top: 20px;
    /* スライダー上の余白 */
    padding-left: 10vw;
    /* スライダー左の余白 */
    padding-right: 20px;
    /* スライダー右の余白 */
    position: relative;
  }

  .basicMenu-swiper:hover .basicMenu-slide:not(:hover) {
    opacity: 1;
    filter: brightness(60%);
    cursor: pointer;
    transition: 0.5s all;
  }

  .basicMenu-slide {
    height: 80%;
    border-radius: 10px;
    overflow: hidden;
  }

  /* スライド画像のサイズ */
  .basicMenu-slide img {
    width: 100%;
    height: 70%;
    border-radius: 10px;
    transition: 1s all;
  }

  .basicMenu-slide img:hover {
    /*transform: scale(1.1, 1.1);*/
    transition: 0.5s all;
  }

  .basicmenu_title {
    width: 100%;
    max-width: 80%;
    font-size: calc((100 / 768) * 18vw);
    text-align: center;
  }

  .basicMenu-slide:hover .basicmenu_title {
    color: #fff;
    filter: brightness(100%);
    opacity: 0; /* 小さくならずにそのままフェードアウト */
    transition: opacity 0.5s ease-in-out; /* 即座に消える */
    z-index: 0; /* article の下に移動 */
  }

  .basicMenu-slide article {
    max-width: 90%;
    margin-left: 20px;
  }

  .basicMenu-slide article h3 {
    font-family: var(--font-eng_b);
    font-size: calc((100 / 768) * 18vw);
    color: #fff;
  }

  .basicMenu-slide article p {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 768) * 16vw);
    color: #fff;
    margin-top: 10px;
    line-height: 2;
  }

  /* article 要素のフェードイン */
  .basicMenu-slide:hover article {
    opacity: 1; /* フェードイン */
    transform: scale(1); /* 中心位置に拡大 */
    transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out; /* ゆっくりフェードイン */
  }

  .basicMenu_blur {
    filter: blur(3px) brightness(70%);
  }

  /*========= スワイパー2 ===============*/
  #swiper-container {
    width: 100%;
    padding-left: 30px;
  }

  .menu-swiper {
    width: 100%;
    cursor: pointer;
  }

  .menu-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
  }

  .menu-swiper .swiper-slide {
    width: calc((100 / 768) * 250vw);
    height: calc((100 / 768) * 350vw);
    margin-top: calc((100 / 768) * 30vw);
  }

  .menu-swiper .swiper-slide figure {
    width: 100%;
    height: calc((100 / 768) * 220vw);
  }

  .menu-swiper .swiper-slide:hover img {
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    /* 画像の被写体に影を付ける */
  }

  .slide-content {
    width: 100%;
    max-width: 90%;
    height: calc((100 / 768) * 190vw);
    padding: 10px;
    position: absolute;
    /* 画像上に配置するためabsoluteを使用 */
    overflow: hidden;
    z-index: 2;
    /* 画像より上に表示するためにz-indexを設定 */
  }

  .slide-content_title {
    font-family: var(--font-jp);
    font-size: calc((100 / 768) * 16vw);
    color: #fff;
    margin-bottom: 5px;
    position: absolute;
    top: 5%;
  }

  .slide-content_contents {
    width: 100%;
    max-width: 90%;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 768) * 14vw);
    color: #fff;
    position: absolute;
    top: 20%;
  }

  /*___________________________________________________________________________________________tab_inquiry*/

  #inquiry {
    /*scroll-snap-align: start;*/
    width: 100%;
    height: 100%;
    scroll-margin-top: 100px;
  }

  .inquiry_wrapper {
    width: 100%;
    padding-top: calc((100 / 768) * 50vw);
    padding-right: calc((100 / 768) * 50vw);
    padding-bottom: calc((100 / 768) * 50vw);
    padding-left: calc((100 / 768) * 50vw);
  }

  .inquiry_title {
    width: 100%;
    margin-top: 50px;
  }

  .inquiry_title_contnt {
    font-size: calc((100 / 768) * 60vw);
  }

  .inquiry_inner {
    width: 100%;
    padding-top: calc((100 / 768) * 50vw);
    padding-right: calc((100 / 768) * 50vw);
    padding-bottom: calc((100 / 768) * 50vw);
    padding-left: calc((100 / 768) * 50vw);
    margin-top: 30px;
  }

  .inquiry_content_info {
    font-size: calc((100 / 768) * 16vw);
    margin-bottom: 20px;
  }

  .tel {
    text-align: center;
    position: relative;
  }

  .tel a {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 768) * 14vw);
    color: #fff;
  }

  .mail {
    text-align: center;
    padding-top: 15px;
  }

  .tel_icon {
    width: calc((100 / 768) * 40vw);
    padding-bottom: 20px;
  }

  .comme_icon {
    width: calc((100 / 768) * 40vw);
    position: absolute;
    top: 10px;
    left: 60%;
  }

  .mail_icon {
    width: calc((100 / 768) * 60vw);
    margin-bottom: 35px;
  }

  .tel_info,
  .tel_no,
  .mail_info,
  .mail_add,
  .mail_form {
    font-size: calc((100 / 768) * 18vw);
  }

  /*___________________________________________________________________________________________tab_inquiry 矢印エフェクト*/

  .inquiry_arrow {
    display: inline-block;
    width: 60%;
    padding: 10px 10px 10px 5px;
    text-align: center;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 768) * 14vw);
    color: #fff;
    margin: 2px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
  }

  .inquiry_arrow::after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    right: 10%;
    width: 15%;
    height: 6px;
    border: none;
    border-right: 0.3vw solid #fff;
    border-bottom: 1px solid #fff;
    transform: skew(45deg);
    transition: 0.2s;
  }

  .inquiry_arrow:hover::after {
    right: 5%;
    width: 20%;
  }

  /*___________________________________________________________________________________________/tab_inquiry 矢印エフェクト*/

  .gmail-info {
    width: 100%;
    padding-top: 10px;
  }

  .gmail-info_content {
    font-size: calc((100 / 768) * 16vw);
  }

  .gmail-info_gmail {
    width: 100%;
    font-size: calc((100 / 768) * 16vw);
    padding-top: 20px;
  }

  .gmail-info_gmail a {
    position: relative;
    text-decoration: none;
  }

  /* 下線のスタイル */
  .gmail-info_gmail a::after {
    content: "";
    position: absolute;
    top: calc((100 / 768) * 30vw);
    /* 下線の位置を微調整 */
    left: 0;
    width: 100%;
    height: 3px;
    background: red;
    border-radius: 5px;
    transition: all 0.2s;
    transform: scale(0, 1);
    transform-origin: center top;
  }

  .gmail-info:hover .gmail-info_gmail a::after,
  .gmail-info_gmail a:hover::after {
    transform: scale(1, 1);
  }

  /*___________________________________________________________________________________________gallery*/

  .gallery_title {
    width: 100%;
    margin-top: calc((100 / 768) * 20vw);
    margin-bottom: calc((100 / 768) * 30vw);
  }

  .gallery_title h2 {
    width: 100%;
    font-family: var(--font-eng);
    font-size: calc((100 / 768) * 30vw);
    color: #fff;
    text-align: center;
  }

  .gallery_content {
    width: 100%;
    height: 65%;
  }

  .gallery_sns {
    height: calc((100 / 768) * 100vw);
  }

  .gallery_sns:first-child:hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns:nth-child(2):hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns:nth-child(3):hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns a img {
    width: calc((100 / 768) * 40vw);
    height: calc((100 / 768) * 40vw);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease 0s;
  }

  .gallery_sns a:hover img:last-child {
    opacity: 1;
  }

  .gallery_announce p {
    font-size: calc((100 / 768) * 16vw);
    padding-top: calc((100 / 768) * 50vw);
    padding-right: calc((100 / 768) * 5vw);
    padding-bottom: calc((100 / 768) * 5vw);
    padding-left: calc((100 / 768) * 5vw);
  }

  /*___________________________________________________________________________________________tab_footer*/

  #footer {
    /*scroll-snap-align: start;*/
    width: calc((100 / 768) * 768vw);
    height: calc((100 / 768) * 500vw);
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    /*←絶対位置*/
    bottom: 0;
    /*下に固定
        z-index: 10;*/
  }

  .footer_wrapper {
    padding-top: calc((100 / 768) * 50vw);
    padding-right: calc((100 / 768) * 50vw);
    padding-bottom: calc((100 / 768) * 20vw);
    padding-left: calc((100 / 768) * 50vw);
  }

  .footer_inner {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    margin-top: calc((100 / 768) * 60vw);
  }

  .footer_logo img {
    width: calc((100 / 768) * 200vw);
    object-fit: cover;
    object-position: left top;
  }

  .footer_address {
    width: 100%;
    text-align: center;
    padding-top: calc((100 / 768) * 50vw);
    line-height: 2;
  }

  .footer_address p {
    font-size: calc((100 / 768) * 14vw);
  }

  .footer_address p:nth-child(3) {
    margin-top: 10px;
  }

  .footer_address a {
    font-size: calc((100 / 768) * 14vw);
  }

  .footer_address a .color {
    transition: all 0.3s ease 0s;
  }

  .footer_address .mgr {
    margin-right: calc((100 / 768) * 20vw);
  }

  .footer_inner2 {
    width: 100%;
    margin-top: calc((100 / 768) * 50vw);
  }

  .footer_nav {
    width: 100%;
  }

  .footer_nav_li {
    width: 100%;
  }

  .footer_nav_content {
    width: 60%;
  }

  .footer_nav_item a {
    font-size: calc((100 / 768) * 14vw);
    border-left: 2px solid #fff;
    padding-top: calc((100 / 480) * 1vw);
    padding-left: calc((100 / 480) * 3vw);
    transition: all 0.3s ease 0s;
  }

  .footer_sns {
    width: 100%;
    margin-top: 20px;
  }

  .footer_sns ul {
    width: 100%;
  }

  .footer_sns ul li {
    width: calc((100 / 768) * 60vw);
  }

  .footer_sns ul li:first-child svg {
    width: calc((100 / 768) * 28vw);
  }

  .footer_sns ul li svg {
    width: calc((100 / 768) * 25vw);
  }

  .st0 .cls-2 {
    transition: all 0.3s ease 0s;
  }

  #twitter:hover .st0 {
    fill: #1d9bf0;
  }

  #insta:hover .st0 {
    fill: url(#grad);
  }

  #fb:hover .st0 {
    fill: #1877f2;
  }

  .footer_copylight {
    width: 100%;
    margin-top: 30px;
  }

  .footer_copylight p {
    font-size: calc((100 / 768) * 14vw);
  }

  .footer_copylight img {
    width: calc((100 / 768) * 100vw);
    margin-left: 10px;
  }
}

/*____________________________________________________________________________________________________________media_480*/
@media (max-width: 480px) {
  body {
    display: flex;
    flex-flow: column;
    width: calc((100 / 480) * 480vw);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    opacity: 0;
    animation: fadeIn 3s ease;
    animation-fill-mode: forwards;
  }

  @keyframes fadeIn {
    100% {
      opacity: 1;
    }
  }

  @keyframes scrollseal {
    from {
      overflow: hidden;
    }

    to {
      overflow: visible;
    }
  }

  a {
    text-decoration: none;
  }

  html {
    scroll-behavior: smooth;
  }

  li {
    margin-top: 10px;
    list-style: none;
  }

  /*footerをウィンドウ最下部へ固定する_______________________________________________________________SP_wrapper*/
  .wrapper {
    /*scroll-snap-type: y mandatory;*/
    min-height: 100vh;
    position: relative;
    /*←footerと相対位置*/
    padding-bottom: calc((100 / 480) * 400vw);
    /*←footerの高さ*/
    box-sizing: border-box;
    /*←全て含めてmin-height:100vhに*/
  }

  /*___________________________________________________________________________________________プログレスカウント*/

  /* Loading背景画面設定　*/

  #progress {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #fff;
    /*fixedで全面に固定*/
    position: fixed;
    z-index: 10;
  }

  /* Loadingバー中央配置　*/
  #progressbar {
    width: 15%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  /*見出し設定*/
  h1 {
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  h1 img {
    width: calc((100 / 480) * 28vw);
  }

  /*___________________________________________________________________________________________SP_スクロールダウン*/

  /*スクロールダウン全体の場所*/
  .scrolldown1 {
    display: none;
    width: calc((100 / 480) * 480vw);
    height: calc((100 / 480) * 50vw);
    /*描画位置※位置は適宜調整してください*/
    position: relative;
    top: 40%;
    /*全体の高さ*/
  }

  /*Scrollテキストの描写*/
  .scrolldown1 span {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    /*描画位置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 線の描写 */
  .scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    left: 50%;
    /*線の形状*/
    width: 2px;
    height: 200px;
    background: #fff;
    margin-top: 30px;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: linemove 1.4s ease-in-out infinite;
    opacity: 0;
    transition: all 1.5s ease;
  }

  /*高さ・位置・透過が変化して線が上から下に動く*/
  @keyframes linemove {
    0% {
      height: 0;
      top: 0;
      opacity: 0;
    }

    30% {
      height: 30px;
      opacity: 1;
    }

    100% {
      height: 0;
      top: 50px;
      opacity: 0;
    }
  }

  /*___________________________________________________________________________________________SP_headerのCSS*/
  #header {
    height: 100vh;
    /*高さを全画面にあわせる*/
    position: relative;
  }

  /*___________________________________________________________________________________________フェードイン*/

  /* フェードイン(初期値) */
  .js-fadeUp3,
  .js-fadeUp3-3 {
    opacity: 0;
    /* 最初は非表示 */
    transform: translateY(50px);
    /* 下に30pxの位置から */
    transition: opacity 1s, transform 1.5s;
    /* 透過率と縦方向の移動を0.8秒 */
  }

  /* フェードイン(スクロールした後) */
  .js-fadeUp3.is-inview3,
  .js-fadeUp3-3.is-inview3-3 {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: 0.3s;
    /* フェード開始を0.5秒遅らせる */
  }

  /* フェードイン(初期値) */
  .js-fadeUp3-2,
  .js-fadeUp3-4 {
    opacity: 0;
    /* 最初は非表示 */
    transform: translateY(50px);
    /* 下に30pxの位置から */
    transition: opacity 1s, transform 1.5s;
    /* 透過率と縦方向の移動を0.8秒 */
  }

  /* フェードイン(スクロールした後) */
  .js-fadeUp3-2.is-inview3-2,
  .js-fadeUp3-4.is-inview3-4 {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: 0.3s;
    /* フェード開始を0.5秒遅らせる */
  }

  /* フェードイン(初期値) */
  .js-fadeUp4,
  .js-fadeUp4-3 {
    opacity: 0;
    /* 最初は非表示 */
    transform: translateY(50px);
    /* 下に30pxの位置から */
    transition: opacity 1s, transform 1.5s;
    /* 透過率と縦方向の移動を0.8秒 */
  }

  /* フェードイン(スクロールした後) */
  .js-fadeUp4.is-inview4,
  .js-fadeUp4-3.is-inview4-3 {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: 1s;
    /* フェード開始を0.5秒遅らせる */
  }

  /* フェードイン(初期値) */
  .js-fadeUp4-2,
  .js-fadeUp4-4 {
    opacity: 0;
    /* 最初は非表示 */
    transform: translateY(50px);
    /* 下に30pxの位置から */
    transition: opacity 1s, transform 1.5s;
    /* 透過率と縦方向の移動を0.8秒 */
  }

  /* フェードイン(スクロールした後) */
  .js-fadeUp4-2.is-inview4-2,
  .js-fadeUp4-4.is-inview4-4 {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: 1s;
    /* フェード開始を0.5秒遅らせる */
  }

  /* フェードイン(初期値) */
  .js-fadeUp9 {
    opacity: 0;
    /* 最初は非表示 */
    transform: translateY(50px);
    /* 下に30pxの位置から */
    transition: opacity 1s, transform 1.5s;
    /* 透過率と縦方向の移動を0.8秒 */
  }

  /* フェードイン(スクロールした後) */
  .js-fadeUp9.is-inview9 {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: 1s;
    /* フェード開始を0.5秒遅らせる */
  }

  /* フェードイン(初期値) */
  .js-fadeUp10,
  .js-fadeUp11,
  .js-fadeUp12,
  .js-fadeUp13,
  .js-fadeUp14 {
    opacity: 0;
    /* 最初は非表示 */
    transform: translateY(50px);
    /* 下に30pxの位置から */
    transition: opacity 1s, transform 1.5s;
    /* 透過率と縦方向の移動を0.8秒 */
  }

  /* フェードイン(スクロールした後) */
  .js-fadeUp10.is-inview10,
  .js-fadeUp11.is-inview11,
  .js-fadeUp12.is-inview12,
  .js-fadeUp13.is-inview13,
  .js-fadeUp13.is-inview14 {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: 1s;
    /* フェード開始を0.5秒遅らせる */
  }

  /* フェードイン(初期値) */
  .js-fadeUp11-2,
  .js-fadeUp12-2,
  .js-fadeUp13-2 {
    opacity: 0;
    /* 最初は非表示 */
    transform: translateY(50px);
    /* 下に30pxの位置から */
    transition: opacity 1s, transform 1.5s;
    /* 透過率と縦方向の移動を0.8秒 */
  }

  /* フェードイン(スクロールした後) */
  .js-fadeUp11-2.is-inview11-2,
  .js-fadeUp12-2.is-inview12-2,
  .js-fadeUp13-2.is-inview13-2 {
    opacity: 1;
    /* 表示領域に入ったら表示 */
    transform: translateY(0);
    /* 30px上に移動する */
    transition-delay: 1s;
    /* フェード開始を0.5秒遅らせる */
  }

  /*___________________________________________________________________________________________SP_背景動画設定のCSS*/

  #video-area {
    width: 100vw;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
    /*最背面に設定*/
  }

  #video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh;
    /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw;
    /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
  }

  .mgr-10 {
    margin-right: 10px;
  }

  .mgl-10 {
    margin-left: 10px;
  }

  .site-header {
    display: none;
    width: calc((100 / 480) * 480vw);
    height: calc((100 / 480) * 200vw);
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 10;
    opacity: 0;
    animation-name: fadein1;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  @keyframes fadein1 {
    0% {
      opacity: 0;
      transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Fixedが付与された時のCSS */
  .site-header.fixed {
    width: calc((100 / 480) * 480vw);
    height: calc((100 / 480) * 100vw);
    background: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0px;
    left: 0%;
    animation-name: fadein2;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  @keyframes fadein2 {
    0% {
      opacity: 0;
      transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .site-header.fixed p {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    position: absolute;
    /*要素を天地中央寄せ*/
    bottom: 0%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: opacity 0.5s, transform 1s;
  }

  .site-header.fixed .menu-simbol h2 img {
    width: calc((100 / 480) * 150vw);
    position: absolute;
    top: -10px;
    left: 30px;
  }

  .site-header.fixed::after {
    width: 100%;
  }

  .site-header.fixed nav {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
    top: -800%;
    left: 0;
    transform: none;
    transition: all 0.3s linear;
  }

  .site-header.fixed ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .site-header.fixed .subTitle {
    display: none;
    opacity: 0;
  }

  .site-header.fixed nav ul li a {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 16vw);
    color: #fff;
  }

  /*変形後のメニューホバーカラー*/
  .site-header.fixed nav ul li.current a,
  .site-header.fixed nav ul li a:hover {
    color: #0000ff;
    /*blue R:0 G:0 B:255*/
  }

  .site-header.fixed .openbtn1 {
    display: block;
    position: fixed;
    /*ボタンを最前面に*/
    top: -20px;
    right: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
  }

  /*×に変化*/
  .site-header.fixed .openbtn1 span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    z-index: 9999;
    left: 14px;
    height: 1px;
    border-radius: 2px;
    background-color: #fff;
    width: 65%;
  }

  .site-header.fixed .openbtn1 span:nth-of-type(1) {
    top: 15px;
  }

  .openbtn1 span:nth-of-type(2) {
    top: 23px;
  }

  .site-header.fixed .openbtn1 span:nth-of-type(3) {
    top: 31px;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 40%;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(2) {
    opacity: 0;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 40%;
  }

  /*gallery ドロップダウン*/
  .site-header.fixed .g-nav_gallery {
    position: relative;
  }

  .site-header.fixed .g-nav_sns {
    display: none;
    background-color: transparent;
    width: calc((100 / 480) * 100vw);
    border: solid #ff8c00 1px;
    border-radius: 10px;
    padding-top: calc((100 / 480) * 10vw);
    padding-bottom: calc((100 / 480) * 10vw);
    position: absolute;
    z-index: -1;
    top: 0%;
    left: 0;
    text-align: right;
    transform: translateY(10%);
  }

  .site-header.fixed .g-nav_sns img {
    width: calc((100 / 480) * 25vw);
    margin-top: calc((100 / 480) * 0vw);
    margin-right: calc((100 / 480) * 0vw);
  }

  /* ホバー時の画像 */
  .site-header.fixed .g-nav_sns li a img:nth-child(2) {
    display: none;
  }

  /* ホバー時のスタイル */
  .site-header.fixed .g-nav_sns li a:hover img:nth-child(1) {
    display: none;
  }

  .site-header.fixed .g-nav_sns li a:hover img:nth-child(2) {
    display: inline-block;
  }

  /* /Fixed */
  .is-hidden {
    display: block;
    visibility: hidden;
    opacity: 0;
  }

  .subTitle {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    position: absolute;
    /*要素を天地中央寄せ*/
    top: 80%;
    bottom: 20%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .menu-simbol {
    width: calc((100 / 480) * 480vw);
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  h2 {
    width: calc((100 / 480) * 250vw);
  }

  h2 img {
    width: calc((100 / 480) * 250vw);
  }

  nav {
    width: 100%;
    height: 25vh;
    /*ナビの高さ*/
    background-color: var(--menu-color);
    position: fixed;
    top: -150%;
    left: 0;
    opacity: 0;
    /*動き*/
    transition: all 0.6s;
    transform: none;
  }

  .site-header.fixed nav.panelactive {
    top: 0;
    opacity: 1;
    transform: none;
    transition: all 0.3s linear;
  }

  nav ul {
    display: block;
    justify-content: space-between;
    width: 80%;
    list-style: none;
    position: absolute;
    z-index: 999;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  nav ul li {
    margin-top: 20px;
    pointer-events: auto;
    transition: all 0.3s ease;
  }

  nav ul li:hover {
    background: rgba(255, 255, 0, 0.3);
  }

  .site-header.fixed .g-nav_sns li:hover {
    background: var(--menu-color);
  }

  nav ul li:hover a {
    color: #0000ff;
  }

  nav ul li a {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    position: relative;
  }

  nav li a::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    top: 20px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 1.6px;
    background: #0000ff;
    border-radius: 5px;
    /*アニメーションの指定*/
    transition: all 0.2s;
    transform: scale(0, 1);
    /*X方向0、Y方向1*/
    transform-origin: center top;
    /*上部中央基点*/
  }

  .site-header.fixed nav .g-nav_sns li a::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    top: 20px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 1.6px;
    background: #0000ff;
    border-radius: 5px;
    /*アニメーションの指定*/
    transition: all 0.2s;
    transform: scale(0, 0);
    /*X方向0、Y方向1*/
    transform-origin: center top;
    /*上部中央基点*/
  }

  /*メニュー下線の動き*/
  nav ul li a :hover {
    color: #0000ff;
  }

  /*現在地とhoverの設定*/
  nav li:hover a::after {
    transform: scale(1, 1);
    /*X方向にスケール拡大*/
  }

  /* 5番目のリストアイテムのホバー効果を無効化 */
  nav ul li:nth-child(5) a::after {
    transform: scale(0, 1);
    /* 下線アニメーションも無効化 */
  }

  .site-header.fixed nav .g-nav_sns li:hover a::after {
    width: calc((100 / 480) * 25vw);
    transform: scale(1, 1);
  }

  /*____________________________________________________________________________________________news_header*/

  #news {
    /*scroll-snap-align: start;*/
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    scroll-margin-top: 100px;
  }

  #news h3 {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 62vw);
    color: #fff;
    text-align: center;
  }

  .news_wrapper {
    width: calc((100 / 480) * 480vw);
    background: rgba(0, 0, 0, 0);
    padding-top: calc((100 / 480) * 20vw);
    padding-right: calc((100 / 480) * 20vw);
    padding-bottom: calc((100 / 480) * 50vw);
    padding-left: calc((100 / 480) * 20vw);
  }

  /*___________________________________________________________________________________________news_スクロールデザイン*/
  /*Google Chrome、Safariへの対応*/

  .news_contentsWrapper::-webkit-scrollbar {
    width: 5px;
  }

  .news_contentsWrapper::-webkit-scrollbar-track-piece {
    display: none;
  }

  .news_contentsWrapper::-webkit-scrollbar-track {
    display: none;
  }

  .news_contentsWrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0);
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }

  .news_main:hover .news_contentsWrapper::-webkit-scrollbar-thumb {
    height: 50px;
    background: rgba(244, 244, 244, 1);
    border-radius: 5px;
    opacity: 1;
  }

  /*___________________________________________________________________________________________sp_news_main*/
  .news_main {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: calc((100 / 480) * 20vw);
    border-radius: 10px;
    margin-top: calc((100 / 480) * 30vw);
    margin-right: calc((100 / 480) * 0vw);
    margin-bottom: calc((100 / 480) * 10vw);
    margin-left: calc((100 / 480) * 0vw);
  }

  .news_contentsWrapper {
    background-color: rgba(0, 0, 0, 0);
    height: calc((100 / 480) * 200vw);
    padding-top: calc((100 / 480) * 10vw);
    padding-right: calc((100 / 480) * 10vw);
    padding-bottom: calc((100 / 480) * 20vw);
    padding-left: calc((100 / 480) * 10vw);
    margin-top: calc((100 / 480) * 10vw);
    border-radius: 10px;
    overflow: auto;
  }

  .news_title_info {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    text-align: center;
  }

  .news_title_info img {
    width: calc((100 / 480) * 25vw);
  }

  .news_contents {
    width: 100%;
    height: 100%;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    margin-top: calc((100 / 480) * 10vw);
    overflow-wrap: break-word;
  }

  .news_contents p {
    margin-top: 15px;
  }

  .news_contents p:first-child {
    margin-top: 0;
  }

  .news_flex {
    display: flex;
    justify-content: left;
  }

  .news_sidetitle {
    width: calc((100 / 480) * 20vw);
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 10vw);
    color: #fff;
    padding-left: 10px;
    text-align: center;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
  }

  /*contents-maker 投稿後のレイアウト*/
  .news_contents .cm-box {
    margin-top: 20px;
  }

  .news_contents .cm-box:nth-child(1) {
    margin-top: 0px;
  }

  /*___________________________________________________________________________________________sp_concept*/
  #concept {
    height: calc((100 / 480) * 1350vw);
    padding-bottom: calc((100 / 480) * 20vw);
    scroll-margin-top: 100px;
  }

  .concept_title {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 50vw);
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }

  .concept_title h2 {
    width: 100%;
  }

  .concept_wrapper {
    grid-template-columns: 1fr;
    /* 1列レイアウトに変更 */
    grid-template-rows: repeat(4, auto);
    /* 行を自動サイズに設定 */
    gap: 10px;
    /* グリッド間のスペースを設定 */
    padding: calc((100 / 480) * 20vw);
  }

  .concept_content1,
  .concept_content2,
  .concept_content3,
  .concept_content4 {
    position: relative;
    padding: 10px;
    /* 内側のパディングを設定 */
  }

  .concept_content_main1,
  .concept_content_main2,
  .concept_content_main3,
  .concept_content_main4 {
    font-family: var(--font-jp);
    font-size: calc((100 / 480) * 16vw);
    padding: calc((100 / 480) * 10vw);
    max-width: 80%;
    /* 最大幅を設定してコンテンツがはみ出ないように */
  }

  .concept_content_title1_1,
  .concept_content_title2_1,
  .concept_content_title3_1,
  .concept_content_title4_1 {
    font-size: calc((100 / 480) * 20vw);
    background: rgba(0, 0, 0, 1);
    /* 背景色を追加して読みやすくする */
    padding: 5px 3px 0 3px;
    border-radius: 3px 3px 0 0;
  }

  .concept_content_title1_2,
  .concept_content_title2_2,
  .concept_content_title3_2,
  .concept_content_title4_2 {
    font-size: calc((100 / 480) * 15vw);
  }

  /*___________________________________________________________________________________________sp_menu*/

  #top-menu {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    margin-top: calc((100 / 480) * 100vw);
  }

  .top-menu_title {
    font-size: calc((100 / 480) * 60vw);
  }

  .top-menu_title h2 {
    width: 100%;
  }

  .top-menu_subtitle {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }

  .top-menu_subtitle h3 {
    display: block;
    width: 100%;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 16vw);
    line-height: 2;
    color: #fff;
  }

  .top-menu_wrapper {
    width: 100%;
    height: 100%;
    padding-top: calc((100 / 480) * 30vw);
    padding-right: calc((100 / 480) * 0vw);
    padding-bottom: calc((100 / 480) * 30vw);
    padding-left: calc((100 / 480) * 30vw);
  }

  .top-menu_subtitle2 {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 50px;
  }

  .top-menu_subtitle2 h3 {
    display: block;
    width: 100%;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 18vw);
    line-height: 2;
    color: #fff;
  }

  /*========= スワイパー1 ===============*/
  /* スライド全体の余白 */
  .basicMenu-swiper {
    margin-top: 20px;
    /* スライダー上の余白 */
    padding-left: 10vw;
    /* スライダー左の余白 */
    padding-right: 20px;
    /* スライダー右の余白 */
    position: relative;
  }

  .basicMenu-swiper:hover .basicMenu-slide:not(:hover) {
    opacity: 1;
    filter: brightness(60%);
    cursor: pointer;
    transition: 0.5s all;
  }

  .basicMenu-slide {
    height: 80%;
    border-radius: 3px;
    overflow: hidden;
  }

  /* スライド画像のサイズ */
  .basicMenu-slide img {
    width: 100%;
    height: 70%;
    border-radius: 5px;
    transition: 1s all;
  }

  .basicMenu-slide img:hover {
    /*transform: scale(1.1, 1.1);*/
    transition: 0.5s all;
  }

  .basicmenu_title {
    display: block;
    font-family: var(--font-eng_b);
    font-size: calc((100 / 480) * 18vw);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: 0.5s all;
    transform: translate(-50%, -50%);
  }

  .basicMenu-slide:hover .basicmenu_title {
    color: #fff;
    filter: brightness(100%);
    opacity: 0; /* 小さくならずにそのままフェードアウト */
    transition: opacity 0.5s ease-in-out; /* 即座に消える */
    z-index: 0; /* article の下に移動 */
  }

  .basicMenu-slide article {
    max-width: 85%;
    margin-left: 20px;
  }

  .basicMenu-slide article h3 {
    font-size: calc((100 / 480) * 18vw);
  }

  .basicMenu-slide article p {
    font-size: calc((100 / 480) * 14vw);
    margin-top: 10px;
  }

  .basicMenu-slide:hover article {
    transition: 0.7s;
    transition-delay: 0s;
    opacity: 1;
  }

  .basicMenu_blur {
    filter: blur(3px) brightness(70%);
  }

  /*========= スワイパー2 ===============*/
  #swiper-container {
    width: 100%;
    padding-left: 30px;
  }

  .menu-swiper {
    width: 100%;
    cursor: pointer;
  }

  .menu-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
  }

  .menu-swiper .swiper-slide {
    width: calc((100 / 480) * 250vw);
    height: calc((100 / 480) * 350vw);
    margin-top: calc((100 / 480) * 30vw);
  }

  .menu-swiper .swiper-slide figure {
    width: 100%;
    height: calc((100 / 480) * 220vw);
  }

  .menu-swiper .swiper-slide:hover img {
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    /* 画像の被写体に影を付ける */
  }

  .slide-content {
    width: 100%;
    max-width: 95%;
    position: absolute;
    /* 画像上に配置するためabsoluteを使用 */
    overflow: hidden;
    z-index: 2;
    /* 画像より上に表示するためにz-indexを設定 */
  }

  .slide-content_title {
    font-family: var(--font-jp);
    font-size: calc((100 / 480) * 16vw);
    color: #fff;
    margin-bottom: 5px;
    position: absolute;
    top: 5%;
  }

  .slide-content_contents {
    width: 100%;
    max-width: 90%;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    position: absolute;
    top: 25%;
  }

  /*___________________________________________________________________________________________sp_inquiry*/

  #inquiry {
    margin-top: 100px;
  }

  .inquiry_wrapper {
    padding-top: calc((100 / 480) * 30vw);
    padding-right: calc((100 / 480) * 30vw);
    padding-bottom: calc((100 / 480) * 30vw);
    padding-left: calc((100 / 480) * 30vw);
  }

  .inquiry_title {
    width: 100%;
    margin-top: 30px;
  }

  .inquiry_title_contnt {
    width: 100%;
    font-size: calc((100 / 480) * 60vw);
  }

  .inquiry_inner {
    width: 100%;
    padding: 20px 10px 20px 10px;
    border-radius: 10px;
    margin-top: 30px;
  }

  .inquiry_content_info {
    font-family: var(--font-jp);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    margin-bottom: 20px;
  }

  .inquiry_content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px;
    line-height: 2;
  }

  .tel {
    width: 100%;
    padding: 10px 10px 10px 10px;
  }

  .tel a {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 15vw);
    color: #fff;
  }

  .mail {
    width: 100%;
    padding: 15px 10px 10px 10px;
  }

  .tel_icon {
    width: calc((100 / 480) * 35vw);
    padding-bottom: 15px;
  }

  .comme_icon {
    width: calc((100 / 480) * 35vw);
    position: absolute;
    top: 10px;
    left: 55%;
  }

  .mail_icon {
    width: calc((100 / 480) * 50vw);
    margin-bottom: 30px;
  }

  .tel_info,
  .tel_no,
  .mail_info,
  .mail_add,
  .mail_form {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 15vw);
    color: #fff;
    text-decoration: none;
  }

  .tel_info_bold,
  .mail_info_bold {
    font-family: var(--font-jp_b);
    color: #fff;
  }

  /*___________________________________________________________________________________________tab_inquiry 矢印エフェクト*/
  .inquiry_arrow {
    display: inline-block;
    width: 85%;
    padding: 10px 0px 10px 0px;
    text-align: center;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 15vw);
    color: #fff;
    margin: 2px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
  }

  .inquiry_arrow::after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    right: 10%;
    width: 15%;
    height: 6px;
    border: none;
    border-right: 0.5vw solid #fff;
    border-bottom: 1px solid #fff;
    transform: skew(45deg);
    transition: 0.2s;
  }

  .inquiry_arrow:hover::after {
    right: 5%;
    width: 20%;
  }

  /*___________________________________________________________________________________________sp_inquiry gmail*/

  .gmail-info {
    width: 100%;
    padding-top: 10px;
  }

  .gmail-info_content {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 14vw);
  }

  .gmail-info_gmail {
    width: 100%;
    font-size: calc((100 / 480) * 14vw);
    padding-top: 20px;
  }

  .gmail-info_gmail a {
    position: relative;
    text-decoration: none;
  }

  /* 下線のスタイル */
  .gmail-info_gmail a::after {
    content: "";
    position: absolute;
    top: calc((100 / 480) * 25vw);
    /* 下線の位置を微調整 */
    left: 0;
    width: 100%;
    height: 3px;
    background: red;
    border-radius: 5px;
    transition: all 0.2s;
    transform: scale(0, 1);
    transform-origin: center top;
  }

  .gmail-info:hover .gmail-info_gmail a::after,
  .gmail-info_gmail a:hover::after {
    transform: scale(1, 1);
  }

  /*___________________________________________________________________________________________gallery*/
  .gallery_title {
    width: 100%;
    margin-top: calc((100 / 480) * 20vw);
    margin-bottom: calc((100 / 480) * 30vw);
  }

  .gallery_title h2 {
    width: 100%;
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 30vw);
    color: #fff;
    text-align: center;
  }

  .gallery_content {
    width: 100%;
    height: 65%;
  }

  .gallery_sns {
    height: calc((100 / 480) * 100vw);
  }

  .gallery_sns:first-child:hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns:nth-child(2):hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns:nth-child(3):hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns a img {
    width: calc((100 / 480) * 25vw);
    height: calc((100 / 480) * 25vw);
  }

  .gallery_announce p {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 14vw);
    padding-top: calc((100 / 480) * 30vw);
    padding-right: calc((100 / 480) * 5vw);
    padding-bottom: calc((100 / 480) * 5vw);
    padding-left: calc((100 / 480) * 5vw);
  }

  /*___________________________________________________________________________________________sp_footer*/

  #footer {
    /*scroll-snap-align: start;*/
    width: 100%;
    height: calc((100 / 480) * 400vw);
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    /*←絶対位置*/
    bottom: 0;
    /*下に固定
        z-index: 10;*/
  }

  .footer_wrapper {
    width: 100%;
    height: 100%;
    padding-top: calc((100 / 480) * 30vw);
    padding-right: calc((100 / 480) * 30vw);
    padding-bottom: calc((100 / 480) * 20vw);
    padding-left: calc((100 / 480) * 30vw);
  }

  .footer_inner {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    margin-top: calc((100 / 480) * 0vw);
  }

  .footer_logo img {
    width: calc((100 / 480) * 200vw);
    object-fit: cover;
    object-position: left top;
  }

  .footer_address {
    width: 100%;
    text-align: center;
    padding-top: calc((100 / 480) * 50vw);
    line-height: 2;
  }

  .footer_address p {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    text-decoration: none;
  }

  .footer_address p:nth-child(3) {
    margin-top: 10px;
  }

  .footer_address a {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 480) * 14vw);
    color: #fff;
    text-decoration: none;
  }

  .footer_address a .color {
    transition: all 0.3s ease 0s;
  }

  .footer_address a:hover .color {
    color: var(--menu-color);
  }

  .footer_address .mgr {
    margin-right: calc((100 / 480) * 0vw);
    text-decoration: none;
  }

  .footer_inner2 {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    margin-top: calc((100 / 480) * 20vw);
  }

  .footer_nav {
    width: 100%;
  }

  .footer_nav_li {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer_nav_content {
    display: flex;
    justify-content: space-between;
    width: 80%;
  }

  .footer_nav_item {
    cursor: pointer;
  }

  .footer_nav_item a {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 12vw);
    color: #fff;
    border-left: 2px solid #fff;
    padding-top: calc((100 / 480) * 1vw);
    padding-left: calc((100 / 480) * 3vw);
    transition: all 0.3s ease 0s;
  }

  .footer_nav_item a:hover {
    color: var(--menu-color);
    border-color: var(--menu-color);
  }

  .footer_copylight {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
    text-align: center;
  }

  .footer_copylight p {
    font-family: var(--font-eng);
    font-size: calc((100 / 480) * 12vw);
    color: #fff;
  }

  .footer_copylight img {
    width: 20%;
    margin-left: 10px;
  }
}

/*____________________________________________________________________________________________________________media_390*/
@media (max-width: 390px) {
  body {
    display: flex;
    flex-flow: column;
    width: calc((100 / 390) * 390vw);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    opacity: 0;
    animation: fadeIn 3s ease;
    animation-fill-mode: forwards;
  }

  @keyframes fadeIn {
    100% {
      opacity: 1;
    }
  }

  @keyframes scrollseal {
    from {
      overflow: hidden;
    }

    to {
      overflow: visible;
    }
  }

  a {
    text-decoration: none;
  }

  html {
    scroll-behavior: smooth;
  }

  li {
    margin-top: 10px;
    list-style: none;
  }

  /*footerをウィンドウ最下部へ固定する_______________________________________________________________SP_wrapper*/
  .wrapper {
    /*scroll-snap-type: y mandatory;*/
    min-height: 100vh;
    position: relative;
    /*←footerと相対位置*/
    padding-bottom: calc((100 / 390) * 450vw);
    /*←footerの高さ*/
    box-sizing: border-box;
    /*←全て含めてmin-height:100vhに*/
  }

  /*___________________________________________________________________________________________プログレスカウント*/

  /* Loading背景画面設定　*/

  #progress {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #fff;
    /*fixedで全面に固定*/
    position: fixed;
    z-index: 10;
  }

  /* Loadingバー中央配置　*/
  #progressbar {
    width: 15%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  /*見出し設定*/
  h1 {
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  h1 img {
    width: calc((100 / 390) * 28vw);
  }

  /*___________________________________________________________________________________________SP_スクロールダウン*/

  /*スクロールダウン全体の場所*/
  .scrolldown1 {
    display: none;
    width: calc((100 / 390) * 390vw);
    height: calc((100 / 390) * 50vw);
    /*描画位置※位置は適宜調整してください*/
    position: relative;
    top: 40%;
    /*全体の高さ*/
  }

  /*Scrollテキストの描写*/
  .scrolldown1 span {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 14vw);
    color: #fff;
    /*描画位置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 線の描写 */
  .scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    left: 50%;
    /*線の形状*/
    width: 2px;
    height: 200px;
    background: #fff;
    margin-top: 30px;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: linemove 1.4s ease-in-out infinite;
    opacity: 0;
    transition: all 1.5s ease;
  }

  /*高さ・位置・透過が変化して線が上から下に動く*/
  @keyframes linemove {
    0% {
      height: 0;
      top: 0;
      opacity: 0;
    }

    30% {
      height: 30px;
      opacity: 1;
    }

    100% {
      height: 0;
      top: 50px;
      opacity: 0;
    }
  }

  /*___________________________________________________________________________________________SP_headerのCSS*/
  #header {
    height: 100vh;
    /*高さを全画面にあわせる*/
    position: relative;
  }

  /*___________________________________________________________________________________________SP_背景動画設定のCSS*/

  #video-area {
    width: 100vw;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    z-index: -1;
    /*最背面に設定*/
  }

  #video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh;
    /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw;
    /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
  }

  .mgr-10 {
    margin-right: 10px;
  }

  .mgl-10 {
    margin-left: 10px;
  }

  .site-header {
    display: none;
    width: calc((100 / 390) * 390vw);
    height: calc((100 / 390) * 200vw);
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 10;
    opacity: 0;
    animation-name: fadein1;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  @keyframes fadein1 {
    0% {
      opacity: 0;
      transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Fixedが付与された時のCSS */
  .site-header.fixed {
    width: calc((100 / 390) * 390vw);
    height: calc((100 / 390) * 100vw);
    background: rgba(0, 0, 0, 0);
    position: fixed;
    top: 0px;
    left: 0%;
    animation-name: fadein2;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }

  @keyframes fadein2 {
    0% {
      opacity: 0;
      transform: translateY(0);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .site-header.fixed p {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 14vw);
    color: #fff;
    position: absolute;
    /*要素を天地中央寄せ*/
    bottom: 0%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: opacity 0.5s, transform 1s;
  }

  .site-header.fixed .menu-simbol h2 img {
    width: calc((100 / 390) * 150vw);
    position: absolute;
    top: -10px;
    left: 30px;
  }

  .site-header.fixed::after {
    width: 100%;
  }

  .site-header.fixed nav {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
    top: -800%;
    left: 0;
    transform: none;
    transition: all 0.3s linear;
  }

  .site-header.fixed ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .site-header.fixed .subTitle {
    display: none;
    opacity: 0;
  }

  .site-header.fixed nav ul li a {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 16vw);
    color: #fff;
  }

  /*変形後のメニューホバーカラー*/
  .site-header.fixed nav ul li.current a,
  .site-header.fixed nav ul li a:hover {
    color: #0000ff;
    /*blue R:0 G:0 B:255*/
  }

  .site-header.fixed .openbtn1 {
    display: block;
    position: fixed;
    /*ボタンを最前面に*/
    top: -20px;
    right: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
  }

  /*×に変化*/
  .site-header.fixed .openbtn1 span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    z-index: 9999;
    left: 14px;
    height: 1px;
    border-radius: 2px;
    background-color: #fff;
    width: 65%;
  }

  .site-header.fixed .openbtn1 span:nth-of-type(1) {
    top: 15px;
  }

  .openbtn1 span:nth-of-type(2) {
    top: 23px;
  }

  .site-header.fixed .openbtn1 span:nth-of-type(3) {
    top: 31px;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 40%;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(2) {
    opacity: 0;
  }

  .site-header.fixed .openbtn1.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 40%;
  }

  /*gallery ドロップダウン*/
  .site-header.fixed .g-nav_gallery {
    position: relative;
  }

  .site-header.fixed .g-nav_sns {
    display: none;
    background-color: transparent;
    width: calc((100 / 390) * 100vw);
    border: solid #ff8c00 1px;
    border-radius: 10px;
    padding-top: calc((100 / 390) * 10vw);
    padding-bottom: calc((100 / 390) * 10vw);
    position: absolute;
    z-index: -1;
    top: 0%;
    left: 0;
    text-align: right;
    transform: translateY(10%);
  }

  .site-header.fixed .g-nav_sns img {
    width: calc((100 / 390) * 25vw);
    margin-top: calc((100 / 390) * 0vw);
    margin-right: calc((100 / 390) * 0vw);
  }

  /* ホバー時の画像 */
  .site-header.fixed .g-nav_sns li a img:nth-child(2) {
    display: none;
  }

  /* ホバー時のスタイル */
  .site-header.fixed .g-nav_sns li a:hover img:nth-child(1) {
    display: none;
  }

  .site-header.fixed .g-nav_sns li a:hover img:nth-child(2) {
    display: inline-block;
  }

  /* /Fixed */
  .is-hidden {
    display: block;
    visibility: hidden;
    opacity: 0;
  }

  .subTitle {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 13vw);
    color: #fff;
    position: absolute;
    /*要素を天地中央寄せ*/
    top: 80%;
    bottom: 20%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .menu-simbol {
    width: calc((100 / 390) * 390vw);
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  h2 {
    width: calc((100 / 390) * 200vw);
  }

  h2 img {
    width: calc((100 / 390) * 200vw);
  }

  nav {
    width: 100%;
    height: 25vh;
    /*ナビの高さ*/
    background-color: var(--menu-color);
    position: fixed;
    top: -150%;
    left: 0;
    opacity: 0;
    /*動き*/
    transition: all 0.6s;
    transform: none;
  }

  .site-header.fixed nav.panelactive {
    top: 0;
    opacity: 1;
    transform: none;
    transition: all 0.3s linear;
  }

  nav ul {
    display: block;
    justify-content: space-between;
    width: 80%;
    list-style: none;
    position: absolute;
    z-index: 999;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  nav ul li {
    margin-top: 20px;
    pointer-events: auto;
    transition: all 0.3s ease;
  }

  nav ul li:hover {
    background: rgba(255, 255, 0, 0.3);
  }

  .site-header.fixed .g-nav_sns li:hover {
    background: var(--menu-color);
  }

  nav ul li:hover a {
    color: #0000ff;
  }

  nav ul li a {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 14vw);
    color: #fff;
    position: relative;
  }

  nav li a::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    top: 20px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 1.6px;
    background: #0000ff;
    border-radius: 5px;
    /*アニメーションの指定*/
    transition: all 0.2s;
    transform: scale(0, 1);
    /*X方向0、Y方向1*/
    transform-origin: center top;
    /*上部中央基点*/
  }

  .site-header.fixed nav .g-nav_sns li a::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    top: 20px;
    left: 0;
    /*線の形状*/
    width: 100%;
    height: 1.6px;
    background: #0000ff;
    border-radius: 5px;
    /*アニメーションの指定*/
    transition: all 0.2s;
    transform: scale(0, 0);
    /*X方向0、Y方向1*/
    transform-origin: center top;
    /*上部中央基点*/
  }

  /*メニュー下線の動き*/
  nav ul li a :hover {
    color: #0000ff;
  }

  /*現在地とhoverの設定*/
  nav li:hover a::after {
    transform: scale(1, 1);
    /*X方向にスケール拡大*/
  }

  .site-header.fixed nav .g-nav_sns li:hover a::after {
    width: calc((100 / 390) * 25vw);
    transform: scale(1, 1);
  }

  /*____________________________________________________________________________________________news_header*/

  #news {
    /*scroll-snap-align: start;*/
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    scroll-margin-top: 100px;
  }

  #news h3 {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 50vw);
    color: #fff;
    text-align: center;
  }

  .news_wrapper {
    width: calc((100 / 390) * 390vw);
    background: rgba(0, 0, 0, 0);
    padding-top: calc((100 / 390) * 20vw);
    padding-right: calc((100 / 390) * 20vw);
    padding-bottom: calc((100 / 390) * 50vw);
    padding-left: calc((100 / 390) * 20vw);
  }

  /*___________________________________________________________________________________________news_スクロールデザイン*/
  /*Google Chrome、Safariへの対応*/

  .news_contentsWrapper::-webkit-scrollbar {
    width: 5px;
  }

  .news_contentsWrapper::-webkit-scrollbar-track-piece {
    display: none;
  }

  .news_contentsWrapper::-webkit-scrollbar-track {
    display: none;
  }

  .news_contentsWrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0);
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }

  .news_main:hover .news_contentsWrapper::-webkit-scrollbar-thumb {
    height: 50px;
    background: rgba(244, 244, 244, 1);
    border-radius: 5px;
    opacity: 1;
  }

  /*___________________________________________________________________________________________sp_news_main*/
  .news_main {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: calc((100 / 390) * 20vw);
    border-radius: 10px;
    margin-top: calc((100 / 390) * 30vw);
    margin-right: calc((100 / 390) * 0vw);
    margin-bottom: calc((100 / 390) * 10vw);
    margin-left: calc((100 / 390) * 0vw);
  }

  .news_contentsWrapper {
    background-color: rgba(0, 0, 0, 0);
    height: calc((100 / 390) * 200vw);
    padding-top: calc((100 / 390) * 10vw);
    padding-right: calc((100 / 390) * 10vw);
    padding-bottom: calc((100 / 390) * 20vw);
    padding-left: calc((100 / 390) * 10vw);
    margin-top: calc((100 / 390) * 10vw);
    border-radius: 10px;
    overflow: auto;
  }

  .news_title_info {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 14vw);
    color: #fff;
    text-align: center;
  }

  .news_title_info img {
    width: calc((100 / 390) * 25vw);
  }

  .news_contents {
    width: 100%;
    height: 100%;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 390) * 12vw);
    color: #fff;
    margin-top: calc((100 / 390) * 10vw);
    overflow-wrap: break-word;
  }

  .news_contents p {
    margin-top: 15px;
  }

  .news_contents p:first-child {
    margin-top: 0;
  }

  .news_flex {
    display: flex;
    justify-content: left;
  }

  .news_sidetitle {
    width: calc((100 / 390) * 20vw);
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 10vw);
    color: #fff;
    padding-left: 10px;
    text-align: center;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
  }

  /*contents-maker 投稿後のレイアウト*/
  .news_contents .cm-box {
    margin-top: 20px;
  }

  .news_contents .cm-box:nth-child(1) {
    margin-top: 0px;
  }

  /*___________________________________________________________________________________________sp_concept*/
  #concept {
    height: calc((100 / 390) * 1350vw);
    padding-bottom: calc((100 / 390) * 20vw);
    scroll-margin-top: 100px;
  }

  .concept_title {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 40vw);
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }

  .concept_title h2 {
    width: 100%;
  }

  .concept_wrapper {
    grid-template-columns: 1fr;
    /* 1列レイアウトに変更 */
    grid-template-rows: repeat(4, auto);
    /* 行を自動サイズに設定 */
    gap: 10px;
    /* グリッド間のスペースを設定 */
    padding: calc((100 / 390) * 20vw);
  }

  .concept_content1,
  .concept_content2,
  .concept_content3,
  .concept_content4 {
    position: relative;
    padding: 10px;
    /* 内側のパディングを設定 */
  }

  .concept_content_main1,
  .concept_content_main2,
  .concept_content_main3,
  .concept_content_main4 {
    font-family: var(--font-jp);
    font-size: calc((100 / 390) * 16vw);
    padding: calc((100 / 390) * 10vw);
    max-width: 80%;
    /* 最大幅を設定してコンテンツがはみ出ないように */
    line-height: 1;
  }

  .concept_content_title1_1,
  .concept_content_title2_1,
  .concept_content_title3_1,
  .concept_content_title4_1 {
    font-size: calc((100 / 390) * 18vw);
  }

  .concept_content_title1_2,
  .concept_content_title2_2,
  .concept_content_title3_2,
  .concept_content_title4_2 {
    font-size: calc((100 / 390) * 14vw);
  }

  /*___________________________________________________________________________________________sp_menu*/

  #top-menu {
    width: 100%;
    height: 100%;
    margin-top: calc((100 / 390) * 100vw);
  }

  .top-menu_title {
    font-size: calc((100 / 390) * 40vw);
  }

  .top-menu_title h2 {
    width: 100%;
  }

  .top-menu_subtitle {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }

  .top-menu_subtitle h3 {
    width: 100%;
    font-size: calc((100 / 390) * 14vw);
  }

  .top-menu_wrapper {
    width: 100%;
    height: 100%;
    padding-top: calc((100 / 390) * 30vw);
    padding-right: calc((100 / 390) * 0vw);
    padding-bottom: calc((100 / 390) * 30vw);
    padding-left: calc((100 / 390) * 30vw);
  }

  .top-menu_subtitle2 {
    margin-top: 30px;
  }

  .top-menu_subtitle2 h3 {
    width: 100%;
    font-size: calc((100 / 390) * 18vw);
  }

  /*========= スワイパー1 ===============*/
  /* スライド全体の余白 */
  .basicMenu-swiper {
    margin-top: 20px;
    /* スライダー上の余白 */
    padding-left: 10vw;
    /* スライダー左の余白 */
    padding-right: 20px;
    /* スライダー右の余白 */
    position: relative;
  }

  .basicMenu-swiper:hover .basicMenu-slide:not(:hover) {
    opacity: 1;
    filter: brightness(60%);
    cursor: pointer;
    transition: 0.5s all;
  }

  .basicMenu-slide {
    height: 80%;
    border-radius: 3px;
    overflow: hidden;
  }

  /* スライド画像のサイズ */
  .basicMenu-slide img {
    width: 100%;
    height: 70%;
    border-radius: 5px;
    transition: 1s all;
  }

  .basicMenu-slide img:hover {
    /*transform: scale(1.1, 1.1);*/
    transition: 0.5s all;
  }

  .basicmenu_title {
    display: block;
    font-family: var(--font-eng_b);
    font-size: calc((100 / 390) * 16vw);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: 0.5s all;
    transform: translate(-50%, -50%);
  }

  .basicMenu-slide:hover .basicmenu_title {
    color: #fff;
    filter: brightness(100%);
    opacity: 0;
    transition: 0.2s all;
  }

  .basicMenu-slide article {
    max-width: 90%;
    margin-left: 20px;
  }

  .basicMenu-slide article h3 {
    font-size: calc((100 / 390) * 13vw);
  }

  .basicMenu-slide article p {
    font-size: calc((100 / 390) * 12vw);
    margin-top: 10px;
  }

  .basicMenu-slide:hover article {
    transition: 0.7s;
    transition-delay: 0s;
    opacity: 1;
  }

  .basicMenu_blur {
    filter: blur(3px) brightness(70%);
  }

  /*========= スワイパー2 ===============*/
  #swiper-container {
    width: 100%;
    padding-left: 50px;
  }

  .menu-swiper {
    width: 100%;
    cursor: pointer;
  }

  .menu-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
  }

  .menu-swiper .swiper-slide {
    width: calc((100 / 390) * 250vw);
    height: calc((100 / 390) * 280vw);
    margin-top: calc((100 / 390) * 30vw);
  }

  .menu-swiper .swiper-slide figure {
    width: 100%;
    height: calc((100 / 390) * 150vw);
  }

  .menu-swiper .swiper-slide:hover img {
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    /* 画像の被写体に影を付ける */
  }

  .slide-content {
    width: 100%;
    max-width: 90%;
    height: calc((100 / 390) * 120vw);
    position: absolute;
    /* 画像上に配置するためabsoluteを使用 */
    overflow: hidden;
    z-index: 2;
    /* 画像より上に表示するためにz-indexを設定 */
  }

  .slide-content_title {
    font-family: var(--font-jp);
    font-size: calc((100 / 390) * 16vw);
    color: #fff;
    margin-bottom: 5px;
    position: absolute;
    top: 10%;
  }

  .slide-content_contents {
    width: 100%;
    max-width: 90%;
    font-family: var(--font-jp);
    font-size: calc((100 / 390) * 12vw);
    color: #fff;
    position: absolute;
    top: 20%;
  }

  /*___________________________________________________________________________________________sp_inquiry*/

  #inquiry {
    margin-top: 100px;
  }

  .inquiry_wrapper {
    padding-top: calc((100 / 390) * 0vw);
    padding-right: calc((100 / 390) * 30vw);
    padding-bottom: calc((100 / 390) * 30vw);
    padding-left: calc((100 / 390) * 30vw);
  }

  .inquiry_title {
    width: 100%;
    margin-top: 30px;
  }

  .inquiry_title_contnt {
    width: 100%;
    font-size: calc((100 / 390) * 55vw);
  }

  .inquiry_inner {
    width: 100%;
    padding: 20px 10px 20px 10px;
    border-radius: 10px;
    margin-top: 30px;
  }

  .inquiry_content_info {
    font-family: var(--font-jp);
    font-size: calc((100 / 390) * 14vw);
    color: #fff;
    margin-bottom: 20px;
  }

  .inquiry_content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px;
    line-height: 2;
  }

  .tel {
    width: 100%;
    padding: 10px 10px 10px 10px;
  }

  .tel a {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 390) * 12vw);
    color: #fff;
  }

  .mail {
    width: 100%;
    padding: 23px 0 0 0;
  }

  .tel_icon {
    width: calc((100 / 390) * 35vw);
    padding-bottom: 15px;
  }

  .comme_icon {
    width: calc((100 / 390) * 35vw);
    position: absolute;
    top: 10px;
    left: 55%;
  }

  .mail_icon {
    width: calc((100 / 390) * 50vw);
    margin-bottom: 20px;
  }

  .tel_info,
  .tel_no,
  .mail_info,
  .mail_add,
  .mail_form {
    font-family: var(--font-jp);
    font-size: calc((100 / 390) * 12vw);
    color: #fff;
    text-decoration: none;
  }

  .tel_info_bold,
  .mail_info_bold {
    font-family: var(--font-jp_b);
    color: #fff;
  }

  /*___________________________________________________________________________________________tab_inquiry 矢印エフェクト*/
  .inquiry_arrow {
    display: inline-block;
    width: 100%;
    padding: 10px 30px 10px 0px;
    text-align: center;
    font-family: var(--font-jp_b);
    font-size: calc((100 / 390) * 12vw);
    color: #fff;
    margin: 2px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
  }

  .inquiry_arrow::after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    right: 10%;
    width: 15%;
    height: 6px;
    border: none;
    border-right: 0.7vw solid #fff;
    border-bottom: 1px solid #fff;
    transform: skew(45deg);
    transition: 0.2s;
  }

  .inquiry_arrow:hover::after {
    right: 5%;
    width: 20%;
  }

  /*___________________________________________________________________________________________sp_inquiry gmail*/

  .gmail-info {
    width: 100%;
    padding-top: 10px;
  }

  .gmail-info_content {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 390) * 12vw);
  }

  .gmail-info_gmail {
    width: 100%;
    font-size: calc((100 / 390) * 12vw);
    padding-top: 20px;
  }

  .gmail-info_gmail a {
    position: relative;
    text-decoration: none;
  }

  /* 下線のスタイル */
  .gmail-info_gmail a::after {
    content: "";
    position: absolute;
    top: calc((100 / 390) * 25vw);
    /* 下線の位置を微調整 */
    left: 0;
    width: 100%;
    height: 3px;
    background: red;
    border-radius: 5px;
    transition: all 0.2s;
    transform: scale(0, 1);
    transform-origin: center top;
  }

  .gmail-info:hover .gmail-info_gmail a::after,
  .gmail-info_gmail a:hover::after {
    transform: scale(1, 1);
  }

  /*___________________________________________________________________________________________gallery*/
  .gallery_content {
    width: 100%;
    height: 65%;
  }

  .gallery_sns {
    height: calc((100 / 390) * 80vw);
  }

  .gallery_sns:first-child:hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns:nth-child(2):hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns:nth-child(3):hover .gallery_snsIcon:nth-child(2) {
    opacity: 1;
    cursor: pointer;
  }

  .gallery_sns a img {
    width: calc((100 / 390) * 30vw);
    height: calc((100 / 390) * 30vw);
  }

  .gallery_announce p {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 390) * 11vw);
    padding-top: calc((100 / 390) * 30vw);
    padding-right: calc((100 / 390) * 0vw);
    padding-bottom: calc((100 / 390) * 5vw);
    padding-left: calc((100 / 390) * 0vw);
  }

  /*___________________________________________________________________________________________sp_footer*/

  #footer {
    /*scroll-snap-align: start;*/
    width: 100%;
    height: calc((100 / 390) * 450vw);
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    /*←絶対位置*/
    bottom: 0;
    /*下に固定
        z-index: 10;*/
  }

  .footer_wrapper {
    width: 100%;
    height: 100%;
    padding-top: calc((100 / 390) * 70vw);
    padding-right: calc((100 / 390) * 30vw);
    padding-bottom: calc((100 / 390) * 20vw);
    padding-left: calc((100 / 390) * 30vw);
  }

  .footer_inner {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    margin-top: calc((100 / 390) * 0vw);
  }

  .footer_logo img {
    width: calc((100 / 390) * 200vw);
    object-fit: cover;
    object-position: left top;
  }

  .footer_address {
    width: 100%;
    text-align: center;
    padding-top: calc((100 / 390) * 50vw);
    line-height: 2;
  }

  .footer_address p {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 390) * 14vw);
    color: #fff;
    text-decoration: none;
  }

  .footer_address p:nth-child(3) {
    margin-top: 10px;
  }

  .footer_address a {
    font-family: var(--font-jp_b);
    font-size: calc((100 / 390) * 14vw);
    color: #fff;
    text-decoration: none;
  }

  .footer_address a .color {
    transition: all 0.3s ease 0s;
  }

  .footer_address a:hover .color {
    color: var(--menu-color);
  }

  .footer_address .mgr {
    margin-right: calc((100 / 390) * 20vw);
    text-decoration: none;
  }

  .footer_inner2 {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    margin-top: calc((100 / 390) * 30vw);
  }

  .footer_nav {
    width: 100%;
  }

  .footer_nav_li {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer_nav_content {
    display: flex;
    justify-content: space-between;
    width: 80%;
  }

  .footer_nav_item {
    cursor: pointer;
  }

  .footer_nav_item a {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 12vw);
    color: #fff;
    border-left: 2px solid #fff;
    padding-top: calc((100 / 390) * 1vw);
    padding-left: calc((100 / 390) * 3vw);
    transition: all 0.3s ease 0s;
  }

  .footer_nav_item a:hover {
    color: var(--menu-color);
    border-color: var(--menu-color);
  }

  .footer_copylight {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
    text-align: center;
  }

  .footer_copylight p {
    font-family: var(--font-eng);
    font-size: calc((100 / 390) * 12vw);
    color: #fff;
  }

  .footer_copylight img {
    width: 20%;
    margin-left: 10px;
  }
}