/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 01 2026 | 14:45:26 */
/******************************************** 
ハンバーガーのスタイル  アニメーション付
*********************************************/

html {
  overflow-y: scroll !important;
}

body.menu-open {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}


.hamburger-btn {
  position: fixed ;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background-color: #caae7f;
  display: flex;
 padding: 2.1em  12.5px;
  cursor: pointer;
  z-index: 9999999 !important;
 overflow: hidden;

}

.hamburger-btn span {
  display: block;
  width: 45px;
  height: 5px;
  background: #fff;
  transition: .3s;
  position: absolute;
}

.hamburger-btn span:nth-child(1) { transform: translateY(-6px); }
.hamburger-btn span:nth-child(2) { transform: translateY(6px); }

.hamburger-btn.active span:nth-child(1) { transform: rotate(30deg); }
.hamburger-btn.active span:nth-child(2) { transform: rotate(-30deg); }





/**menu-overlay**********/
.menu-overlay {
  position: fixed !important;
  inset: 0;

  background-image: url("https://gv-studio.tw/wp-content/uploads/2026/01/menu_pc_bg.png");
  background-repeat: no-repeat;

  /* ★ 下基準にする */
  background-position: center bottom;

  /* ★ 余白を出さない */
  background-size: cover;

  z-index: 9999998 !important;

  display: flex;
  justify-content: center;
  align-items: center;

  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1),
              opacity 0.6s ease;
  pointer-events: none;
}

.menu-overlay.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}


.menu-overlay nav a {
  color: #caae7f;
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  text-decoration: none;

}
@media (max-width: 1024px) {
 .menu-overlay {
   background-image: url("https://gv-studio.tw/wp-content/uploads/2026/01/menu_sp_bg.png");
	background-position: center center;
 }
	
}

@media (min-width: 391px) and (max-width: 768px) {
	.menu-overlay {
   background-image: url("https://gv-studio.tw/wp-content/uploads/2026/01/menu_sp_bg.png");
	background-position: center bottom;
 }
	
}
@media (max-width: 390px) {
	
  .hamburger-btn {
    width: 50px;
    height: 50px;
    padding: 1.5em 10px;
    background-color: #caae7f;

  }

  .hamburger-btn span {
    width: 32px;
    height: 4px;
  }
	.menu-overlay nav a {
   font-size: 1.3rem;
  font-weight: 500;
  

}
}
/* ==========================
   932px以下：スクロール可能にする
   ========================== */
@media screen and (max-width: 932px) {
  .menu-overlay {
    position: absolute !important; /* fixed を解除 */
    overflow-y: auto;              /* 縦スクロール有効 */
    -webkit-overflow-scrolling: touch; /* iOS用 */
    height: 100vh;                 /* 表示領域を確保 */
	
  }
}

/* menu-overlay内の文字のアニメーション */
/* inner-head は常に表示 */
.menu-overlay .inner-head {
  opacity: 1 !important;
  transform: none !important;
}
/*    文字アニメ 初期状態（右メニューのみ）*/

.menu-overlay .direct-nav__group a {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(2px);
}

/*   open時：下から表示 */

.menu-overlay.open .direct-nav__group a {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);

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

  /* overlay後に開始 */
  transition-delay: calc(var(--delay, 0s) + 0.45s);
}





/*   open時：下から表示 縦並びブロック単位で遅延*/

.direct-nav__group:nth-of-type(1) {
  --delay: 0s;
}
.direct-nav__group:nth-of-type(2) {
  --delay: 0.15s;
}
.direct-nav__group:nth-of-type(3) {
  --delay: 0.3s;
}

/*   横並び（direct-nav__line_item）は「同時表示」*/
/* 横並びの中身は一斉表示 */
.direct-nav__line_item a ,.direct-nav__line_item2 a {
  transition-delay: inherit;
}
/* 閉じた時は即リセット（再オープン対策） */
.menu-overlay:not(.open) .direct-nav__group a {
  transition-delay: 0s !important;
}



/* menu-overlay内のレイアウト ****************/
.inner-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
 padding:1rem 5.6rem 0 2rem;
}


