@charset "UTF-8";
/*===================================
 ベーススタイル（PC用: MAX 1270px） 
====================================*/
.container {
    /*width: 100%;*/
    max-width: 1270px; /* PCでの最大幅 */
    margin: 0 auto;    /* 中央寄せ */
    padding: 0 20px;   /* 必要に応じて余白 */
}

/*=================================
 スマホ用スタイル（768px以下に適用）
================================= */
@media screen and (max-width: 768px) {
    .container {
        /* スマホ用に変更したいスタイルを記述 */
        max-width: 100%; /* 768px以下では画面幅いっぱいにする */
        padding: 0 15px; /* スマホ用に余白を調整 */
	    }
}

/* =========================
   トップビュー共通
========================= */

#top {
  position: relative;
  max-width: 1270px;
  margin: 0 auto;
  overflow: visible;
  margin-bottom: 12em
}

/* 背景（トップより20%縦に長く） */
.top-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* ← 20%長く */
  background-image: url("../img/shinsotsu/bg.jpg");
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  z-index: 0;
  padding-bottom: calc(320px / 2 + 5rem); /* タイトル高さの半分 + 少し余白 */
}

/* トップ画像 */
.top-img {
  position: relative;
  z-index: 1;
}

.top-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   h1タイトル
========================= */

.top-title {
  position: absolute;
  /*top: 50%;*/
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
  z-index: 2;
  margin: 0;

}

.top-title img {
  width: 100%;
  height: auto;
  display: block;

  /* 自分の高さの半分だけ下にずらす */
  transform: translateY(50%);
}

/* =========================
   PC（768px以上）
========================= */

@media screen and (min-width: 769px) {

  #top {
    max-width: 1270px;
  }

}

/* =========================
   スマホ（768px未満）
========================= */

@media screen and (max-width: 768px) {

  #top {
    height: 480px;       /* 高さ固定 */
    overflow: visible;   /* ← これに変更 */
    /*overflow: hidden;     横にはみ出す部分を隠す */
    margin-bottom: 6em
   /* padding-bottom: calc(330px / 2 + 1rem);  高さ固定 330px の半分 + 少し余白 */
  }

  .top-img img {
    width: auto;         /* 横幅は自動 */
    height: 330px;       /* 高さ固定で縦横比維持 */
    max-width: none;     /* 横制限解除 */
    position: absolute;  /* 中央配置用 */
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  
  .top-title {
  top:50%;
  width: 100%;
  }

  .top-title img {
    width: 90%;          /* 画面幅に合わせる */
    height: auto;        /* 比率維持 */
  }

  .top-bg {
    background-position: center 40%;
    height: 120%;        /* 背景はそのまま */
  }
}

  .top-bg {
    height: 120%;              /* 同じく20%長く */
    background-position: center 40%; /* スマホ用微調整 */
  }



/* =========================
   サブビュー
========================= */
/* ------------------------
   全セクション共通
-------------------------- */

/* 子要素を横並びにする基準 */
.subview .subview-inner {
	width: 900px;
	margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 3em;
    padding-top: 3em;
}

/* スマホでは縦並び */
@media screen and (max-width: 768px) {
    .subview .subview-inner {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }
}

/* ---------------------------------
   通常配置（画像左／テキスト右）
--------------------------------- */

.subview .noriben-picture {
    order: 1; /* ← 画像が先 */
}

.subview .noriben-picture {
    order: 2; /* ← テキストが後 */
}

/* --------------------------------
   反転配置（画像右／テキスト左）
------------------------------------- */

.subview.reverse .subview-image {
    order: 2; /* ← 画像後 */
}

.subview.reverse .subview-content {
    order: 1; /* ← テキスト先 */
}

/* --------------------------
   セクション内の画像
--------------------------- */

.subview-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------
   point画像 を中央に配置
----------------------------- */

.subview-content .point1,
.subview-content .point2 {	
    display: block;
    margin: 0 auto 20px;
    width: 40%;
    height: auto;
}

/* -------------------------
   背景画像に文字を重ねる
--------------------------- */

