/*
Theme Name: TheGem Elementor Child
Description: Multi-Purpose Wordpress Theme
Author: Codex Themes.
Theme URI: http://codex-themes.com/thegem/
Author URI: http://codex-themes.com/thegem/
Template: thegem-elementor
Version: 1.0
Tags: one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, dark, light
License: GNU General Public License
License URI: license.txt
*/

/* カラーバリエーション */
.btn-orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    color: #fff;
    box-shadow: 0 5px 0 #a04000;
}
.btn-navy {
background: linear-gradient(135deg, #0F1A33 0%, #1F2E55 50%, #4A63A8 100%);
    color: #fff;
    box-shadow: 0 5px 0 #a04000;
}

.btn-white {
    background: linear-gradient(145deg, #FFF 60%, #F3F3F3 100%);
	border: 2px solid #010D2CF7;
    color: #1F2E55;
    box-shadow: 0 5px 0 #a04000;	
}
.btn-gold {
    background: linear-gradient(135deg, #D4B572 0%, #b8943f 100%);
    color: #1F2E55;
    box-shadow: 0 5px 0 #8a6d2e;
}

.text-lead{
  font-size: clamp(16px, 1.2vw + 14px, 20px);
  line-height: 1.9;
}

.title-text h2, .title-text p {
  font-size: clamp(28px, 3.5vw + 18px, 60px);	
	font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.06em;
}
.title-text{
  text-wrap: balance;        /* 可能なら“均等に”改行（対応ブラウザ増えてます） */
  line-height: 1.15;
}

@media (max-width: 767px){
  .title-text{
    font-size: clamp(26px, 7vw, 34px); /* 画面に合わせて自動調整 */
    letter-spacing: 0.02em;            /* 広すぎると変な改行になる */
  }
}

/* グループを角丸にする */
.sheet-top {
    margin-top: -30px !important;
    overflow: clip;
    border-top-left-radius: 3.875rem !important;
    border-top-right-radius: 3.875rem !important;
}

/* 右から左に流れる英字部分 -- start */
.slide-english-text-area {
  width: 100vw
  overflow: hidden;
  margin: 0px;
  padding: 0;
}
.slide-english-text {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(44px, 4vw, 72px);
  opacity: 0.2;
  color: var(--color-gold);
  font-weight: bold;
  line-height: 1;
  padding: 0;
  margin: 0;
  animation: slide-left 44s linear infinite;
}
.slide-english-text.dark{
  color: #F5F3EA;
}
@keyframes slide-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* 右から左に流れ英字部分 -- end */

/***************
 * 私たちについて_７つの行動基準
 */
.standards-li{
  border-top:1px solid var(--li-line);
}
/* 02 の位置をコントロール */
.seven__bgword {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  z-index: 0;
}

/* 02 のスタイル */
.seven__bgword .title-h2 {
  font-size: 180px;                  /* 大きさ */
  font-weight: 800;
  line-height: 1;
  color: rgba(212,181,114,0.5);     /* かなり薄いゴールド */
}

/* 右側のテキストを前面に */
.standards-li .e-con-inner > div {
  position: relative;
  z-index: 1;
}
/* 数字の位置と見た目 */
.seven__bgword {
  justify-self: end;
}

.seven__bgword .title-h2 {
  font-size: clamp(120px, 12vw, 180px);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: rgba(255,255,255,0.25);
  transform: translate(12%, 10%);
}
@media (max-width: 768px) {
  .standards-li > .e-con-inner {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .seven__bgword {
    justify-self: flex-start;
  }
  .seven__bgword .title-h2 {
    font-size: 72px;
    transform: translate(0, 0);
    opacity: 0.25;
  }
}

/* ========
TOPページのscroll文字表示
======= */
.scroll-guide {
  position: absolute;
  right: 40px;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 20;
  pointer-events: none;
}
.scroll-guide__circle {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(211,180,113,0.9);
  animation: scroll-guide-dot 1.4s ease-in-out infinite;
}

.scroll-guide__line {
  width: 2px;
  height: 55px;
  background: linear-gradient(to bottom, transparent, rgba(211,180,113,0.9));
  border-radius: 2px;
}

.scroll-guide__text {
  color: rgba(211,180,113,0.95);
  font-size: 12px;
  letter-spacing: 0.25em;
  font-weight: 500;
}

@keyframes scroll-guide-dot {
  0%   { transform: translateY(0); opacity: 0.2; }
  40%  { transform: translateY(8px); opacity: 1; }
  10   { transform: translateY(16px); opacity: 0.1; }
}

/* ▼ スマホでは中央下に戻す */
@media (max-width: 768px) {
  .scroll-guide {
    bottom: 30px;
    right: 50%;
    transform: translateX(50%);
  }
}
/********
 * 扇形にひらく画像
 */
.concept-photo {
  position: relative;
  overflow: hidden;           /* はみ出しカット */
}

/* 画像の初期状態：まだ見えていない */
.concept-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 左下がカットされた最終形ではなく、
     右端の点に潰した状態からスタート */
  clip-path: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%);
  opacity: 0;
  transform: translateX(20px);
}

/* 画面に入ったら、このクラスが付与されてアニメーション開始 */
.concept-photo.is-visible img {
  animation: revealSlanted 1.4s ease-out 0.1s both;
}


/* 扇状に広がるような clip-path アニメーション */
@keyframes revealSlanted {
  /* 右側の一本線からスタート（矢印が示す感じ） */
  0% {
    clip-path: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%);
    opacity: 0;
    transform: translateX(20px);
  }

  /* 途中：右の帯が広がる */
  50% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 1;
    transform: translateX(0);
  }

  /* 最終：左下のみ斜めカット */
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
    opacity: 1;
  }
}
/* 斜めカット無しで終わらせたい場合のクラス */
.no-slant-end.is-visible img {
  animation: revealSquare 1.4s ease-out 0.1s both;
}