.inner-head .inner-logo h1{
	font-size:.9rem;
	line-height:1.3rem;
	 margin-top:.5rem;
	padding-left:.5rem;
	color:#caae80;
	text-align:center;
}
.inner-language{
	display: flex;
  flex-direction: column;
  align-items: center;
	margin-top:.7rem;
    margin-left: auto;
width:140px;
}
.inner-language .language__label{
	background-color: #dcdcdc;
  text-align: center;
  padding: 0.3rem 2em .2em;
  color:#313333;
  font-family: "Noto Serif", "Times New Roman", serif;
  font-size: 1.1em;
  font-weight: 400;
 display:inline-block;
}
.inner-language .language__label a{
	font-family: "Noto Serif", "Times New Roman", serif;
}
/**スマホ：オーバーレイ内の言語部分背景*/
@media (max-width: 768px) {

.inner-head .language__selector .wpml-ls-legacy-list-horizontal>ul{ 
	background-color:rgba(220,220,220,0.5);
	}	
}
/**右側メニュー用ラッパー**********/

.direct-nav {
  position: absolute;
  top: 52%;
  right: 0;

  width: 56%;                 /* ← 右半分より少し広い */
  max-width: 900px;         

  transform: translateX(-6%) translateY(-50%);
  /* ↑ これが「ほんのちょっと左」 */

  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.direct-nav__group.medium{
	border-top:1px solid #595757;
	border-bottom:1px solid #595757;
	padding:3.5rem 0 3.5rem .5rem;
}

.direct-nav__group{
	  display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
	gap:3rem;
	padding-left:.5rem;
}
.direct-nav__line_item ,.direct-nav__line_item2{
	display: flex;
	align-items:flex-end;
	gap:4rem;
}
 /*真ん中mediumボックスのgap(en) */
.medium .direct-nav__line_item ,.direct-nav__line_item2:lang(en){
	display: flex;
	align-items:flex-end;
	gap:2rem;
}
.memu-font-home a ,.memu-font-s a{
	font-size:1.2rem !important;
}
.memu-font-ss a ,.memu-font-ss{
	font-size:.95rem !important;
}
.memu-font-ss.space{margin-left:3rem;}
.direct-nav__sub_item{
	display: flex;
	align-items:center;
	gap:1rem;
}
/* 2つ目以降の a にだけ | を付ける */
.direct-nav__sub_item > a + a::before {
  content: "|";
  margin-right: 0.8rem;
  color: #caae7f;   /* ← 濃くする色 */
  opacity: 1;
}
.direct-nav__sub_item .nav-sns{
	display:flex;
	gap:2.5rem;
	margin-left:5rem;
}

/**マウスオーバー **********/

/* 共通 */
.direct-nav__item a,
.direct-nav__line_item a ,
.direct-nav__line_item2 a{
 position: relative;
 display: inline-block;
  width: fit-content ;
  color: #caae7f;
  text-decoration: none;
	
}
/* 下線 */
.direct-nav__item a::after,
.direct-nav__line_item a::after ,
.direct-nav__line_item2 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
 width: 100%;
  height: 1px;
  background-color: #caae7f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

/* hover */
.direct-nav__item a:hover::after,
.direct-nav__line_item a:hover::after,
.direct-nav__line_item2 a:hover::after{
  transform: scaleX(1);
}

/* ★ current（常時表示） */
.direct-nav__item a.is-current::after,
.direct-nav__line_item a.is-current::after,
.direct-nav__line_item2 a.is-current::after{
  transform: scaleX(1);
}

/* --- medium部分の共通設定 --- */
/* medium 内：文字下線（background方式・統一） */

/* 1. aタグ自体の設定：幅を文字に合わせ、余計な線を消す */
.direct-nav__line_item2 a {
  display: inline-block !important; /* 文字幅にする */
  width: fit-content !important;    /* 念のため幅を文字に固定 */
  text-decoration: none !important;
  position: relative;
  color: #caae7f;
}

/* 2. aタグに直接ついていた下線を完全に無効化する */
.direct-nav__line_item2 a::after {
  content: none !important;
}

/* 3. aタグの中にある「span（文字）」に対して下線を設定する */
.direct-nav__line_item2 a span {
  position: relative;
  display: inline-block; /* これで文字ぴったりの幅になります */
}

/* 4. 下線の設定（spanの下に引く） */
.direct-nav__line_item2 a span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;      /* 文字のすぐ下 */
  width: 100%;       /* spanの幅（文字幅）に対して100% */
  height: 1px;
  background-color: #caae7f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

/* 5. ホバー時とカレント（is-current）の表示設定 */
.direct-nav__line_item2 a:hover span::after,
.direct-nav__line_item2 a.is-current span::after {
  transform: scaleX(1) !important;
}
/** 一番下エリア direct-nav__sub_itemのホバー時とカレント**/

/* hover */
.direct-nav__sub_item > a:hover {
  color: #999;
  opacity: 0.6;
  transition: color .3s ease, opacity .3s ease;
}
.direct-nav__sub_item a.is-current {
  color: #999;
  opacity: 0.6;
}

.direct-nav__sub_item a:hover img {
  filter: grayscale(100%);
}

@media (max-width: 768px) {
.direct-nav {
height: calc(100vh - 230px);
  padding-top: 230px;
  

  display: flex;
  flex-direction: column;
}	

.inner-head .inner-logo h1{
	display:none;
}
		/**右側メニュー用ラッパー**********/
	

	.direct-nav__group{
		padding-left:0;
	}
	
  .direct-nav {
    right: auto;
    left: 0;

    width: 100%;        /* ★ 横幅いっぱい */
    max-width: none;

    transform: translateY(-50%);
    /* 横移動をリセット */

    padding: 0 3rem;  /* 端ベタ防止（お好み） */
    gap: 2rem;        /* 少し詰めると見やすい */
  }
	
	/**1つ目のエリア**********/

.direct-nav__line_item{
	
	gap:5rem;
}

	
	/**真ん中のエリア**********/
	 .direct-nav__line_item2{
    flex-wrap: wrap;
    gap: 1.8rem;
  }

  /* 1つ目を1行占有 */
  .direct-nav__line_item2 > *:nth-child(1) {
    flex: 0 0 100%;
	 margin-bottom:1.8rem;
	
  }

  /* 2つ目・3つ目を横並び */
  .direct-nav__line_item2 > *:nth-child(2),
  .direct-nav__line_item2 > *:nth-child(3) {
    flex: 1 1 0;
  }
/*真ん中mediumボックスのgap(en) */
.medium .direct-nav__line_item ,.direct-nav__line_item2:lang(en){
	display: flex;
	align-items:flex-end;
	gap:0;
}
		/**３つ目のエリア**********/

/* company / contact group */
.direct-nav__group:last-of-type {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
   column-gap:0;
  row-gap: 6.5rem;
}

/* company / contact */
.direct-nav__group:last-of-type .direct-nav__item {
  flex: 1 1 0;
 
}


/* sub_item：group内の一番下 */
.direct-nav__group:last-of-type .direct-nav__sub_item {
  flex: 0 0 100%;
  margin-top: auto;   /* ← ここだけ */
}

/* sub_item 内部レイアウト */
.direct-nav__sub_item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;   /* ← center をやめる */
  gap: 0.4rem;               /* ← 1.2rem → 縮小 */
  text-align: center;
}
/* SNS */
.direct-nav__sub_item .nav-sns {
  order: 1;
  display: flex;
  gap: 1.8rem;               /* ← アイコン間を縮小 */
  justify-content: center;
  width: 100%;
  margin: 0;                 /* ← margin-bottom を消す */
}
/* SNSアイコンサイズ */
.direct-nav__sub_item .nav-sns img {
  width: 22px;               /* ← 小さく */
  height: auto;
}

/* ポリシー：下段 */
.direct-nav__sub_item > a {
  order: 2;
  white-space: nowrap;
  line-height: 1.2;          /* ← 縦余白を詰める */
}
	
.inner-language .language__label {
    display:none;
  }	
}

