/*==== 下線ホバーアニメーション （右寄せ・大きめ・常時下線） ====*/
.jump-nav.underline-ani {
  margin-top: 40px;       /* ページ上部から余白 */
  margin-bottom:20px;
  text-align: center;
  border:#999999 1px solid;
  padding:20px;
}

.jump-nav.underline-ani a {
  position: relative;
  display: inline-block;
  margin-left: 1.5em;     /* リンク同士のスペース */
  padding-bottom: 2px;    /* 擬似要素用のスペース */
  font-size: 1rem;      /* 大きめフォント */
  color: #009b9a;         /* リンクカラー */
  text-decoration: none;

}

.jump-nav.underline-ani a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: #009b9a;    /* ホバー時の太線カラー */
  transition: width .3s;
}

.jump-nav.underline-ani a:hover::after {
  width: 100%;            /* ホバーで太い下線が左→右にスライド */
}

/* ▶だけちょっと小さく */
.jump-nav.underline-ani a .arrow {
  font-size: 0.5em;       /* 親（1.4rem）の80% の大きさ */
  vertical-align: middle; /* テキストと縦位置を揃える */
  margin-right: 0.2em;   /* ▶とテキストの間に少しすき間 */
}

#titleArea_recruit{
  width: 100%;
  min-width: 1200px;
  height: 100px;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  transition: all .5s ease;
  background-color:#16a085;
}

.titleArea_recruit_img{
 margin-left:60px;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* ヒーローセクション全体 */
.hero {
  position: relative;
  /* コンテナ外でも全面表示したい場合は下２行を有効に */
  /* width: 100vw; */
  /* margin-left: calc(50% - 50vw); */
  
  width: 100%;             /* コンテナいっぱいに広げる */
  height: 490px;           /* お好みで調整 */
  overflow: hidden;

  /* 背景画像を常にセンター／cover で表示 */
  background-image: url('img/main_bg.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* テキストラッパーはそのままでOK */
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 270px 20px;
}

.hero__title {
  display: inline-block;
  background-color: #009b9a;
  color: #fff;
  font-size: 2.5rem;
  padding: 0.5em 1em;
  line-height: 1.2;
}

.hero__subtitle {
  display: inline-block;
  color: #fff;
  font-size: 0.7em;
  font-weight: bold;
  padding: 0.25em 0.75em;
  margin-bottom: 0;
  line-height: 1.2;
}

.hero__description {
  margin-top: 1rem;
  margin-right: auto;
  margin-left: 0;
  color:#333333;
  font-size: 1.1rem;
  line-height: 1.8;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.5em 1em;
  
  max-width: 960px;
}

#mainArea_recruit-internship {
  width: 960px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto;
  padding-top: 10px;
  text-align:left;
  background-color: #F6F6EF;
}

.section-header {
  background-color: #f6f4ed;
  padding: 30px 0 15px 0;
}

.section-header__title {
  position: relative;
  font-size: 24px;
  color: #017e75;
  margin-bottom:5px;
  line-height: 1.2;
  font-weight:normal;
  padding-bottom: 0.2em;
}

.section-header__title::after {
  content: "";
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 3px;

  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0), 
    currentColor 
  );
}

.recruit {
	width:960px;
	display: block;
	float: left;
	background-color: #E4FBD0;
	margin-bottom:50px;
}

.recruit dl{
	width: 960px;
	overflow: hidden;
	border-top:#CCCCCC solid 1px;
}

.recruit dt {
	width: 150px;
	padding:10px;
	float: left;
	font-size:1.2em;
	color:#333333;
}

.recruit dd {
	margin-left: 170px;
	padding:10px;
	background-color: #FFFFFF;
	font-size:1.2em;
	color:#333333;
}

.recruit dl.end{
	width: 960px;
	overflow: hidden;
	border-bottom:#CCCCCC solid 1px;
}

.recruit dl.end dt {
	width: 150px;
	padding:10px;
	float: left;
}

.recruit dl.end dd{
	margin-left: 170px;
	padding:10px;
	background-color: #FFFFFF;
}


.cards {
  padding: 0px;
  background-color: #f5f5f5;
  margin-bottom:40px;
}

.cards__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);       /* ２列 */
  grid-template-rows: repeat(1, auto);         /* ２段 */
  gap: 15px;                                   /* カード間スペース */
}

/* カード本体 */
.card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* カード内の画像 */
.card img {
  width: 100%;
  height: auto;
  display: block;
}

/* キャプション部分 */
.card__text {
  padding: 15px 5px;
  font-size: 0.8rem;
  color: #009b9a;
  line-height: 1.4;
}

.feedbacks__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ２列 */
  grid-auto-rows: auto;                  /* 自動で行の高さ調整 */
  gap: 20px;                             /* ブロック間スペース */
}

/* 各フィードバックブロック */
.feedback {
  background-color: rgba(227, 241, 240, 0.8); /* 半透明にしたい場合はRGBAで調整 */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333333;
}

/* エントリーボタン */
/* エントリーボタン */
.skew-btn {
  /* ボタン本体 */
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;       /* 疑似要素の絶対配置のため */
  width: 450px;             /* 横幅 */
  height: 70px;             /* 高さ */
  margin: 50px auto;        /* 上下50px、左右自動センター */

  background-color: #0a4490;
  /* 平行四辺形にクリップ */
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);

  /* 文字スタイル */
  color: #fff !important;           
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;

  /* ホバー時の色変化を滑らかに */
  transition: background-color 0.2s ease;
}

/* ホバー時：背景色を少し濃く */
.skew-btn:hover {
  background-color: #093575;  /* #0a4490 より少し暗めの色 */
  text-decoration: none;
}

/* 右端アイコン */
.skew-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 45px;              
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('../recruit/img/recruit_icon02.svg') no-repeat center/contain;
}