/* 四角形で終わるアニメーション */
@keyframes revealSquare {
  0% {
    clip-path: polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%);
    opacity: 0;
    transform: translateX(20px);
  }

  50% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 1;
    transform: translateX(0);
  }

  /* 最終：四角（左下カット無し） */
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

/* ▼スマホ：アニメーションあり、斜めカット無し */
@media (max-width: 767px) {

  /* 初期状態：フェード&スライドINの準備 */
  .concept-photo img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 四角形 */
    opacity: 0;
    transform: translateX(20px);
  }

  /* 可視範囲でフェード&スライドのみ */
  .concept-photo.is-visible img {
    animation: fadeSlideIn 1.0s ease-out 0.1s both;
  }

  @keyframes fadeSlideIn {
    0% {
      opacity: 0;
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* タブレット以下では重ねるのをやめて縦並びにする */
@media (max-width: 1024px) {
  /* 画像エリアの高さ制限を解除 */
  .company-images {
    min-height: auto !important;
  }

  /* 各画像ウィジェットを通常フローに戻す */
  .company-img1,
  .company-img2,
  .company-img3 {
    position: static !important;   /* 絶対配置を解除 */
    margin: 0 0 20px !important;   /* 下に余白をつけて縦並びに */
  }
}
@media (min-width: 768px){
/* ===== Company セクション：右側だけ斜めに白く切る ===== */
.company-bg {
  position: relative;
  overflow: hidden;       /* 斜め部分がはみ出さないように */
  background-color: #0b2954; /* ネイビー（必要なら調整） */
}

/* 右側の白い斜めエリア */
.company-bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12vw;        /* 右にはみ出させて自然に */
  width: 40vw;         /* 白い三角形の幅 */
  height: 130%;        /* 少し上下にはみ出させる */
  background: #ffffff;
  /* ここで「右側だけ斜め」の形を作る */
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;          /* コンテンツより後ろ */
}

/* 中身（テキスト＋画像）を斜め背景の前面に出す */
.company-bg > .e-con-inner {
  position: relative;
  z-index: 1;
}
}

/***************
 * 私たちについて
 */
.editor-ttl-en p{
    font-weight: 900;	
}
.editor-ttl-en::after{
content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 24px;
    height: 2px;
    background-color: #D4B572;
}
/* タイトル部分の画像 */
.image-wrapper {
  width: calc(100% + 150px);
  margin-right: -150px;       /* ネガティブ・マージンで右へ押し出す */
  max-width: none;                           /* 親の max-width 制約を解除 */
}
.page-tophero::after {
    content: 'ABOUT US';
    position: absolute;
    bottom: 50px;
    right: 40px;
    font-size: 120px;
    font-weight: 900;
    color: rgba(255, 255, 255, .03);
    letter-spacing: .05em;
    pointer-events: none;
    white-space: nowrap;
}

/***************
 * 採用情報の表
 */
.job-table, .job-table_new {
  border: 1px solid #cfd4da;
  border-bottom: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0 !important;

  /* Elementor内部変数のギャップもゼロに */
  --container-widget-gap: 0px;
  --e-con-grid-row-gap: 0px;
  --e-con-grid-column-gap: 0px;
}
/* =============================
   各行（1行分の職種・雇用形態など）
============================= */
.job-row {
  display: flex;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-bottom: 1px solid #cfd4da;
  line-height: 1.5;
}

/* =============================
   左カラム（見出し部分）
============================= */
.job-row > .elementor-widget-text-editor:first-child {
  width: 300px;
  background: #162a54;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-right: 1px solid #cfd4da;
  box-sizing: border-box;
  margin: 0 !important;
  font-weight: 600;
}

/* =============================
   右カラム（内容部分）
============================= */
.job-row > .elementor-widget-text-editor:last-child {
  flex: 1;
  background: #fff;
  padding: 20px 28px;
  box-sizing: border-box;
  margin: 0 !important;
  color: #111;
}

/* =============================
   段落・行間の調整
============================= */
.job-row .elementor-text-editor {
  line-height: 1.4; /* 行間調整：読みやすく＆コンパクトに */
}

.job-row .elementor-text-editor p {
  margin: 0;
  padding: 0;
}

.job-row .elementor-text-editor p + p {
  margin-top: 4px; /* 2行目以降の軽い余白だけ */
}

.job-row .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* =============================
   スマホ対応（縦並び）
============================= */
@media (max-width: 768px) {
  .job-row {
    flex-direction: column;
  }

  .job-row > .elementor-widget-text-editor:first-child {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #cfd4da;
    justify-content: flex-start;
    text-align: left;
  }
}


/********
 * 社員インタビュー
 */
/* ===== 一日のスケジュール ===== */
.time-schedule-list {
	margin: 0;
	-webkit-column-count: 2;
	   -moz-column-count: 2;
	        column-count: 2;
	gap: 60px;
}
.time-schedule-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: baseline;
	    -ms-flex-align: baseline;
	        align-items: baseline;
	color: #1f2e55;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	   -moz-column-break-inside: avoid;
	        break-inside: avoid;
	padding: 30px 0 0;
}
.time-schedule-time {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	width: 3em;
	font-size: 2.2rem;
	font-weight:bold; 
	line-height: 1;
	text-align: right;
}
.time-schedule-detail {
	position: relative;
	padding-left: 20px;
	margin-left: 20px;
}
.time-schedule-detail::before {
	content: "";
	position: absolute;
	top: -30px;
	bottom: 0;
	right: 100%;
	border-left: 1px solid;
	color:#D4B572;
}
.time-schedule-detail::after {
	content: "";
	position: absolute;
	top: 1em;
	left: -1px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: #D4B572;
	width: 14px;
	height: 14px;
	border-radius: 9px;
}
.time-schedule-detail .title {
	font-weight: bold;
}
.time-schedule-detail .detail {
}
.time-schedule-child-list {
	margin: 0;
}
.time-schedule-item:first-child .time-schedule-detail::before {
	top: 1em;
}
@media screen and (max-width: 1023px) {
	.time-schedule {
		padding-bottom: 50px !important;
	}
	.time-schedule-list {
		-webkit-column-count: 1;
		   -moz-column-count: 1;
		        column-count: 1;
		gap: 30px;
	}
	.time-schedule-item {
		padding: 10px 0;
	}
	.time-schedule-time {
		width: 3em;
		font-size: 2rem;
	}
	.time-schedule-detail {
		padding-left: 20px;
		margin-left: 20px;
	}
	.time-schedule-detail::after {
		width: 7px;
		height: 7px;
	}
	.time-schedule-detail .title {
	}
	.time-schedule-detail .detail {
	}
}