.point-box {
    background-image: url("../img/shinsotsu/h1-point2.png");
    background-size: contain;        /* 全体にフィット */
    background-position: center;   /* 中央配置 */
    background-repeat: no-repeat;
    
    
    /*width: 90%;*/
    aspect-ratio: 41 / 15;      /* 高さを指定（重要） */
    
    display: flex;
    align-items: center;    /* 縦中央 */
    justify-content: center;/* 横中央 */

}
/*
.point-box .point-bg {
    display: block;
    width: 100%;
    height: auto; 
}
*/

.sub-text1,
.sub-text2 {
    /*position: absolute;*/
    /*top: 0;*/
    left: 0.5rem;
    position: relative;
    text-align: left;
    font-weight: bold;
    font-size: 4.5em;
    line-height: 2.1;
    margin-top: -0.3em;

}

@media screen and (max-width: 768px) {
    /*.point-box */ 
    .sub-text1, .sub-text2 {
        font-size: 3em;
    }
}

/* ------------------------
        キャプション
------------------------ */

.caption {
    line-height: 1.7;
    font-size: 1.6rem;
    padding-top: 2rem;
}


/*==========================
   のりかえ便利マップとは？
=========================*/

.noriben {
  	max-width: 900px;
	margin: 0 auto;
	padding: 1em 0 7em 0;
}


/*------ 横並び ----------*/
.noriben-container {
  display: flex;
  align-items: flex-start;
  gap: 2em;
}

.noriben-picture {
  flex: 1;
  
}

.noriben-picture img {
  width: 80%;
  height: auto;
  display: block;
}

.noriben-text {
  flex: 1;
}

.noriben-text p {
  font-size: 1.8rem;
  margin-bottom: 16px;
  line-height: 1.8;
}

.touki {
  border-top: solid 1px;
  text-align: right;
  font-size: 1.2rem;
  color: #666;
}

.line-noriben {
	max-width: 90%;
	opacity: 50%;
}

/* ===== レスポンシブ ===== */
@media screen and (max-width: 768px) {

   .noriben {
    	width: 90%;
    	margin: 0 auto;
    }
    .noriben-container { 
    	flex-direction: column;
    	gap: 20px;
    }
    
    .noriben-picture {
        margin: 0 auto;
    }
    
    .noriben-picture img {
    	display: block;
    	margin: 0 auto;  
    }
    
  }
}

/*======================
	職種名
======================*/
.job {
	/*padding: 40px 20px;*/
  	width: 900px;
	margin: 0 auto;
}

.job .job-title{
	text-align: center;
	margin: 7em 0 0 0 ;
}

.job .job-title .job-en{
	font-style: normal;
	color: #BDCCD4;
	font-size: min(8rem, 7.3206vw);
	line-height: 1;
	/*font-weight: 300;*/
	margin-bottom: -12px;
	letter-spacing: 0.045em;
}

.job .job-title .job-j{
	font-size: min(6rem, 4.3924vw);
	line-height: 1;
	margin-top: -25px;
	letter-spacing: 0.2em;
	font-weight: 700;
}

@media screen and (max-width: 768px) {
	.job {
		width: 80%;
	    height: auto;
	    display: block;
	    }
}

/*---------------------
   コンテナの共通設定
---------------------- */
.job .job-container {
    display: flex;
    flex-wrap: wrap;           /* 行を折り返す */
    justify-content: center;   /* 左右中央揃え */
    gap: 20px;               /* アイテム間の余白 */
    margin-top: 2em;                
}

/* -----------------------
        各アイテム
--------------------- */
.job-item {
    position: relative;        /* テキストを絶対配置する基準 */
    display: inline-block;
    width: 250px;              /* PC版の基本幅 */
}

.job-item img {
    width: 100%;               /* アイテム幅に合わせる */
    height: auto;
    display: block;
}

.job-item p {
    position: absolute;        /* 画像右下に配置 */
    bottom: 10px;
    right: 10px;
    background-color: orange;
    color: white;
    padding: 6px 10px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
}

/* -------------------------
      スマホ版レスポンシブ
------------------------------ */
@media screen and (max-width: 768px) {
	.job {
	    display: block;
    	margin: 0 auto;
	}
    .job-container {
        flex-direction: column;   /* 縦並び */
        align-items: center;      /* 左右中央 */
    }
    
    .job-item {
       width: 60vw;             /* 横幅を広めにして縦並び */
        margin-bottom: 20px;
    }

    
    .job-item img {
        width: 100%;
        height: auto;
    }
    
    .job-item p {
        font-size: 1.5rem;
    }
}