@media (max-width: 430px) {
.direct-nav {
        padding: 0 1.5rem;  /* 端ベタ防止（お好み） */
    gap: 1.5rem;        /* 少し詰めると見やすい */
  }
	
.inner-head {
    padding: .8rem 70px .8rem 1rem;
    align-items: center;
  }
/**真ん中のエリア**********/
	 .direct-nav__line_item2 {
    gap: 0;
  }

  /* 1つ目を1行占有 */
  .direct-nav__line_item2 > *:nth-child(1) {
    flex: 0 0 100%;
  }


  /* ロゴ全体 */
  .inner-head .inner-logo {
    margin-top: 0;
    text-align: left;
  }

  /* ロゴ画像 */
  .inner-head .inner-logo img {
    max-width: 120px;  
    height: auto;
  }

    /* 言語切替 */
  .inner-language {
    width: auto;
	padding-bottom:.8rem;
    margin-top: 0;
    margin-left: auto;
  }

 
	.direct-nav__group{
	gap:1.5rem;
}

.direct-nav__group.medium{
	padding:1.4rem 0 ;
}
	.memu-font-home a{
		font-size:1.3rem !important;
	}	
.memu-font-ss a ,.memu-font-ss{
	font-size:.8rem !important;
	}

}

/*******************************************
言語設定　ボタンの色・フォント変更  共通部分
*******************************************/
.left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul{
	padding:0;
}
.language {
  display: flex;
  flex-direction: column;   /* ← PCは上下に並ぶ */
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: auto;      
 
}
.language__selector {
  display: flex;
  flex-direction: row;      /* ← 中 EN JP を横並び */
  align-items: center;
  justify-content: center;

  white-space: nowrap;    
}
.wpml-ls-legacy-list-horizontal{
	padding-left:0 !important;
}

