@charset "utf-8";

/* ------------------------------------
   HEADER
------------------------------------ */
/* グローバルナビ */
.global-nav {
	display: flex;
    align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap:1.5rem;
  margin: 0 .5rem;
}
.nav-list a {
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-size: calc(14px + 0.2vw);
  white-space: nowrap;
  color: #333;
  line-height: 50px;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.5rem; /* 下線の位置 */
  width:0;
  height: 3px;
  background: #007bff;
  transition: width 0.35s ease;
  border-radius: 2px;
}
.nav-list a:hover { color: #007bff; }
.nav-list a:hover::after { width: 100%; }
.nav-list .entry-btn::after { display: none !important; }

.nav-entry-btn {
  height: 64px;
  background: linear-gradient(45deg, #00bfff, #007bff);
  color: #fff !important;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", "Meiryo", sans-serif, "Noto Sans JP";
  min-width: 120px;
  padding: 0 1vw;
  transition:0.3s ease; /*.nav-entry-btn:hoverとセット*/  
}
.nav-entry-btn:hover {
  background: linear-gradient(45deg,#0056b3,#0078d7);
  color:#fff;
  opacity: 0.85;
}

.header-inner,
.global-nav,
.nav-list,
.nav-list li,
.idex-logo,
.logo-appear{
  flex-shrink: 0;
}

/* -------------------------
   モーダル
------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;	
}
.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 40px);
	opacity: 0;
	transition:
    transform 0.4s ease,
    opacity 0.4s ease;
  width: 640px;
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
}

.modal.is-open .modal-content {
  transform: translate(-50%, 0);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;

  background: #111;
  color: #fff;
  font-size: 22px;
  line-height: 40px;
  text-align: center;

  cursor: pointer;
}

.modal-title {
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.modal-text {
  font-size: 0.9rem;
  margin-bottom: 32px;
  color: #555;
}

/* ボタン横並び */
.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.modal-btn {
  position: relative;
  width: 220px;
  padding: 14px 0;
  background: #1e6fd9;
  color: #fff;
  border-radius: 30px;
  font-weight: 700;
  transition: 0.3s;
}

.modal-btn:hover {background: #004bb1;}

/* 外部リンクアイコン */
.external-icon::after {
  content: "\f35d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 8px;
  font-size: 0.85em;
}

/* ------------------------------------
   HERO SLIDER
------------------------------------ */
.hero {
  margin-top:4.1rem;
  position:relative;
  width:100%;
/*  height:70vh;
  overflow:hidden;*/
}

.slide img { 
	width:100%; 
	height:100%; 
	object-fit:contain;
	/*display: block;*/
}
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;  /* 矢印の反応範囲を確保 */
  height: 6rem;
  background: rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 10;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-arrow::before {/* 角度調節 */
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}
.slide-prev{
  left:0;
  border-radius: 0 6px 6px 0;
}
.slide-prev::before {
  transform: rotate(-135deg); /* 左向き */
  margin-left: 6px;
}
.slide-next{
  right:0;
  border-radius: 6px 0 0 6px; /* 左上と左下だけ丸くする */
}
.slide-next::before {
  transform: rotate(45deg);  /* 右向き */
  margin-right: 6px;	
}

/* ------------------------------------
   HERO TITLE
------------------------------------ */
.hero-title h1 { font-size:3rem; margin-bottom:10px; }

/* ------------------------------------
   SECTION BASE
------------------------------------ */
section{padding: 4rem 0;}

/* ------------------------------------
   TITLE
------------------------------------ */
.title {
  font-size:1.8rem;
  text-align:center;
  margin-bottom:3rem;
  position:relative;
}
.title-only{
	text-align:center;
	letter-spacing: -0.02em;
	line-height: normal;
	font-size: 2rem;	
}
.sub-title{
  text-align: center;
  font-size: 7rem;
  font-weight: 700;
  font-style: italic;
  font-family: Noto Sans JP;	
  /*color: #eef2f5;*/
  letter-spacing: .1em;
  margin-bottom: -10px;
  letter-spacing: -0.02em;
  opacity: 0.1 !important;
}

/* ------------------------------------
   レイアウト
------------------------------------ */
.grid {
  max-width:960px;
  margin:0 auto;
  display:grid;
  gap:60px 25px;;
}
.grid-3 { grid-template-columns:repeat(3,1fr); }

.grid-s {
  max-width:960px;
  margin:0 auto;
  display:grid;
  gap:10px;;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  gap: 2rem;
}

/* 直下の子要素 */
.flex-container > div, 
.flex-container > img {
  width: 50%;
  flex-shrink: 0; /* 幅を縮ませない */
}

.flex-container img {
  height: auto;
  display: block;
}

.triangle {
  position: absolute;
  top: 7rem;	
  width: 100%;
  height: 100%;	
  background: #edf6ff;
  z-index: -1;
  clip-path: polygon(
	  0 15%, /* 左上 */
	  100% 0, /* 右上 */
	  100% 85%, /* 右下 */
	  0 100%/* 左下 */
  );
}

.triangle-reversed {
    position: absolute;
    top: 4rem;
    right: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 8rem);
    background: #edf6ff;
    z-index: -5;
}
/* 上だけ斜めにする */
.triangle-reversed::before {
	content: "";
	position: absolute;
	top: -8rem; /* 斜めの深さ調整 */
	left: 0;
	width: 100%;
	height: 8rem;/* 調整 */
	background: #edf6ff;
	transform: skewY(6deg);/* 調整 */
	transform-origin: top left;
}

/* ------------------------------------
   FAQ
------------------------------------ */
.faq-list { 
	width: 100%;
	max-width:960px;
	margin:0 auto 1rem; 	
}
.faq-btn-box li {
    width: 32%;
    color: #fff;
    background: #0066b3;
    border-radius: 5px;
    box-sizing: border-box;
    align-items: center;
    padding: 1rem;
    text-align: center;
	font-weight: bold;
}

/* ------------------------------------
   BUTTON AREA
------------------------------------ */
/* 採用情報ボタン */
.btn-area {
  width:90%;
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.glow-btn {
	width: 40%;/*以降はSPと同じ指定*/
    margin: 0 1rem;
    padding: 1rem;
    background: linear-gradient(45deg, #00bfff, #007bff);
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.entry-section {padding: 4rem 1.5rem;;}
.entry-buttons {
	display: -webkit-flex;
	display: flex;
	gap: 12px;
	max-width: 960px;
	margin: 0 auto;
}
.entry-btn {
	display: flex;
	justify-content: space-between;
	/*width: 100%; 文字と◯→を両端にするのに必要 */
	
	padding: 1rem;		
	background-color: #fff;
	border-radius: 4px;
		
	color: #005bac;
	align-items: center;			
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.03em;		
     width: 100%;	
}

/* ------------------------------------
   下層ページ共通
------------------------------------ */
.lower-box{margin-top: 4rem;}
.lower-ttl{
	background: #edf6ff;
    padding: 2rem 0;
    margin: 0 0 3rem;
}

.underblue-ttl{/* よくある質問＞項目下の線 */
    position: relative;
    padding: 0.5rem 0 1rem;
    margin: 2.5rem 0;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    color: #353535;
}
.underblue-ttl::before {
    position: absolute;
    border-bottom: 3px solid #0066b3;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    content: '';
}

/* ------------------------------------
   インタビュー詳細
------------------------------------ */
.work_schedule{
    width: 960px;
    padding: 5rem 0 0;	
	position: relative;
    overflow: hidden;
}	
	.work_schedule:after{
		left: 50%;
		margin-left: -2px;
		content: "";
		z-index: 1;
		position: absolute;
		top: 1px;
		width: 4px;
		min-height: 96%;
		background-color: #0066b3;
		}
	
.work_schedule p, .private p{margin: 1rem 0;}
	
.work_schedule li{		
	z-index: 2;
	position: relative;
	padding: 1rem;
	background-color:#edf6ff;
	font-size: 1.4rem;
	border-radius: 10px;
	width: 45%;
	float: left;
	margin-bottom: 3rem;
	}
	.work_schedule li:first-child {margin-top: -5rem;}
	.work_schedule li:last-child{margin-bottom:0;}
	.work_schedule li.left{
		float: left;
		clear: left;}
	.work_schedule li.right{
		float: right;
		clear: right;}	
	
	/* 縦線 */
	.work_schedule li:before{top:14px;}
		.work_schedule li:before{
			content: "";
			z-index: 1;
			position: absolute;
			right: -6px;
			left: -6px;
			width: 12px;
			height: 12px;
			background-color: #edf6ff;
			transform: rotate(45deg);
		}
	.work_schedule li.left:before{left: auto;}
	
	.work_schedule li.right + li.left:before,
	.work_schedule li.left + li.right:before {top: 4rem;}
	
	/* ◯ */
	.work_schedule li:after{
			content: "";
			z-index: 1;
			position: absolute;
			width: 20px;
			height: 20px;
			border: 3px solid #fff;
			border-radius: 100%;
			background-color: #0066b3;
			transition: .2s;
		}
		.work_schedule li:after{
			top: 14px;
			right: -13.3%;
			left: -13.3%;
		}
		
	.work_schedule li.left:after{left: auto;}
	.work_schedule li.right:after{right: auto;}	
	
	.work_schedule li.right + li.left:after,
	.work_schedule li.left + li.right:after {top: 4rem;}


/* ------------------------------------
   募集要項
------------------------------------ */
.job-title {
  font-size: 1.7rem;
  font-weight: bold;
  color: #333;	
}
.job-info-title {
  font-size: 1.5rem;
  color: #0066b3;
  border-bottom: 2px solid #0066b3;
  padding-bottom: 0.25rem;
  margin-bottom: 2rem;
}

/* 表組み */
.job-info-list div {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
}
.job-info-list dt {
  width: 20%;
  font-size: 1rem;
  font-weight: bold;
}
.job-info-list dd {
  width: 80%;
  font-size: 1rem;
}

/* キャリア採用ENTRYボタン */
.job-entry-btn {
  display: block;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  padding: 1rem;
  background: #0066b3;
  color: #fff;
  font-size: 1.2rem;	
  font-weight: 700;
  border-radius: 5px;
}
.job-entry-btn span {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

/* ------------------------------------
   お問合せ＞新卒リンク
------------------------------------ */
.mynavi-entry{
	padding: 2rem;
	border: 1px solid #0066b3;
	border-radius: 8px;
	text-align: center;
}

.mynavi-btn{
	justify-content: center; /* 左右中央揃え */
    margin-top: 1.5rem;
}

/*.mynavi-btn img{
	border: 1px solid #cfd8e3; 
	padding: 1.2rem;
}*/