/*==========================
    データで見るナビット
=======================*/

.data {
  	width: 900px;
	margin: 0 auto;
	text-align: center;
}

.h2-title {
	position: relative;
	margin: 7em auto 3.5em auto;
	text-align: center;
	width: fit-content; /* 画像幅に合わせる */
	/*	display: inline-block; */
}

/*-----------------------
    ▲▼のグラデ
 ------------------------ */
.h2-bg-img {
	width: 80%;
	/*display: block;*/
}

/*--------------------------
       2枚目 重ねる画像
 -------------------------- */
.overlay-img {
	position: absolute;
  	width: 80%;
	top: 0;
	left: 10%;
}

/* -----------------------
     テキスト中央配置
----------------------- */
.title-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	white-space: nowrap;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.5;
}

.data-list {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横2列 */
  gap: 3.5em;
  
}

.data-item {
  display: flex;              /* アイコン左／テキスト右 */
  align-items: center;
  gap: 30px;
  justify-content: center;
  border: solid 1px #ccc;
  padding: 0.7em 0em 0.7em 2em;
}

.data-item .deta-icon {
  width: 20%;
  height: auto;
}

.data-item .data-text {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.data-text p {
  margin: 0;
  line-height: 1.3;
  font-size: 1.6em;
}

/* --------------------
      数字を2倍
------------------- */
.num {
  font-size: 3em;
  font-weight: bold;
}

/* ---------------------
   スマホ（768px以下）
------------------------ */

@media screen and (max-width: 768px) {
	
	.data{
	max-width: 90%;
	}
	
	.h2-title {
	position: relative;
	display: inline-block;
	margin: 3rem 0 1rem 0 ;
	}
	
	.title-text {
	font-size: 2.5rem;
	left: 50%;
	}
	
	.h2-bg-img {
	width: 100%;
	display: block;
	}
	
  .data-list {
    grid-template-columns: 1fr;  /* 縦並び */
    gap: 30px;
  }

  .data-item {
    gap: 15px;
  }

  .data-item img {
    width: 50px;
  }

}


/*=================================
               募集要項
===============================*/

/* -----------------------------------
       PC（768pxより大きい）
 ----------------------------------- */

.recruit {
  	max-width: 900px;
  	margin: 0 auto;
	text-align: center;
}


.recruit .recruit-list {
  	width: 90%;
  	margin: 0 auto;
	display: flex; 
	flex-wrap: wrap;
	align-items: center;
	/* margin-bottom: 3rem; */
}

/*---------------------
       dt（左側）
 ----------------------- */
.recruit .recruit-left {
    width: 30%;
    background-color: #f5f5f5;  /* 背景色 */
    padding: 12px 20px;
    margin: 1.3em 0 1.3em 0;
    border-radius: 9999px;      /* 両端を完全に丸く */
    align-items: center;
    font-weight: bold;
	font-size: 1.6em;
	text-align: center;
	line-height: 1.3;
	border: solid 1px;
}
/*
.recruit .recruit-left,
.recruit .recruit-right {
    padding: 1em 0 0 2em;
    border-bottom: 1px solid #ddd;
}
 */


/* .dd（右側） */
.recruit .recruit-right {
    width: 70%;
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em;
    font-size: 1.8em;
    text-align: left;
    line-height: 1.5;
    display: flex;
    align-items: center; 
    color: #555; 
}

/* ---------------------------------
          SP（768px以下）
 ----------------------------- */
@media screen and (max-width: 768px) {

	.recruit{
	max-width: 90%;
	}

    .recruit .recruit-left {
        grid-template-columns: 1fr; /* 縦並び */
    }

	.recruit .recruit-left,
	.recruit .recruit-right {
        width: 100%;
    }

    .recruit .recruit-left {
        margin-top: 15px;
    }

    .recruit .recruit-right {
        margin-bottom: 15px;
    }
}

/*============================
     レコメンドバナー集
============================*/

/* --------------------
         PC版 
 ------------------ */
 
.recommend {
  	width: 900px;
	margin: 0 auto;
	text-align: center;
}

.recommend-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 横3列 */
    gap: 30px;
    justify-items: center;
    margin: 5em 0 ;
}

.recommend-item {
    text-align: center;
}