@media (max-width: 768px) {
	.wpml-ls-legacy-list-horizontal{
	padding: 0 !important;
		
 }
	.wpml-ls-link::after{
   color: #000 !important;
 }
}
 

 .wpml-ls-item a {
	font-size:.9em;
	line-height:1em;
   }

.wpml-ls-legacy-list-horizontal{
	
}
.wpml-ls-legacy-list-horizontal li {
  display: inline-block;
  line-height: 1; 
  margin: 0;
  padding:0 .3em !important;
}
.wpml-ls-legacy-list-horizontal li:not(:last-child) {
  position: relative; 
}
/* 擬似要素で短い線を作成 */
.wpml-ls-legacy-list-horizontal li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;          /* 上から25%の位置に配置（数値を大きくすると線が短くなる） */
  height: 50%;       /* 線の長さを50%に指定 */
  width: 1px;        /* 線の太さ */
  background-color: #fff; /* 線の色 */
}
/* タイトル部分 */
.language .language__label {
  background-color: #dcdcdc;
  text-align: center;
  padding: .3em 2em .2em;
  color:#313333;
  font-family: "Noto Serif", "Times New Roman", serif;
  font-size: 1.1em;
  font-weight: 400;
 display:inline-block;
}
.language .language__label a{
	font-family: "Noto Serif", "Times New Roman", serif;
}


/*  WPMLが出す元の文字を完全に非表示 */
.wpml-ls-native,
.wpml-ls-display {
  display: none !important;
}


/* 表示本体は ::after に一本化 */
.wpml-ls-link {
  position: relative;
}

 .wpml-ls-link::after{
  content: "";
  font-family: "Noto Serif", "Times New Roman", serif;
  font-weight: 400;
  color: #fff;
  transition: color 0.3s ease;
}

/* 言語別表示文字 */

/* 台湾語だけ CJK TC を明示 */
.wpml-ls-item-zh-hant .wpml-ls-link::after {
  content: "中";
font-family:
    "Noto Serif TC",
    serif;
}
/* 英語 */
.wpml-ls-item-en .wpml-ls-link::after {
  content: "EN";
}
/* 日本語 */
.wpml-ls-item-ja .wpml-ls-link::after {
  content: "JP";
}
/* hover / current */
.wpml-ls-link:hover::after {
  color: #caae7f !important;
}
.wpml-ls-current-language .wpml-ls-link::after{
  color: #caae7f !important;
}


/* ==========================
   右メニュー　
========================== */

.right-menu {
   width: 230px;
  height: 100vh;
   display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content:flex-start;
position:relative;
}

.right-menu.menu{
   background: linear-gradient(to left, #000 70px, transparent 0);
  padding:0;
}
/* 言語ボタン */
.right-menu .language{
	display: flex;
  flex-direction: column;
  align-items: flex-start;
	justify-content: center;
	 width:100%;
	margin-right:0;
	padding-right:.5rem;
	padding-top:.5rem;
}
.right-menu .wpml-ls-link::after{
   color: #000;
}
.right-menu .wpml-ls-current-language .wpml-ls-link::after {
  color: #caae7f !important;
}
.right-menu .wpml-ls-legacy-list-horizontal li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;          /* 上から25%の位置に配置（数値を大きくすると線が短くなる） */
  height: 50%;       /* 線の長さを50%に指定 */
  width: 1px;        /* 線の太さ */
  background-color: #000; /* 線の色 */
}
/* overlay が開いているとき */
.menu-overlay.open + .right-menu {
  display: none !important;
}
/* 右メニュー内基本構造 */