/********
 * FAQ
 */
/* 1. 全パネル表示 */
.consulting-faq .gem-tta-panel,
.consulting-faq .gem-tta-panel-body {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
}

/* 2. 外枠 */
.consulting-faq .gem-tta-panel {
    background: transparent !important;
    border: none !important;
    margin-bottom: 40px !important;
}

/* 3. タイトルバー */
.consulting-faq .gem-tta-panel-heading {
    background-color: #d6bc8d !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: none !important;
}

/* 4. クリック無効 */
.consulting-faq .gem-tta-panel-title a {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    width: 100% !important;
}

/* 5. Qボックス */
.consulting-faq .gem-tta-panel-title a::before {
    content: "Q";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    background-color: #243056 !important;
    color: #fff !important;
    font-weight: bold;
    font-size: 24px;
    margin-right: 20px;
}

/* 6. テキスト */
.consulting-faq .gem-tta-title-text {
    display: flex !important;
    align-items: center !important;
    font-size: 1.8rem !important;
    color: #243056 !important;
    font-weight: bold !important;
    padding: 10px 0 !important;
}

/* 7. アイコン削除 */
.consulting-faq .gem-tta-controls-icon,
.consulting-faq .gem-tta-icon {
    display: none !important;
}


.shinybtn {
    display: inline-block;
    padding: 18px 50px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: transform 0.1s ease;
}


/* 押した時 */
.shinybtn:active {
    transform: translateY(3px);
}

.shiny {
    position: relative;
    overflow: hidden;
}
/* 光 */
.shiny::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(40deg);
    animation: shiny-effect 3s infinite;
}

@keyframes shiny-effect {
    0% { left: -60%; }
    20% { left: 120%; }
    100% { left: 120%; }
}


/* CTAボタン */
.clickable-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    transition: all 0.2s ease;
  cursor: pointer;
  transition: 0.3s;
}
.clickable-btn:hover{
  opacity: 0.8;
  transform: translateY(-2px);
}