.recommend-item img {
    width: 200px;
    height: auto;
    object-fit: cover;
    margin-bottom: 10px;
    border: 1px solid #c0c0c0;
}

.recommend-item p {
    margin-top: 10px;
    font-size: 14px;
}

/* -------------------------
      SP（768px以下）
 ------------------------- */

@media screen and (max-width: 768px) {
	
	.recommend{
	max-width: 90%;
	}

    .recommend-list {
        grid-template-columns: 1fr; /* 縦並び */
        gap: 20px;
    }

    .recommend-item img {
        width: 100%;
        max-width: 250px;
        height: auto;
    }

}

/*=============================
     よくある質問
 ==============================*/
 
/* ------------------------
    セクション全体を中央 
 -------------------- */
.q-and-a {
  	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}



/* ------------------------
       dl以下は左揃え 
 -------------------------*/
.q-and-a dl {
	width: 100%;
	margin: 0 auto;
    text-align: left;
    margin-bottom: 3em;
}


/*-------------------------
        質問部分（Q行）
 --------------------------- */
section .q {
	width: 100%;
    background-color: #f5f5f5;  /* 背景色 */
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 9999px;      /* 両端を完全に丸く */
    margin-top: 4em;
    display: flex;
    align-items: center;
    font-weight: bold;
	font-size: 2em;
	line-height: 1.3;
	border: solid 1px;
}

/*----------------------------
          Qを目立たせる
 ------------------------------- */
section .q span {
    font-size: 2em;
    font-weight: 900;
    margin-right: 8px;
    /*display: flex; */
    align-items: center;
    margin-top: -5px;
}

/* ------------------------
        A. のスタイル
-------------------------- */

section .ans {
    margin: 10px 0 20px 0;
	font-size: 1.8em;
	line-height: 1.5;
	color: #555;    
}

section dd span {
    font-weight: 900;    /* 太字 */
    margin-right: 6px;
    color: #00225C;
}

/* ===== ブレイクポイント 768px ===== */

@media screen and (max-width: 768px) {
	
	.q-and-a{
	max-width: 90%;
	}

    section dt {
        font-size: 1.4em;
    }

    section dd {
        font-size: 1.4em;
    }

    section dt span {
        font-size: 1.6em;   /* スマホでは少し小さく */
    }

}
 
/*============================
      メディア掲載
============================*/

/* --------------------
         PC版 
 ------------------ */
 
.media {
  	width: 900px;
	margin: 0 auto;
	text-align: center;
}

.media-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 横3列 */
    gap: 30px;
    justify-items: center;
    margin-bottom: 3em;
}

.media-item {
    text-align: center;
}

.media-item img {
    max-width: 185px;
    height: auto;
    object-fit: cover;
    margin-bottom: 10px;
    border: 1px solid #c0c0c0;
}

.media-item p {
    margin-top: 10px;
    font-size: 14px;
}

/* -------------------------
      SP（768px以下）
 ------------------------- */

@media screen and (max-width: 768px) {
	
	.media{
	max-width: 90%;
	}

    .media-list {
        grid-template-columns: 1fr; /* 縦並び */
        gap: 20px;
    }

    .media-item img {
        width: 100%;
        max-width: 250px;
        height: auto;
    }

}

 
/*===============================
             選考フロー
==================================*/ 
 
.process {
  	width: 900px;
	margin: 0 auto;
	text-align: center;
}

/*
.h2-title {
	position: relative;
	display: inline-block;
	margin: 1rem;
}
*/
 
.process .process-list { 
	flex-wrap: wrap;
	text-align: center;
	margin: 2em auto 7em;
} 
 
.process .process-item {
	width: 70%;
	margin: 0 auto; 
	padding: 0.5em;
	font-size: 1.6em;
	line-height: 1.3;
	color: #555; 
	background-color: #fff;	
	border: solid 1px #ccc;
} 
 
.process .arrow {
	padding: 0.5em 0 0.5em 0;
	font-size: 1.6em;
} 
 
 
/*------------------------------
           SP（768px以下）
-------------------------------*/
@media screen and (max-width: 768px) {
	
	.process{
	max-width: 90%;
	}
	
	.process .process-item {
	margin: 0 auto;
	}
}
 
 
/*===============================
マイナビ
==============================*/

.fnotice {
	margin: 3em 0 0 0;
	text-align: center;
	font-size: 2em;
}