.right-menu .menu-list {
  width:100%;
	margin-top:5rem;
  padding-right:40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap:3em;
	transition: opacity 0.4s ease, visibility 0.4s ease; /* ふわっと消えるアニメーション */
}
.menu-list.hide-content {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none; /* 消えている間はクリックできないようにする */
}
.right-menu .menu-list.other{
padding-top:2em;
padding-bottom:6em;
}
.menu-list li {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  cursor: pointer;
  position: relative;
  font-size: .8rem;
}

/* 下線（初期は非表示） */
.menu-list li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #caae7f;
  transform: scaleX(0);
  transform-origin: left;   /* ← 左から伸びる */
  transition: transform .35s ease;
}

/* hoverで左→右にスルー */
.menu-list li:hover::after {
  transform: scaleX(1);
}

/* カレント（常に表示） */
.menu-list li.current-menu-item::after,
.menu-list li.current_page_item::after,
.menu-list li.active::after {
  transform: scaleX(1);
}


/* ==========================
   fixed-en
========================== */
.menu-list .fixed-en {
  background: #fff;     /* ② 初期グレー */
	color:#000;
	font-family: "Noto Serif", "Times New Roman", serif;
	width:110px;
   padding: 3px 15px;
	text-align:left;
  font-size:1.1em;
  transition: background .3s ease;
}

/* hover / active でゴールド */
.menu-list li:hover .fixed-en,
.menu-list li.active .fixed-en {
  background: #caae7f;
  color: #fff;
}


/* ==========================
   button（●）
========================== */
.menu-list .button {
 margin-left:3em;
  color: #7f8080;          /* ④ 初期グレー */
  transition: color .3s ease;
	font-size:1rem;
}
html[lang="ja"] .menu-list .button {
		font-size:.5rem;
}
/* hover / active で赤 */
.menu-list li:hover .button,
.menu-list li.active .button {
  color: #caae7f;
}
/*  スクロールボタン  */
/* PC用 スクロールボタン */
.scroll-button {
  position: absolute; /* ← スティッキーメニュー基準 */
  bottom: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background-color: #caae7f;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.scroll-button img {
  width: 13px;
}

/* PCではSP用を非表示 */
@media (min-width: 769px) {
  .scroll-button-sp {
    display: none;
  }
}

@media (max-width: 768px) {
/* スマホ用 初期状態は非表示 */
.scroll-button-sp {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  padding: .7rem;
  background-color: #caae7f;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 999;
	box-sizing: border-box;
}

.scroll-button-sp img {
  width: 9px;
}

/* 表示用クラス */
.scroll-button-sp.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
}
/* スマホではPC用を非表示 */
@media (max-width: 768px) {
  .scroll-button {
    display: none;
  }
}
/* ==========================
  sns
========================== */
.right-menu .sns {
	position:absolute;
  width: 100%;
  display: flex;
  flex-direction: row; 
  justify-content: flex-start; 
  align-items: center;   
  gap: 2em;   
 bottom:4em;
 left:0;
}

.right-menu .sns img {
  height: 25px;             /* 高さを固定（必要に応じて調整） */
  width: auto;              /* 横幅は自動（比率を維持） */
 
}
/* 1. まず全体の動きを滑らかにする */
.sns img {
  transition: filter 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

/* 2. .sns全体にマウスが乗った時、中のimgをすべてグレーにする */
.sns:hover img {
  filter: grayscale(100%);
  opacity: 0.5; /* 少し薄くすると、より「未選択」感が出ます */
}

/* 3. マウスが直接乗っているimgだけ、フィルターを解除してカラーに戻す */
.sns img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* ==========================
menu-listセクション〇以降は非表示
========================== */
/* フェードアウトしながら消える設定 */
.menu-list.hide-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* クリックもできないようにする */
}