@charset "UTF-8";
/* CSS Document */
/* Modern Reset CSS 
*/

/* 1. ボックスモデルを border-box に統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. デフォルトの余白をリセット */
* {
  margin: 0;
  padding: 0;
}

/* 3. HTMLとBodyの設定 */
html {
  /* スムーズスクロールを有効化（アンカーリンク用） */
  scroll-behavior: smooth;
  /* テキストのサイズ調整を防止（iOSなど） */
  -webkit-text-size-adjust: 100%;
	font-size: 62.5%; /* 16px × 62.5% = 10px */
}

body {
  /* 行間を読みやすく設定 */
  line-height: 1.5;
  /* フォントのレンダリングを最適化 */
  -webkit-font-smoothing: antialiased;
  /* 横の突き抜けを防止 */
  overflow-wrap: break-word;
  /* 最小の高さを確保 */
  min-height: 100vh;
	font-size: 1.6rem; /* 16px相当に戻す（ベースの文字サイズ） */
}

/* 4. リストのスタイル（中丸など）を解除 */
ol, ul {
  list-style: none;
}

/* 5. リンクのデフォルト装飾を調整 */
a {
  text-decoration-skip-ink: auto;
  color: inherit;
	text-decoration: none;
}

/* 6. 画像を扱いやすくする */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 7. フォーム要素のフォント継承 */
input, button, textarea, select {
  font: inherit;
}

/* 8. テキストエリアのサイズ固定を解除（必要に応じて） */
textarea {
  resize: vertical;
}

/* 9. テーブルの隙間を排除 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*リセットcss　ここまで*/

/*共通*/

html {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.flex {
	display: -webkit-flex; /* これのことかも！ */
	display: flex;
}
h2 {
	line-height: 1;
}
.pc {
	display: block!important;
}
.sp {
	display: none!important;
}
.data-pc {
	display: inline-block!important;
}
.data-sp {
	display: none!important;
}
.data-pc-flex {
	display: flex!important;
}
.dib {
	display: inline-block;
}
.inner {
	max-width: 1200px;
	margin: 0 auto;
}
.tal {
	text-align: left!important;
}
.mb1 {
	margin-bottom: 1rem;
}
.mt2 {
	margin-top: 2rem;
}
.mb2 {
	margin-bottom: 2rem;
}
.mb5 {
	margin-bottom: 5%;
}
@media screen and (max-width: 1200px) {
	.inner {
	width: 96%;
}
}
@media screen and (max-width: 768px) {
	.pc {
		display: none!important;
	}
	.sp {
		display: block!important;
	}
	.data-pc {
		display: none!important;
	}
	.data-sp {
		display: inline-block!important;
	}
	.data-pc-flex {
	display: none!important;
}
	.inner {
	width: 96%;
}
}

/* ヘッダー全体の設定 */
header {
  position: fixed; /* absoluteからfixedに変更 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: transparent;
  transition: all 0.4s; /* 色の変化を滑らかに */
}
/* --- JSで付与するクラス --- */
/* MVを過ぎた後のスタイル */
header.is-fixed {
  background-color: #fff; /* 背景を白に */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 1rem 2rem;
}

/* 背景白の時の文字色とロゴ（必要に応じて） */
header.is-fixed .main-navi a {
  color: #333; /* 文字を黒くして読みやすくする */
}

/* スマホ版（既存のメディアクエリ内） */
@media screen and (max-width: 1044px) {
  header {
    background: #fff; /* スマホは最初から白 */
    padding: 1.5rem 15px 1.5rem 20px;
  }
}
header .logo img {
  transition: opacity 0.3s ease-in-out;
}

/* クラスが切り替わる瞬間に一瞬ふわっとさせる（任意） */
header.is-fixed .logo img {
  opacity: 1;
}

/* ナビゲーションのリストを横並びにする（もし未設定なら） */
.main-navi ul {
  display: flex;
  list-style: none;
  gap: 30px;
}

.main-navi a {
  color: #fff; /* 背景が暗い動画や画像なら文字を白にする */
  text-decoration: none;
	font-size: 1.6rem;
	font-weight: bold;
}
#side-nav {
	position: fixed;
	top: 26%;
	right: 0;
	z-index: 100;
}
#side-nav .side-red,
#side-nav .side-gray {
	width: 6rem;
	height: 22rem;
	color: #fff;
	writing-mode: vertical-rl; /* 縦書き・右から左へ行が移る */
	font-size: 1.8rem;
	font-weight: bold;
	display: flex;           /* Flexboxを有効にする */
  justify-content: center; /* 左右（水平方向）の中央揃え */
  align-items: center;     /* 上下（垂直方向）の中央揃え */
	text-decoration: none;
}
#side-nav .side-red:hover, 
#side-nav .side-gray:hover,
.list-bg .bg-black a:hover,
.list-bg .bg-gray a:hover,
.list-bg .bg-red a:hover,
#support a:hover,
.btn-red:hover,
.btn-gray:hover,
header.is-fixed .main-navi a:hover,
#interview .content ul li a:hover,
#breadcrumb ul li a:hover,
.main-navi a:hover{
	opacity: 0.6;
}
#side-nav .side-red {
	background-color: rgba(211, 47, 47, 0.9);
	margin-bottom: 1rem;
}
#side-nav .side-gray {
	background-color: rgba(70, 88, 100, 0.9);
}

/* PC版ではスマホ用要素を隠す */
.sp-header-right {
  display: none;
}
@media screen and (max-width: 1300px) {
#side-nav {
    display: none; /* PC用のナビとサイドバーを隠す */
  }
}

/* --- スマホ版（768px以下）の設定 --- */
@media screen and (max-width: 1044px) {
  header {
    position: fixed;     /* スマホは追従させることが多いため */
    background: #fff;    /* 背景を白にする */
    padding: 1.5rem 15px 1.5rem 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 境目を見やすく */
	  height: auto;
  }

  .main-navi, 
  #side-nav {
    display: none; /* PC用のナビとサイドバーを隠す */
  }

  /* スマホ右側エリアの配置 */
  .sp-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  /* 募集要項・応募するボタン */
  .sp-btns {
    display: flex;
    gap: 10px;
  }

  .sp-btns a {
    text-decoration: none;
    font-size: max(calc(18 / 750 * 100vw), 14px);
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ハンバーガーメニューの三本線 */
  .hamburger {
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
  }

  .hamburger span {
	  position: absolute;
	  left: 0;
    width: 30px;
    height: 2px;
    background-color: #333;
    transition: all 0.3s;
  }

  /* 三本線の位置調整 */
  .hamburger span:nth-child(1) { top: 6px; }
  .hamburger span:nth-child(2) { top: 19px; }
  .hamburger span:nth-child(3) { top: 31px; }
	.logo {
		width: 40%;
	}
}


/* MV（メインビジュアル）の設定 */
#mv {
  position: relative; /* 子要素の基準点にする */
  width: 100%;
  height: 80vh;      /* 画面いっぱいの高さにする場合 */
  overflow: hidden;
/*	background-image: url("../image/mv.jpg");*/
	background-size: cover;
}
/* 動画や画像をMVいっぱいに広げる設定 */
#mv video,
#mv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#top #mv hgroup{
	position: absolute;
	bottom: 14%;
	right: 10%;
	color: #fff;
}
#mv hgroup h1,
#mv hgroup h2 {
	font-size: min(calc(48 / 1600 * 100vw), 48px);
}
#mv hgroup h2{
	line-height: 1.5;
}
#mv hgroup p {
	font-size: 1.6rem;
}
#mv .scroll {
	position: absolute;
  right: 8%;
  bottom: 0; /* 線の終点を地面につける場合 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* 文字と線の間の余白 */
}
#mv .scroll span {
	writing-mode: vertical-rl;
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  color: #fff;
  font-weight: bold;
}
#mv .scroll::after {
	content: "";
  width: 1px;        /* 線の太さ */
  height: 300px;     /* 線の長さ */
  background-color: #fff;
  /* もしアニメーションさせるならここに追加 */
}

@media screen and (max-width: 768px) {
	#mv hgroup {
		left: 7%;
	}
	#mv {
  position: relative; /* 子要素の基準点にする */
  width: 100%;
  overflow: hidden;
/*	background-image: url("../image/mv_sp.jpg");*/
	background-size: cover;
		margin-top: 6rem;
}
	#mv hgroup h1 {
	font-size: min(calc(48 / 750* 100vw), 48px);
}
	#mv .scroll {
		right: 6%;
	}
	#mv .scroll span {
		font-size: 1.2rem;
	}
	#mv .scroll::after {
		height: 200px;
	}
}

#ribon {
	background-color: #efefef;
	padding: 2rem;
	font-size: 1.8rem;
	font-weight: bold;
	align-items: center;
	justify-content: center;
}
#ribon .frame {
	border: 2px solid #000;
	border-radius: 1rem;
	padding: 1rem;
	margin-right: 1.2rem;
}
#ribon .red{
	display: inline;
	color: #ae2b2b;
	border-bottom: 1px solid #ae2b2b;
	padding-bottom: .5rem;
}

@media screen and (max-width: 768px) {
	#ribon {
		padding: 5%;
		display: block;
	}
	#ribon .frame {
		display: inline-block;
		margin-bottom: 1rem;
		font-size: min(calc(27 / 750 * 100vw), 27px);
	}
	#ribon p {
		font-size: min(calc(27 / 750 * 100vw), 26px);
		line-height: 1.8;
	}
	#ribon .red {
		padding-bottom: 0;
	}
}

#engineer {
	padding: 16rem 0 24rem;
}
#engineer .flex {
	margin: 0 auto;
	justify-content: flex-end;
	gap: 4rem;
}
#engineer .left-wrapper {
	width: 45%;
}
#engineer .left-wrapper h2{
	font-size: calc(76 / 1600 * 100vw);
	margin-bottom: 6rem;
}
.list-square{
	display: grid;
	/* 1つ分の幅を「オート（中身に合わせる）」にして、それを2つ並べる */
	grid-template-columns: auto auto; 
	/* もしくは、半分ずつにしたいなら 1fr 1fr; */
	gap: 10px 40px; /* 縦の隙間10px、横の隙間40px */
	padding: 0;
	list-style: none;
}
.list-square li{
	display: flex;
  align-items: center;
  font-weight: bold;
	font-size: min(calc(20 / 1600 * 100vw), 20px);
	font-weight: bold;
}
.list-square li::before{
	content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border: 2px solid #d32f2f;
  margin-right: 10px; /* テキストとの間の余白 */
  flex-shrink: 0;     /* テキストが長くなっても四角が潰れないように固定 */
}
#engineer .right-wrapper {
	width: 41.5%;
	display: flex;         /* フレックスボックスにする */
  justify-content: flex-end; /* 中身を右端に寄せる */
	margin-top: -10rem;
}
#engineer .right-wrapper img,
#sheet-metal-painting .left-wrapper img,
#new-option .right-wrapper img {
	width: 100%;
}

#engineer .left-wrapper video {
	width: 100%;           /* 基本は親要素に合わせて100% */
  max-width: 730px;      /* 730px以上には大きくならない */
  height: auto;          /* アスペクト比を維持して自動調整（重要！） */
	margin-bottom: 2.8rem;
}
.tentative {
	width: 100%;           /* 基本は親要素に合わせて100% */
	margin-bottom: 2.8rem;
	aspect-ratio: 16 / 9; /* YouTubeの標準的な比率 */
}
.list-bg{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	list-style: none;
	font-weight: bold;
	color: #fff;
	margin-bottom: 0;
	font-size: min(calc(26 / 1600 * 100vw), 26px);
}
.list-bg .bg-black a,
.list-bg .bg-gray a,
.list-bg .bg-red a {
	padding: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #fff;
}

.list-bg .bg-black{
	background-color: #000;
	}
.list-bg .bg-gray{
	background-color: #465864;
}
.list-bg .bg-red{
	background-color: #d32f2f;
}
@media screen and (max-width: 1250px) {
	#engineer .flex {
		width: 96%;
	}
}

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

	#engineer {
        background-size: 84%;
        background-position: top 9% center;
		
		padding: 0 0 14%;
    }
	#engineer .flex {
		width: 100%;
		flex-direction: column-reverse; /* これで上下が逆転します */
	}
	#engineer .right-wrapper {
		width: 80%;
		justify-content: center;
		margin: 14% auto 0;
	}
	#engineer .right-wrapper p.catchphrase {
		font-size: min(calc(72 / 750 * 100vw), 72px);
	}
	#engineer .left-wrapper {
		width: 96%;
		margin: 0 auto;
	}
	#engineer .left-wrapper .list-square {
		display: flex;
		flex-wrap: wrap;
	}
	.list-square li {
		font-size: min(calc(30 / 750 * 100vw), 30px);
	}
/*
	.list-bg .bg-black, .list-bg .bg-gray, .list-bg .bg-red {
		padding: 1.5rem 1rem;
	}
*/
	#engineer .left-wrapper h2 {
		font-size: min(calc(80 / 750 * 100vw), 80px);
		margin-bottom: 7%;
	}
	.list-bg {
		font-size: min(calc(26 / 750 * 100vw), 26px);
	}
	.tentative {
		margin-bottom: 4%;
	}
}

p.catchphrase{
  display: block !important;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl; /* 冒頭でお話ししたwebなんちゃら(念のため) */
  font-size: min(calc(72 / 1600 * 100vw), 72px);
  text-shadow: 0 10px 20px #fff, 0 10px 10px #fff, 0 0 5px #fff;
  font-weight: bold;
  line-height: 1.5;
}
#sheet-metal-painting .left-wrapper p.catchphrase,
#new-option .right-wrapper p.catchphrase{
	padding-top: 15rem;
	color: #fff;
	text-shadow: none;
}
#new-option .right-wrapper p.catchphrase {
	padding-top: 42%;
}
p.catchphrase .quote{
  display: inline-block;
  transform: rotate(270deg);
  margin: 0.5rem 0; /* margin-blockを古いブラウザ向けに書き換え */
}

#sheet-metal-painting {
	background-color: #ae2b2b;
	padding: 16rem 0 10rem;
}
#sheet-metal-painting .flex {
	justify-content: flex-start;
	gap: 4rem;
}
#sheet-metal-painting .right-wrapper {
	width: 45%;
}
#sheet-metal-painting .right-wrapper h2 {
	font-size: calc(72 / 1600 * 100vw);
	font-weight: bold;
	margin-bottom: 4rem;
	color: #fff;
}
#sheet-metal-painting .right-wrapper .list-square {
	color: #fff;
}
#sheet-metal-painting .left-wrapper {
	width: 37.4%;
}
@media screen and (max-width: 1250px) {
	#sheet-metal-painting .flex {
		width: 96%;
	}
}

@media screen and (max-width: 768px) {
	#sheet-metal-painting {
		
		background-size: 84%;
        background-position: top 9% center;
		padding: 0 0 10rem;
	}
	#sheet-metal-painting .flex {
		width: 100%;
		flex-direction: column;
	}
	#sheet-metal-painting .left-wrapper {
		width: 80%;
		display: flex;
		justify-content: center;
		margin: 16% auto 0;
	}
	#sheet-metal-painting .left-wrapper p.catchphrase {
		padding-top: 0;
		font-size: min(calc(71 / 750 * 100vw), 71px);
	}
	#sheet-metal-painting .right-wrapper {
		width: 96%;
		margin: 0 auto;
	}
	#sheet-metal-painting .right-wrapper .list-square {
		grid-template-columns: 1fr 1fr;
	}
	#sheet-metal-painting .right-wrapper h2 {
		font-size: calc(72 / 750 * 100vw);
		margin-bottom: 7%;
	}
}

#new-option {
	background-color: #465864;
	padding: 14rem 0 18rem;
}
#new-option .flex {
	justify-content: flex-end;
	gap: 4rem;
}
#new-option .left-wrapper {
	width: 45%;
}
#new-option .left-wrapper h2 {
	color: #fff;
	font-weight: bold;
	font-size: min(calc(80 / 1600 * 100vw), 80px);
	line-height: 1.8;
	margin-bottom: 6rem;
}
#new-option .left-wrapper .list-square {
	color: #fff;
}
#new-option .right-wrapper {
	width: 41.5%;
	display: flex;
	justify-content: flex-end;
}

@media screen and (max-width: 1250px) {
	#new-option .flex {
	width: 96%;
}
}

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

	#new-option {
        background-size: 84%;
        background-position: top 6% center;
		
		padding: 0 0 10rem;
    }
	#new-option .flex {
		flex-direction: column-reverse; /* これで上下が逆転します */
		width: 100%;
	}
	#new-option .right-wrapper {
		width: 80%;
		justify-content: center;
		margin: 15% auto 0;
	}
	#new-option .right-wrapper p.catchphrase {
		font-size: min(calc(72 / 750 * 100vw), 72px);
	}
	#new-option .left-wrapper {
		width: 96%;
		margin: 0 auto;
	}
	#new-option .right-wrapper p.catchphrase {
		padding: 0;
	}
	#new-option .left-wrapper .list-square {
		display: flex;
		flex-wrap: wrap;
	}
	#new-option .left-wrapper h2 {
		font-size: min(calc(80 / 750 * 100vw), 80px);
		line-height: 1.4;
		margin-bottom: 7%;
	}
}

#support {
	background-image: url("../image/bg_04.png");
	background-position: center bottom 68%;
	background-repeat: no-repeat;
	background-size: 86%;
	padding: 16rem 0 12rem;
	text-align: center;
}
#support p {
	position: relative;
  display: inline-block;
  /* 1. 左右に広めの余白を作る（ここが重要！） */
  padding: 0 1.8em;      
  font-weight: bold;
  font-size: min(calc(36 / 1600 * 100vw), 36px);
  text-align: center;
	margin-bottom: 3.6rem;
}
#support p::before,
#support p::after {
	content: "";
  position: absolute;
  top: 50%;
  width: 45px;          /* 線の長さ（お好みで） */
  height: 2px;          /* 線の太さ */
  background-color: #000;
	
}
#support p::before {
	left: 0;             /* paddingの左端に固定 */
  transform: translateY(-50%) rotate(65deg);
}
#support p::after {
	right: 0;            /* paddingの右端に固定 */
  transform: translateY(-50%) rotate(-65deg);
}
#support a {
	display: block;
	background-color: #000;
	color: #fff;
	font-weight: bold;
	padding: 2rem;
	width: 100%;
	max-width: 80rem;
	font-size: min(calc(36 / 1600 * 100vw), 36px);
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	#support {
		background-position: left bottom 86%;
		background-size: 196%;
		padding: 36% 0 20%;
	}
	#support p {
		margin-bottom: 2rem;
		font-size: min(calc(36 / 750 * 100vw), 36px);
		padding: 0 13%;
	}
	#support a {
		width: 78%;
		font-size: min(calc(36 / 750 * 100vw), 36px);
	}
}

#career {
	background-color: #1b1b1b;
	background-image: url("../image/bg_05.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top center;
	position: relative;
	padding-bottom: 10rem;
}
#career hgroup {
	position: absolute;
	top: 10rem;
	right: 13rem;
	color: #fff;
}
#career hgroup .title-p {
	font-size: min(calc(30 / 1600 * 100vw), 30px);
	font-weight: bold;
	margin-bottom: 1%;
}
#career hgroup h2 {
	font-size: min(calc(150 / 1600 * 100vw), 150px);
	color: rgba(250,250,250,0.3);
	font-weight: bold;
	text-align: right;
}
#career hgroup h3 {
	font-size: min(calc(46 / 1600 * 100vw), 46px);
	margin: -6rem 0 3rem;
}
#career hgroup p {
	font-size: min(calc(24 / 1600 * 100vw), 24px);
}
#career .flex {
	padding: 68rem 0 8rem;
	max-width: 1240px;
	margin: 0 auto;
	justify-content: space-between;
}
#career .flex .left-wrapper,
#career .flex .right-wrapper{
	width: 48%;
}
#career .flex .left-wrapper img {
	width: 100%;
	margin-bottom: 1rem;
}
#career .flex .left-wrapper .list-kinds,
#career .flex .right-wrapper .list-kinds{
	color: #fff;
}
#career .flex .left-wrapper .list-kinds dt,
#career .flex .right-wrapper .list-kinds dt {
	font-size: min(calc(30 / 1600 * 100vw), 30px);
	font-weight: bold;
	margin-bottom: 1rem;
}
#career .flex .left-wrapper .list-kinds dd,
#career .flex .right-wrapper .list-kinds dd {
	margin-bottom: 4rem;
}
#career .flex .right-wrapper .list-kinds dd .bold {
	font-weight: bold;
}
#career .flex .right-wrapper .career-list li {
	padding: 1.6rem 0 2.8rem 15rem;
	color: #fff;
	font-weight: bold;
	margin-bottom: 1rem;
	font-size: min(calc(26 / 1600 * 100vw), 26px);
}
#career .flex .right-wrapper .career-list li.light {
	background-color: #ae2b2b;
}
#career .flex .right-wrapper .career-list li.dark {
	background-color: #900808;
}
#career .flex .right-wrapper .career-list li dl dt {
	color: rgba(250,250,250,0.6);
	font-size: min(calc(30 / 1600 * 100vw), 30px);
}
#career .flex .right-wrapper .career-list li dl dt .big {
	font-size: min(calc(48 / 1600 * 100vw), 48px);
}
#career .flex .right-wrapper .career-list li.list01 {
	background-image: url("../image/career_icon_01.png");
	background-size: 10%;
	background-position: left 7.5% top 50%;
	background-repeat: no-repeat;
}
#career .flex .right-wrapper .career-list li.list02 {
	background-image: url("../image/career_icon_02.png");
	background-size: 8%;
	background-position: left 8.5% top 50%;
	background-repeat: no-repeat;
}
#career .flex .right-wrapper .career-list li.list03 {
	background-image: url("../image/career_icon_03.png");
	background-size: 9%;
	background-position: left 8% top 50%;
	background-repeat: no-repeat;
}
#career .flex .right-wrapper .career-list li.list04 {
	background-image: url("../image/career_icon_04.png");
	background-size: 8%;
	background-position: left 8% top 50%;
	background-repeat: no-repeat;
}
#career .flex .right-wrapper .career-list li.list05 {
	background-image: url("../image/career_icon_05.png");
	background-size: 10%;
	background-position: left 8.5% top 50%;
	background-repeat: no-repeat;
}
.btn-red {
	display: block;
	width: 100%;
	max-width: 35rem;
	padding: 1rem;
	text-align: center;
	margin: 0 auto;
	color: #fff;
	background-color: #d32f2f;
	font-weight: bold;
	font-size: min(calc(26 / 1600 * 100vw), 26px);
}

@media screen and (max-width: 768px) {
	#career {
		background-image: url(../image/bg_05_sp.jpg);
		padding-bottom: 15%;
	}
	#career hgroup {
		right: 0;
		top: 5rem;
	}
	#career hgroup .title-p {
		text-align: right;
		font-size: min(calc(30 / 750 * 100vw), 30px);
	}
	#career hgroup h2 {
		margin-top: -8%;
		font-size: min(calc(150 / 750 * 100vw), 150px);
	}
	#career hgroup h3 {
		margin: 20% auto 5%;
		width: 96%;
		font-size: min(calc(46 / 750 * 100vw), 46px);
	}
	#career .flex {
		padding: 128% 0 0;
		width: 96%;
		flex-direction: column;
	}
	#career hgroup p {
		font-size: min(calc(28 / 750 * 100vw), 28px);
		width: 96%;
		margin: 0 auto;
		
	}
	#career .flex .left-wrapper, #career .flex .right-wrapper {
		width: 100%;
		margin: 0 auto;
	}
	#career .flex .left-wrapper img {
		width: 96%;
		margin: 0 auto 1rem;
	}
	#career .flex .left-wrapper .list-kinds dt, #career .flex .right-wrapper .list-kinds dt {
		font-size: min(calc(40 / 750 * 100vw), 40px);
	}
	#career .flex .right-wrapper .list-kinds dt {
		margin-top: 1.5rem;
	}
	#career .flex .left-wrapper .list-kinds dd, #career .flex .right-wrapper .list-kinds dd {
		font-size: min(calc(26 / 750 * 100vw), 26px);
		margin-bottom: 16%;
	}
	#career .flex .right-wrapper .career-list li {
		font-size: min(calc(26 / 750 * 100vw), 26px);
		padding: 2% 0 4% 26%;
	}
	#career .flex .right-wrapper .career-list li dl dt {
		font-size: min(calc(30 / 750 * 100vw), 30px);
	}
	#career .flex .right-wrapper .career-list li dl dt .big {
	font-size: min(calc(48 / 750 * 100vw), 48px);
}
	#career .flex .right-wrapper .career-list li.list01 {
		background-size: 12%;
	}
	.btn-red {
		font-size: min(calc(26 / 750 * 100vw), 26px);
		width: 40%;
	}
}

#data {
  padding: 10rem 0;
  background-color: #efefef;
}
#data hgroup {
  margin-bottom: 6rem;
  text-align: center;
}
#data hgroup .title-p {
  font-size: 3rem;
  font-weight: bold;
}
#data hgroup h2 {
  color: rgba(214,214,214,0.5);
  font-size: 15rem;
  font-weight: bold;
}

/* --- Dataセクション全体の設定（PC版レイアウト） --- */
#data .data-grid {
  display: grid;
  max-width: 1200px;
  margin: 0 auto;
  gap: 15px;
  grid-template-columns: repeat(12, 1fr); /* 12列に分割 */
  grid-auto-rows: minmax(250px, auto);
}

/* 各カードの共通スタイル */
#data .data-content, 
#data .data-content-tall {
  background-color: #fff;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 240px;
  box-sizing: border-box;

  /* 背景画像の共通ルール */
  background-repeat: no-repeat;
  background-position: center 42%; 
  background-size: auto 20%;
}

/* --- 座標指定（PC版の並びをここで制御） --- */
.box1 { grid-column: 1 / 5;  grid-row: 1; }
.box2 { grid-column: 5 / 9;  grid-row: 1; }
.box3 { grid-column: 9 / 13; grid-row: 1; }

.age-box { 
  grid-column: 1 / 5 !important; 
  grid-row: 2 / 4 !important; 
}

/* 従業員数・年間休日・有給休暇が入っている横長の箱 */
.sub-grid-row {
  grid-column: 5 / 13 !important;
  grid-row: 2 !important;
  display: flex !important; /* 中身の3枚を横に並べる */
  gap: 15px;
  width: 100%;
}
.sub-grid-row .data-content {
  flex: 1; /* 3枚均等幅 */
  min-width: 0;
}

.box7 { grid-column: 5 / 9 !important;  grid-row: 3 !important; }
.box8 { grid-column: 9 / 13 !important; grid-row: 3 !important; }

/* --- 個別の背景画像指定 --- */
#data .data-grid .box1 { background-image: url("../image/data_01.png"); background-size: auto 30%; }
#data .data-grid .box2 { background-image: url("../image/data_02.png"); }
#data .data-grid .box3 { background-image: url("../image/data_03.png"); background-size: auto 25%; }
#data .data-grid .age-box { 
  background-image: url("../image/data_04.png"); 
  background-size: 80%; 
  background-position: center 70%;
}
#data .data-grid .box5 { background-image: url("../image/data_05.png"); background-size: auto 14%; }
#data .data-grid .box6 { background-image: url("../image/data_06.png"); background-size: auto 16%; }
/* 有給休暇：sub-grid-rowの最後の子要素 */
.sub-grid-row .data-content:last-child { background-image: url("../image/data_07.png"); }
#data .data-grid .box7 { background-image: url("../image/data_08.png"); }
#data .data-grid .box8 { background-image: url("../image/data_09.png"); }

/* --- カード内の中身の調整 --- */
#data h3 {
  font-size: min(calc(26 / 1600 * 100vw), 26px);
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin: 0;
}

.red { 
  color: #ae2b2b; 
  display: flex; 
  align-items: baseline;
  font-size: 2.6rem;
  margin: 0;
}

#data .big { 
  font-size: min(calc(80 / 1600 * 100vw), 80px);
  font-weight: bold;
  line-height: 1; 
}

#data .unit, #data .sub { 
  font-size: min(calc(26 / 1600 * 100vw), 26px);
  font-weight: bold; 
}
#data .data-grid .pc {
	display: flex;
}

@media screen and (max-width: 768px) {
    /* PC専用要素の非表示 */
    #data .data-grid .data-pc-flex,
    #data .data-pc {
        display: none !important;
    }

    #data {
        padding: 5rem 0;
    }

    /* 親要素：Flexboxで制御 */
    #data .data-grid {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        width: 92%;
        margin: 0 auto;
    }

    /* 共通設定 */
    #data .data-content,
    #data .data-content-tall {
        background-color: #fff;
        padding: 2rem 5px;
        box-sizing: border-box;
        min-height: 300px; /* 高さをスマホ用に調整 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between; /* 上にタイトル、下に数字 */
        flex: none !important;
        background-repeat: no-repeat;
        background-position: center 45%; /* 画像を中央やや上に固定 */
        background-size: auto 70px; /* 画像サイズを一括調整 */
    }

    /* コンテナの無効化 */
    .sub-grid-row {
        display: contents !important;
    }

    /* --- 2段目：年齢層 & 従業員数 --- */
    .age-box {
        width: calc(60% - 5px) !important;
        order: 2;
        background-size: 60%; 
  background-position: center 74%;
    }
    .box5 {
        width: calc(40% - 5px) !important;
        order: 3;
        background-image: url("../image/data_05.png") !important;
    }

    /* --- 3段目：有給、資格、残業 (33% 3枚並び) --- */
    /* 有給（sub-grid-row内のboxクラスなし）、box7、box8 */
    .sub-grid-row .data-content:not(.box5),
    .box7,
    .box8 {
        width: calc(33.333% - 7px) !important;
        min-height: 180px;
        order: 4;
    }
    .box7 { order: 5; }
    .box8 { order: 6; }

    /* 背景画像の再定義（パスと個別サイズ） */
    .box1 { background-image: url("../image/data_01.png") !important; }
    .age-box { background-image: url("../image/data_04.png") !important; }
    .box5 { background-image: url("../image/data_05.png") !important; }
    .sub-grid-row .data-content:not(.box5) { background-image: url("../image/data_07.png") !important; }
    .box7 { background-image: url("../image/data_08.png") !important; }
    .box8 { background-image: url("../image/data_09.png") !important; }

    /* --- テキスト調整 --- */
    #data h3 {
        font-size: min(calc(30 / 750 * 100vw), 30px);
        font-weight: bold;
        margin: 0;
    }

    #data .red {
        font-size: calc(16 / 750 * 100vw);
        justify-content: center;
        width: 100%;
    }


    #data .unit, #data .sub {
        font-size: min(calc(30 / 750 * 100vw), 30px);
    }
    /* --- 1段目：年間車検台数 (100%) --- */
    #data .data-grid .data-content.box1 {
        width: 100% !important;
        order: 1;
        /* 背景画像（イラスト）の設定 */
        background-image: url("../image/data_01.png") !important;
        background-repeat: no-repeat !important;
        background-size: auto 58% !important;    /* イラストのサイズ */
        background-position: 17% center !important; /* イラストを左端から10%の位置に */
        
        /* テキストの配置設定（左寄せに変更） */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* 左寄せに変更 */
        justify-content: center !important;
        padding: 5rem 0 5rem 45%;
        min-height: 160px !important;      /* 縦幅をスッキリさせる */
    }

    /* タイトル（年間車検台数）を左寄せに */
    .box1 h3 {
        text-align: left !important;
        width: 100%;
        margin-bottom: 5px !important;
    }

    /* 数字部分（redクラス）を左寄せに */
    .box1 .red {
        justify-content: flex-start !important;
        width: 100%;
        margin-top: 0 !important;
    }

    /* 数字自体のサイズ調整 */
    .box1 .big {
        font-size: min(calc(80 / 750 * 100vw), 80px)!important;
    }
	#data hgroup {
		margin-bottom: 10%;
	}
	#data hgroup .title-p {
		font-size: min(calc(30 / 750 * 100vw), 30px);
	}
	#data hgroup h2 {
		font-size: calc(150 / 750 * 100vw);
	}
	#data .big {
		font-size: calc(64 / 750 * 100vw)!important;
		font-size: calc(64 / 750 * 100vw)!important;
	}
	#data .data-grid .age-box { 
  background-position: center 75%;
}
}

#top #interview {
	background-color: #1b1b1b;
	padding: 4% 0;
}
#top #interview .inner {
	max-width: 1600px;
	margin: 0 auto;
}
#top #interview hgroup .title-p {
	font-size: min(calc(30 / 1600 * 100vw), 30px);
	font-weight: bold;
	color: #fff;
}
#top #interview hgroup h2 {
	font-size: min(calc(150 / 1600 * 100vw), 150px);
	color: rgba(250,250,250,0.5);
}
#top #interview .grid {
	max-width: 1200px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin: 0 auto;
	gap: 3rem;
}
#top #interview .grid .content01 {
	margin-top: 40%;
}
#top #interview .grid .content02 {
	margin-top: 20%;
}
#top #interview .grid .content01,
#top #interview .grid .content02,
#top #interview .grid .content03{
	position: relative;
}
#top #interview .grid .content01:hover,
#top #interview .grid .content02:hover,
#top #interview .grid .content03:hover {
	opacity: 0.6;
}
#top #interview .grid img {
	width: 100%;
}
#top #interview .grid .comme {
	padding: 1rem 2rem 3rem;
	color: #fff;
}
#top #interview .grid .content01 .comme {
	background-color: #465864;
}
#top #interview .grid .content02 .comme {
	background-color: #ae2b2b;
}
#top #interview .grid .content03 .comme {
	background-color: #434343;
}
#top #interview .grid .comme dl dt {
	font-size: 4.6rem;
	font-weight: bold;
}
#top #interview .grid .vertical {
	font-size: min(calc(30 / 1600 * 100vw), 30px);
	font-weight: bold;
	color: #fff;
	display: block !important;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl; /* 冒頭でお話ししたwebなんちゃら(念のため) */
	text-shadow: 0 0 .5em rgba(0, 0, 0, .75), 0 0 .33em rgba(0, 0, 0, .75);
	position: absolute;
	top: -2rem;
	left: -2rem;
}

@media screen and (max-width: 1600px) {
	#top #interview hgroup {
		width: 96%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 1250px) {
	#top #interview .grid {
		width: 96%;
	}
}

@media screen and (max-width: 768px) {
	#top #interview {
		padding: 10% 5% 14%;
	}
	#top #interview hgroup {
		margin-bottom: 6rem;
	}
	#top #interview hgroup h2 {
		font-size: calc(143 / 750 * 100vw);
	}
	
	#top #interview .grid {
		grid-template-columns: 1fr; /* 1列にする */
		width: 85%;
		gap: 6rem;
	}
	.content01 { grid-row: 3; }
/* 2番目の要素を2行目に */
.content02 { grid-row: 2; }
/* 3番目の要素を1行目に */
.content03 { grid-row: 1; }
	#top #interview .grid .int-img {
		height: calc(380 / 750 * 100vw);
		overflow: hidden;  /* はみ出し防止 */
}
	#top #interview .grid .int-img img {
		width: 100%;
    height: 100%;      /* 親要素(.int-img)の高さいっぱいに広げる */
    object-fit: cover; /* 縦横比を維持したまま親を埋める（重要！） */
    object-position: center; /* 中央を中心に表示 */
    display: block;
	}
	#top #interview .grid .content02 .int-img img,
	#top #interview .grid .content01 .int-img img{
		object-position: top;
	}
	#top #interview .grid .content02,
	#top #interview .grid .content01{
		margin-top: 0;
	}
	#top #interview .grid .vertical {
		font-size: calc(45 / 750 * 100vw);
		top: -1rem;
		right: -7rem;
	}
	#top #interview .grid .vertical,
	#top #interview .grid .vertical{
		top: 0;
		left: auto;
		right: -3.5rem;
	}
	#top #interview .grid .comme dl dt {
		text-align: center;
		font-size: calc(70 / 750 * 100vw);
	}
	#top #interview .grid .comme dl dd {
		font-size: min(calc(26 / 750 * 100vw), 26px);
	}
	#top #interview .grid .comme {
		padding: 2% 5% 4%;
	}
	#top #interview hgroup .title-p {
		font-size: min(calc(30 / 750 * 100vw), 30px);
	}
}

#top #reasom {
	background-color: #eeeeee;
	padding: 4% 0;
}
#top #reasom .inner {
	max-width: 1600px;
	margin: 0 auto;
}
#top #reasom hgroup .title-p {
	font-size: min(calc(30 / 1600 * 100vw), 30px);
	font-weight: bold;
	color: #000000;
}
#top #reasom hgroup h2 {
	font-size: min(calc(150 / 1600 * 100vw), 150px);
	color: #fff;
	line-height: 1;
	margin-top: -2rem;
}
#top #reasom .content {
	margin: -10rem auto 0;;
	max-width: 1200px;
}
#top #reasom .content h3 {
	font-size: min(calc(40 / 1600 * 100vw), 40px);
	font-weight: bold;
	text-align: center;
	margin-bottom: 2rem;
}
#top #reasom .content p {
	text-align: center;
	font-size: min(calc(18 / 1600 * 100vw), 18px);
	line-height: 1.8;
	margin-bottom: 4rem;
}
#top #reasom .content .reasom-grid {
	margin-bottom: 4rem;
}
#top #reasom .content .reasom-grid ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 1rem;
}
#top #reasom .content .reasom-grid ul li {
	background-color: #fff;
	padding: 4rem 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-align: center;
}
#top #reasom .content .reasom-grid ul li img {
	margin-bottom: 2rem;
}
#top #reasom .content .reasom-grid ul li.reasom-img_06 {
	position: relative;
}
#top #reasom .content .reasom-grid ul li.reasom-img_06 .annotation {
	position: absolute;
	bottom: 30%;
	right: 26%;
}
@media screen and (max-width: 1600px) {
	#top #reasom hgroup {
		width: 96%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 1250px) {
	#top #reasom .content .reasom-grid {
		width: 96%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 768px) {
	#top #reasom {
		padding: 16% 0;
	}
	#top #reasom hgroup .title-p,
	#top #reasom hgroup h2 {
		text-align: center;
	}
	#top #reasom hgroup .title-p {
		font-size: min(calc(30 / 750 * 100vw), 30px);
	}
	#top #reasom hgroup h2 {
		font-size: calc(150 / 750 * 100vw);
	}
	#top #reasom .content h3 {
		font-size: calc(40 / 750 * 100vw);
	}
	#top #reasom .content {
		margin-top: 1rem;
	}
	#top #reasom .content p {
		font-size: min(calc(26 / 750 * 100vw), 26px);
	}
	#top #reasom .content {
		width: 96%;
	}
	#top #reasom .content .reasom-grid ul {
		grid-template-columns: 1fr 1fr 1fr;
	}
	#top #reasom .content .reasom-grid ul li {
		font-size: min(calc(26 / 750 * 100vw), 26px);
		padding: 14% 2%;
	}
	#top #reasom .content .reasom-grid ul li.reasom-img_06 .annotation {
		bottom: 30%;
    right: 10%;
	}
	#top #reasom .content .reasom-grid ul li img {
		margin-bottom: 10%;
		width: 42%;
	}
	#top #reasom .content .reasom-grid ul li.reasom-img_06 img {
		width: 28%;
	}
	#top #reasom .content .reasom-grid ul li.reasom-img_09 img {
		width: 26%;
	}
}


#qa {
	padding: 4% 0;
}
#qa .inner {
	max-width: 1600px;
	margin: 0 auto;
}
#qa hgroup .title-p {
	font-size: min(calc(30 / 1600 * 100vw), 30px);
	font-weight: bold;
	color: #000000;
}
#qa hgroup h2 {
	font-size: min(calc(150 / 1600 * 100vw), 150px);
	color: rgba(0,0,0,0.1);
	line-height: 1;
	margin-top: -2rem;
}
#qa .content {
	max-width: 1200px;
	margin: 5rem auto 0; /* 上に少し余白を追加 */
	padding: 0 2rem;
}

/* アコーディオン全体のスタイル */
.accordion {
	margin-bottom: 2rem;
}

/* 質問部分 (Q) */
.accordion summary {
	display: flex; /* 横並び */
	align-items: center;
	cursor: pointer;
	border: 1px solid #000; /* 全体を囲う枠線 */
	font-weight: bold;
	list-style: none; /* markerを消す（safari対策） */
}

/* summaryのmarkerを消す（標準） */
#qa .content summary::marker {
	content: none;
}

/* 「Q」のアイコン部分 */
.accordion summary::before {
	content: "Q";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: #000;
	color: #fff;
	font-size: 2.4rem;
	margin-right: 2rem;
	flex-shrink: 0; /* サイズを固定 */
}

/* 回答部分 (A) */
.accordion p {
	display: flex; /* 横並び */
	margin-top: 1.5rem;
	line-height: 1.6;
	padding-left: 0;
	align-items: baseline;
}

/* 「A.」のテキスト部分 */
.accordion p::before {
	content: "A.";
	display: inline-block;
	width: 60px;
	font-weight: bold;
	font-size: 2.4rem;
	margin-right: 2rem;
	text-align: center;
	flex-shrink: 0;
}
@media screen and (max-width: 1600px) {
	#qa hgroup {
		width: 96%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 768px) {
	#qa {
		padding: 16% 0;
	}
	#qa hgroup {
		position: relative;
	}
	#qa hgroup .title-p {
		position: absolute;
		bottom: 4%;
		left: 50%;
		transform: translateX(-50%); /* 自分の幅の半分だけ左にずらす */
		font-size: min(calc(30 / 750 * 100vw), 30px);
	}
	#qa hgroup .title-p,
	#qa hgroup h2 {
		text-align: center;
		
	}
	#qa hgroup h2 {
		font-size: calc(150 / 750 * 100vw);
	}
	#qa .accordion {
		font-size: min(calc(26 / 750 * 100vw), 26px);
		margin-bottom: 10%;
	}
	#qa .content {
		padding: 0;
		width: 96%;
	}
}

#entry {
	background-image: url("../image/bg_06.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 10rem 0;
}
#entry hgroup {
	margin-bottom: 2rem;
	text-align: center;
}
#entry hgroup .title-p {
	font-size: min(calc(30 / 1600 * 100vw), 30px);
	font-weight: bold;
	color: #fff;
}
#entry hgroup h2 {
	color: rgba(250,250,250,0.2);
	font-size: min(calc(150 / 1600 * 100vw), 150px);
	font-weight: bold;
	margin-top: -2rem;
}
#entry .flex {
	max-width: 1200px;
	margin: 0 auto 2rem;
}
#entry .flex .right-wrapper {
	background-color: #fff;
	padding: 2rem 4rem 3rem 4rem;
	max-height: 200px;
	width: 57%;
}
#entry .flex .right-wrapper h3 {
	font-size: min(calc(30 / 1600 * 100vw), 30px);
	font-weight: bold;
	margin-bottom: 2rem;
}
#entry .flex .right-wrapper .grid {
	gap: 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
#entry .flex .right-wrapper .grid a {
	display: block;
	padding: 2rem;
	color: #fff;
	font-weight: bold;
	font-size: min(calc(24 / 1600 * 100vw), 24px);
}
#entry .flex .right-wrapper .grid .btn-gray {
	background-color: #465864;
	text-align: center;
}
#entry .flex .right-wrapper .grid .btn-red {
	background-color: #ae2b2b;
	margin: 0;
}

@media screen and (max-width: 1250px) {
	#entry .flex {
		width: 96%;
	}
}

@media screen and (max-width: 768px) {
	#entry {
		padding: 16% 0 10%;
		background-image: url("../image/bg_06_sp.jpg");
	}
	#entry hgroup {
		position: relative;
		margin-bottom: 10%;
	}
	#entry hgroup .title-p {
		position: absolute;
		bottom: 22%;
		left: 50%;
		transform: translateX(-50%); /* 自分の幅の半分だけ左にずらす */
		font-size: min(calc(30 / 750 * 100vw), 30px);
	}
	#entry hgroup h2 {
		font-size: calc(150 / 750 * 100vw);
	}
	#entry .flex {
		width: 96%;
	}
	#entry .flex .left-wrapper {
		width: 33%;
		height: auto;
	}
	#entry .flex .right-wrapper {
        width: 67%;
        padding: 2%; 
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center; /* 中身を中央に寄せる */
		gap: 1rem;
    }
	#entry .flex .left-wrapper img {
		width: 100%;
        height: 100%; /* これで右側の白い箱の高さと一致します */
        object-fit: cover;
	}
	#entry .flex .right-wrapper .grid a {
        /* 縦書き設定を解除する（重要！） */
        writing-mode: horizontal-tb !important; 
        -webkit-writing-mode: horizontal-tb !important;
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        flex: 1; /* 2つのボタンを同じ幅にする */
        padding: 1%;; /* 上下のパディングを確保 */
        height: auto;
        min-height: 45px; /* 押しやすい高さを確保 */
        
        font-size: calc(24 / 750 * 100vw); /* 文字を少し小さくして一行に収める */
        line-height: 1;
    }
	#entry .flex .right-wrapper h3 {
        font-size: min(calc(30 / 750 * 100vw), 30px);
        margin-bottom: 0;
        text-align: left; /* テキストの始まりを揃える */
        width: 100%;
    }
	#entry .flex .right-wrapper .grid {
        display: flex; /* gridからflexに変更すると制御しやすいです */
        flex-direction: row; /* 横に並べる */
        justify-content: space-between; /* 両端に広げる */
        gap: 10px;
        width: 100%;
        max-width: 100%;
    }
}

footer {
	font-size: min(calc(14 / 1600 * 100vw), 14px);
	text-align: center;
	padding: 1rem 0;
}
@media screen and (max-width: 768px) {
	footer {
		font-size: min(calc(20 / 750 * 100vw), 20px);
	}
}

@media screen and (max-width: 1044px) {
  /* --- メニュー本体の設定 --- */
  .main-navi {
    display: flex !important; /* noneを解除 */
    position: fixed;
    top: 0;
    right: -100%;       /* 初期状態は画面の右外に隠す */
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95); /* 背景色（白） */
    z-index: 999;       /* ヘッダーより上に */
    transition: all 0.4s ease; /* スライドのアニメーション */
    align-items: center;
    justify-content: center;
  }

  /* JavaScriptでactiveクラスが付いた時に画面内に入れる */
  .main-navi.active {
    right: 0;
  }

  /* メニュー内のリンクを縦に並べる */
  .main-navi ul {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .main-navi ul li a {
    color: #333; /* 文字色を黒に */
    font-size: 2.4rem;
  }

  /* --- ハンバーガーボタンのアニメーション（×にする） --- */
  .hamburger.active span:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
  }

  /* ボタンがメニューより上に来るように調整 */
  .sp-header-right {
    position: relative;
    z-index: 1000;
  }
}
@media screen and (max-width: 1044px) {
  /* --- メニュー本体の設定 --- */
  .main-navi {
    display: flex !important;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98); /* 背景を少し濃く */
    z-index: 999;
    transition: all 0.4s ease;
    /* 中央寄せから上寄せに変更し、ロゴと被らないようpadding調整 */
    align-items: flex-start; 
    padding-top: 80px; 
  }

  .main-navi.active {
    right: 0;
  }

  /* --- メニュー全体のレイアウト修正 --- */
  .main-navi ul {
    width: 100%;
    padding: 0 30px; /* 左右の余白（添付画像のバランスに調整） */
    flex-direction: column;
    gap: 0;
  }

  .main-navi ul li {
    width: 100%;
    border-bottom: 1px solid #333; /* 境界線 */
  }

  /* 一番上の項目の上にも線を引く */
  .main-navi ul li:first-child {
    border-top: 1px solid #333;
  }

  /* --- リンクボタンの設定（ここが重要） --- */
  .main-navi ul li a {
    color: #333;
    font-size: 2.0rem;
    font-weight: bold;
    text-decoration: none;
    
    display: flex;
    align-items: center;
    justify-content: center; /* 基本は中央寄せ */
    position: relative;      /* アイコンを右端に固定するための基準 */
    
    width: 100%;
    padding: 25px 0;         /* 上下の余白（タップ範囲） */
    transition: background-color 0.3s;
  }

  /* --- ダミーアイコンのスタイル --- */
  .icon {
    position: absolute;
    right: 24px;           /* 右端からの距離 */
    width: 18px;           /* アイコンのサイズ */
    height: 18px;
    border: 2px solid #333; /* ダミーの正方形 */
    border-radius: 4px;
    display: inline-block;
  }

  /* 実際の画像に差し替える時は下記のように調整してください */
  
  .icon {
    background: url("../image/icon_ham.png") no-repeat center/contain;
    border: none;
  }
  

  /* タップ時の反応 */
  .main-navi ul li a:active {
    background-color: rgba(0, 0, 0, 0.05);
  }
}

/*------------------------------------------
職種紹介
------------------------------------------*/
#works h4 {
		font-size: 2rem;
	font-weight: bold;
}

/* コンテンツの初期設定：基本は非表示 */
.tab-content {
  display: none;
}

/* activeクラスがついたコンテンツだけ表示 */
.tab-content.active {
  display: block;
	border-top: 2px solid #000;
	margin-top: -2px;
}

/* ボタンのスタイリング */
.tab-btn {
  cursor: pointer;
	font-size: 1.8rem;
	border: 2px solid #000;
	margin-right: 2rem;
	background-color: #fff;
	color: #000;
	width: 30rem;
	font-weight: bold;
	position: relative;
	width: 27.5%;
	height: 5.2rem;
}
.tab-btn:last-child {
	margin-right: 0;
}
.tab-btn::after {
	margin-right: 0;
}

/* 選択されているボタンの色を変える */
.tab-btn.active {
  background: #000;
  font-weight: bold;
	color: #fff;
}
.tab-btn.active::after {
	content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;       /* 三角の高さ分だけ下に配置 */
  transform: translateX(-50%); /* 中央寄せ */
  
  /* 三角形の作成（幅22px、高さ11px） */
  border-left: 11px solid transparent;  /* 22pxの半分 */
  border-right: 11px solid transparent; /* 22pxの半分 */
  border-top: 11px solid #000;          /* active時の背景色と同じ色に設定 */
	z-index: 5;
}
.tab-buttons {
	text-align: center;
}

#works .inner,
#interview .inner{
	max-width: 1200px;
	margin: 0 auto;
}

#works #mv,
#interview #mv{
	position: inherit;
	width: 100%;
	max-height: 300px;
	background-image: url("../image/works/mv.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}
#works #mv hgroup h1,
#works #mv hgroup p,
#interview #mv hgroup h1,
#interview #mv hgroup p,
#reasom #mv hgroup h1,
#reasom #mv hgroup p,
#teaching #mv hgroup h1,
#teaching #mv hgroup p{
	color: #fff;
	text-align: center;
}
#works #mv hgroup h1,
#interview #mv hgroup h1{
	font-size: 4.8rem;
}
#works #mv hgroup p,
#interview #mv hgroup p{
	font-size: 1.6rem;
}
#breadcrumb{
	background-color: #efefef;
	padding: 1rem;
}
#breadcrumb ul{
	display: flex;
	font-size: 1.6rem;
}
#breadcrumb ul li::after{
	content: '>';
	padding: 0 .5rem;
}
#breadcrumb ul li:last-child::after{
	content: none;
}
#works #title,
#interview #title,
#teaching #title{
	padding: 8rem 0 10rem;
	text-align: center;
}
#works #title h2,
#interview #title h2,
#teaching #title h2{
	font-size: 3.8rem;
	line-height: 1.8;
	margin-bottom: 1rem;
}
#works #title p,
#interview #title p,
#teaching #title p{
	line-height: 1.8;
}


/* スライダー全体の高さを500pxに固定 */
.mySwiper {
  height: 500px;
  overflow: hidden;
}

/* スライドが「加速・減速」せず、ずっと同じ速さで動くようにする */
.mySwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* 画像を縦いっぱい(500px)に広げ、横幅は画像の比率に合わせる */
.mySwiper .swiper-slide {
  width: auto;      /* 横幅は画像に任せる */
  height: 100%;     /* 高さを500px（親要素いっぱい）にする */
}

.mySwiper .swiper-slide img {
  height: 500px;    /* 高さを500pxにする */
  width: auto;      /* 横幅は自動計算 */
  display: block;
}
/* ボタンを右下に配置する枠 */
.slider-controls {
  position: absolute;
  right: 13%;   /* 右からの距離 */
  bottom: 20px;  /* 下からの距離 */
  z-index: 10;
  display: flex;
  gap: 0;        /* ボタン同士をくっつける場合は0、離すなら10pxなど */
}

/* 四角いボタンの共通スタイル */
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
  position: static;    /* Swiper標準の配置を解除 */
  width: 50px !important;
  height: 50px !important;      /* 背景は白 */
  border: 1px solid #FFF;      /* 黒い枠線 */
  margin: 0;
	background-repeat: no-repeat;
	background-position: center;
}

/* 矢印のサイズを調整 */
.mySwiper .swiper-button-prev::after,
.mySwiper .swiper-button-next::after {
  font-size: 20px !important;
  font-weight: bold;
}
/* Swiper標準の「<」「>」を消す */
.mySwiper .swiper-button-prev::after,
.mySwiper .swiper-button-next::after {
  display: none;
}

/* 左矢印アイコンの設定 */
.mySwiper .swiper-button-prev {
  background-image: url('../image/works/icon_03.png'); /* パスを確認してください */
	margin-right: 1rem;
}

/* 右矢印アイコンの設定 */
.mySwiper .swiper-button-next {
  background-image: url('../image/works/icon_04.png'); /* パスを確認してください */
}

/* ホバー時に色を反転させる（お好みで） */
/*
.mySwiper .swiper-button-prev:hover,
.mySwiper .swiper-button-next:hover {
  background-color: #000;
  color: #fff !important;
}
*/
#works .tab-title {
	padding: 15rem 0 13rem;
	background-image: url("../image/works/bg_02.png");
	background-repeat: no-repeat;
	background-position: top 27% left;
}
#works .tab-title.paint {
	background-image: url("../image/works/bg02_02.png");
}
#works .tab-title .flex {
	justify-content: space-around;
}
#works .tab-title .left-wrapper {
	width: 40%;
}
#works #tab1 {
	position: relative;
}

#works .tab-title .left-wrapper h3 {
	font-size: 4.8rem;
	font-weight: bold;
	margin-bottom: 1.3rem;
	line-height: 1;
	z-index: 5;
}
#works #tab2 .left-wrapper h3 {
	line-height: 1.4;
}
#works #tab3 .left-wrapper h3 {
	line-height: 1.4;
}
#works .tab-title .left-wrapper p {
	font-size: 2.4rem;
	font-weight: bold;
}
#works .tab-title .right-wrapper {
	line-height: 2;
}
#works .buisiness-content {
	background-color: #efefef;
	padding: 8rem 0 10rem;
}
#works .buisiness-content h4 {
	color: #ae2b2b;
	margin-bottom: 4rem;
}
#works .buisiness-content ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#works .buisiness-content ul li {
	width: 48%;
	margin-bottom: 5rem;
}
#works .buisiness-content ul li img {
	width: 100%;
	margin-bottom: 2.4rem;
}
#works .buisiness-content ul li h5 {
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 1.8rem;
	line-height: 1;
}
#works .buisiness-content .flex {
	justify-content: center;
}
#works .buisiness-content .btn-gray,
#works .buisiness-content .btn-red {
	text-align: center;
	width: 29rem;
	padding: 1rem;
	font-size: 2.4rem;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}
#works .buisiness-content .btn-gray {
	background-color: #465864;
	margin-right: 2rem;
}
#works .buisiness-content .btn-red {
	background-color: #ae2b2b;
	margin: 0;
}

#works .works-flow {
	background-image: url("../image/works/bg_01.png");
	background-repeat: no-repeat;
	background-position: top right;
	padding: 9rem 0 15rem;
	background-size: auto 100%;
}
#works .works-flow h4 {
	margin-bottom: 6rem;
}
#works .works-flow .flex {
	justify-content: space-between;
}
#works .works-flow .flex .left-wrapper {
	text-align: center;
	width: 32%;
}
#works .works-flow .flex .left-wrapper img {
	margin-bottom: 1.2rem;
}
#works .works-flow .flex .left-wrapper dl dt {
	font-size: 2.6rem;
	margin-bottom: .5rem;
}
#works .works-flow .flex .right-wrapper {
	width: 58%;
}
#works .explanation {
	background-color: #efefef;
	padding: 8rem 0 8rem;
}
#works .explanation ul li {
	background-color: #fff;
	padding: 3rem 3rem 3rem 18rem;
	background-repeat: no-repeat;
	background-position: top 50% left 4.6%;
	margin-bottom: 1rem;
}
#works .explanation ul li:first-child {
	background-image: url("../image/works/icon_01.png");
}
#works .explanation ul li:last-child {
	background-image: url("../image/works/icon_02.png");
	background-position: top 50% left 2.6%;
	margin-bottom: 0;
}
#works .explanation ul li h4 {
	color: #ae2b2b;
	margin-bottom: 1rem;
}
#works .explanation ul li p {
	line-height: 1.8;
}
#works .explanation ul li p span {
	padding-left: 2rem;
	position: relative;
	display: block;
	margin: 2rem 0;
}
#works .explanation ul li p span.bold {
	font-weight: bold;
	margin: 0;
	padding: 0;
}
#works .explanation ul li p .no01::before {
	content: '1.';
	position: absolute;
	left: 0;
}
#works .explanation ul li p .no02::before {
	content: '2.';
	position: absolute;
	left: 0;
}
#works .explanation ul li p .no03::before {
	content: '3.';
	position: absolute;
	left: 0;
}

#works .link {
	padding: 10rem 0 15rem;
}
#works .link .flex {
	justify-content: space-between;
	align-items: flex-end;
}
#works .link .flex li {
	width: 48%;
}
#works .link .flex li img {
	margin-bottom: 1.8rem;
}
#works .link .flex li iframe{
	margin-bottom: 1.2rem;
	width: 100%;
	aspect-ratio: 9 / 4.9;
}
#works .link .flex li p {
	font-size: 1.8rem;
	font-weight: bold;
}
#works .works-flow .inner .flex .right-wrapper ul {
	list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 10px;           /* 線を少し右に寄せる */
}
#works .works-flow .inner .flex .right-wrapper ul li {
	position: relative;
  padding-left: 30px;          /* 線とテキストの間の余白 */
  margin-bottom: 40px;         /* 項目ごとの上下間隔 */
	display: flex;
}
#works .works-flow .inner .flex .right-wrapper ul li::before {
	content: "";
  position: absolute;
  left: -8px;                  /* 線の太さに合わせて微調整（(丸の幅/2 + 線の幅/2)） */
  top: 10px;                    /* 時間のテキストと高さを合わせる */
  width: 14px;
  height: 14px;
  background-color: #000;      /* 丸の色 */
  border-radius: 50%;
	z-index: 1; /* 線より上にくるように */
}
#works .works-flow .inner .flex .right-wrapper ul li::after {
  content: "";
  position: absolute;
  /* 丸の中心に合わせる (丸のleft -8px + 丸の幅14px/2 = -1px) */
  left: -2px; 
  /* 丸の下からスタート */
  top: 19px; 
  /* 次の項目の丸まで届くように (margin-bottomと同じくらい) */
  bottom: -50px; 
  width: 2px;
  background-color: #333;
}
#works .works-flow .inner .flex .right-wrapper ul li:last-child {
	margin-bottom: 0;
}
#works .works-flow .inner .flex .right-wrapper ul li:last-child::after {
  display: none;
}
#works .works-flow .inner .flex .right-wrapper ul li .time-red {
  color: #d74343;              /* 赤色 */
  font-weight: bold;
  font-size: 2.4rem;
  margin-right: 3rem;
  display: inline-block;
  vertical-align: top;
	line-height: 1;
}
#works .works-flow .inner .flex .right-wrapper ul li dl {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}
#works .works-flow .inner .flex .right-wrapper ul li dt {
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 5px;
}
#works .works-flow .inner .flex .right-wrapper ul li dd {
  margin: 0;
  color: #333;
}
#works .works-flow .inner .flex .left-wrapper img {
	margin-bottom: 1rem;
}
@media screen and (max-width: 1200px) {
	#works .inner,
	#works .buisiness-content .flex{
		width: 96%;
		justify-content: center;
		align-items: center;
	}
	#works .buisiness-content .flex {
		flex-direction: column;
	}
	#works .buisiness-content .btn-gray {
		margin-right: 0;
		margin-bottom: 1.6rem;
	}
	
	#works .tab-title .left-wrapper {
		margin-bottom: 1rem;
	}
	#works .tab-title .left-wrapper,
	#works .tab-title .right-wrapper {
		width: 100%;
		text-align: left;
	}
	
}
@media screen and (max-width: 1000px) {
	#works .flex {
		flex-direction: column;
	}
	#works .works-flow .inner .flex {
		flex-direction: column;
		width: 100%;
	}
	#works .works-flow .inner .flex .left-wrapper {
		margin: 0 auto 8%;
		width: 100%;
		text-align: center;
	}
	#works .works-flow .inner .flex .left-wrapper img {
		margin: 0 auto 1rem;
		max-width: 25rem;
	}
	#works .works-flow .flex .left-wrapper dl dt {
		font-size: calc(36 / 750 * 100vw);
		margin-bottom: 0;
	}
	#works .works-flow .flex .left-wrapper dl dd {
		font-size: calc(26 / 750 * 100vw);
	}
	#works .works-flow .inner .flex .right-wrapper ul li {
		flex-direction: column;
	}
	#works .works-flow .inner .flex .right-wrapper ul li .time-red {
		margin-bottom: 1.8%;
		font-size: calc(36 / 750 * 100vw);
	}
	#works .works-flow .inner .flex .right-wrapper ul li dl dt {
		font-size: calc(27 / 750 * 100vw);
	}
	#works .works-flow .inner .flex .right-wrapper ul li dl dd {
		font-size: calc(24 / 750 * 100vw);
	}
	#works .works-flow .flex .right-wrapper {
		width: 100%;
	}
	#works .link .flex {
    display: flex;
    flex-direction: column; /* スマホなら縦並びにするのが一般的 */
	align-items: center;
}
#works .link .flex li:first-child {
	margin-bottom: 4rem;
}
}
@media screen and (max-width: 768px) {
	#works #mv,
	#interview #mv,
	#reasom #mv,
	#teaching #mv{
		max-height: 15vh;
	}
	#works #mv hgroup h1,
#interview #mv hgroup h1,
	#teaching #mv h1{
	font-size: calc(48 / 750 * 100vw);
}
	#works #mv {
		max-height: 250px;
	}
	#works #breadcrumb {
		padding: 2%;
	}
	#works .tab-btn {
		font-size: calc(24 / 750 * 100vw);
		width: 30%;
		margin-right: .5rem;
		padding: 1rem .5rem;
		height: 10rem;
		vertical-align: bottom;
	}
	#works .tab-buttons {
		vertical-align: bottom;
	}
	#works .inner {
		width: 96%;
		margin: 0 auto;
	}
	
	#works .tab-title {
		background-position: top 14% left;
    background-size: 82%;
		padding: 25% 0 13%;
	}
	#works .tab-title .left-wrapper {
		width: 100%;
		margin-bottom: 1rem;
	}
	#works .buisiness-content ul {
		flex-direction: column;
	}
	#works .buisiness-content ul li {
		width: 100%;
	}
	#works .buisiness-content {
		padding: 16% 0;
	}
	#works .buisiness-content .flex {
		flex-direction: row;
		width: 96%;
		justify-content: space-between;
		margin: 0 auto;
	}
	#works .buisiness-content .flex a {
		width: 49.5%;
		margin: 0;
		font-size: calc(30 / 750 * 100vw);
	}
	#works .works-flow h4 {
		margin-bottom: 4rem;
		font-size: calc(30 / 750 * 100vw);
	}
	#works .works-flow .flex .left-wrapper {
		margin: 0 auto 4rem;
		justify-content: center;
	}
	#works .works-flow .flex .left-wrapper img {
		margin: 0 auto 1.2rem;
	}
	#works .works-flow {
		background-position: bottom center;
		background-image: url(../image/works/bg_01sp.png);
		padding: 10% 0 24%;
	}
	#works .explanation {
		padding: 14%0 14%;
	}
	#works .explanation ul li {
		padding: 5rem 1.2rem 3rem;
		background-position: top 4% left 6%;
        background-size: 10%;
	}
	#works .explanation ul li:last-child {
		background-position: top 12% left 2.6%;
    background-size: 17%;
	}
	#works .explanation ul li h4 {
		margin-bottom: 3rem;
		padding-left: 20%;
	}
	#works .link {
		padding: 20% 0 14%;
	}
	

#works .link .flex li {
    width: 100%; /* liが横幅いっぱいになるように強制 */
}
	#works .link ul li {
		margin-bottom: 3.5rem;
	}
	#works .link .flex li iframe{
	width: 100%;           /* 横幅を親要素（li）いっぱいに */
    height: auto;          /* 一旦リセット */
    aspect-ratio: 16 / 9;  /* YouTubeの標準的な比率を指定 */
    margin-bottom: 1.2rem;
}
}
@media screen and (max-width: 430px){
	#works .explanation ul li {
		padding: 5rem 1.2rem 3rem;
		background-position: top 6% left 4.5%;
        background-size: 15%;
	}
	#works .tab-btn {
		height: 7rem;
	}
	#works .tab-title .left-wrapper h3 {
		font-size: calc(44 / 430 * 100vw);
	}
}


#interview #mv {
	background-image: url("../image/interview/mv.jpg");
}
#interview .content ul li a {
	display: flex;
	background-color: #efefef;
	margin-bottom: 7rem;
}

#interview .content ul li a .index_thumb{
	width: 50%;
	position: relative;
}
#interview .content ul li a .index_thumb .trim_img{
	width: auto;
	max-width: 55%;
	height: 110%;
	object-fit: contain;
	object-position: bottom left;
	position: absolute;
	bottom: 0;
	left: 5%;
	z-index: 1;
}
#interview .content ul li a .index_thumb .bg_img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#interview .content ul li a .gray{
	display: flex;
	align-items: center;
	width: 50%;
	padding: 1.5rem;
}

#interview .content ul li .gray h3 {
	color: #ae2b2b;
	font-weight: bold;
	font-size: 2.4rem;
}
#interview .content ul li .gray .initial {
	line-height: 1.6;
	font-size: 4.8rem;
	font-weight: bold;
}

@media screen and (max-width: 1000px) {
	#works #title, #interview #title {
		padding-bottom: 18rem;
		width: 96%;
	}
}
@media screen and (max-width: 768px) {
	#works #title, #interview #title {
		padding-bottom: 8rem;
	}
	#interview #title h2 {
		font-size: calc(48 / 750 * 100vw);
	}
	#interview #title p {
		font-size: calc(26 / 750 * 100vw);
	}
	#interview .content ul li a {
		display: block;
		margin-bottom: 12vw;
	}

	#interview .content ul li a .index_thumb{
		width: 100%;
	}
	#interview .content ul li a .index_thumb .trim_img{
		left: 3%;
	}
	#interview .content ul li a .index_thumb .bg_img{
		height: auto;
		object-fit: cover;
	}
	
	#interview .content ul li a .gray {
		display: block;
		width: 100%;
		padding: 2rem 1rem;
	}
	#interview .content ul li a .gray h3 {
		font-size: calc(34 / 750 * 100vw);
	}
	#interview .content ul li a .gray .initial {
		font-size: calc(46 / 750 * 100vw);
	}

}
#interview #section01 {
	position: relative;
	height: 650px;
	background-color: #efefef;
}
#interview #section01 .section01_bg{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	position: absolute;
}

#interview #section01 .prf {
	display: flex;
	position: absolute;
	bottom: -18%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1200px;
}
#interview #section01 .prf .left-wrapper {
	background-color: #ae2b2b;
	padding: 6rem 4rem;
	color: #fff;
}
#interview #section01 .prf .left-wrapper h2 {
	font-size: 4.6rem;
	font-weight: bold;
}
#interview #section01 .prf .left-wrapper p {
	font-size: 2rem;
}
#interview #section01 .prf .right-wrapper {
	background-color: #fff;
	padding: 4rem;
}
#interview #section01 .prf .right-wrapper .prf-list {
	display: flex;
	align-items: baseline;
	margin-right: 6rem;
	margin-bottom: 1rem;
}
#interview #section01 .prf .right-wrapper .prf-list dt {
	font-size: 1.8rem;
	font-weight: 600;
}

#interview #section01 .prf .right-wrapper .prf-list dd {
	font-size: 2.6rem;
	font-weight: bold;
}
#interview #section01 .prf .right-wrapper p {
	font-size: 1.8rem;
	line-height: 1.8;
}
#interview #section02 {
	background-color: #f1f1f1;
	padding: 18rem 0 8rem;
}
#interview #section02 .flex,
#interview #section02-2 .flex {
	justify-content: space-between;
}
#interview #section02 .left-wrapper {
	width: 48%;
}
#interview .qa dt {
	font-size: 2.4rem;
	color:  #ae2b2b;
	font-weight: bold;
	margin-bottom: 1.5rem;
}
#interview .qa dd {
	line-height: 1.8;
	margin-bottom: 3rem;
	
}
/* ==========================================
   インタビュー用スライダー (interviewSwiper)
   ========================================== */

/* 1. 全体を包む枠：ドットを見せるために visible にし、余白を作る */
.interviewSwiper {
  width: 100%;
  position: relative !important;
  overflow: visible !important;   /* ドットを見せるために必須 */
  margin-bottom: 40px !important; /* ドットが表示されるスペースを確保 */
  padding-bottom: 0 !important;
}

/* 2. 画像エリア：ここからはみ出る画像を隠す */
.swiper-main {
  width: 100%;
  overflow: hidden !important;    /* 横に並んだ画像をここでカット */
  position: relative;
}

/* 3. ドット（ページネーション）の配置 */
.interviewSwiper .swiper-pagination {
  position: absolute !important;
  bottom: -15px !important;       /* 画像(swiper-main)の下端から30px下に配置 */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  text-align: center;
  line-height: 1;
  z-index: 99 !important;
}

/* 4. スライド画像の設定 */
.interviewSwiper .swiper-slide {
  width: 100% !important;         /* 確実に1枚ずつ表示 */
	display: flex;
  justify-content: center;
}

.interviewSwiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
	object-fit: cover;     /* 隙間が出ないように埋める */
}

/* 5. ドットの見た目カスタム */
.interviewSwiper .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  margin: 0 5px !important;
  background: #88949b !important; /* 待機中の色 */
  opacity: 1 !important;
  cursor: pointer;
}

.interviewSwiper .swiper-pagination-bullet-active {
  background: #ae2b2b !important; /* 現在表示中の色 */
}

/* 6. 親要素の制限解除：ドットが親要素でカットされるのを防ぐ */
section#section02, 
section#section02-2,
.left-wrapper, 
.right-wrapper {
  overflow: visible !important;
}
/* 既存のCSSにこれを追加・上書き */

/* ドットを表示するコンテナ自体に高さを与える */
.interviewSwiper .swiper-pagination-lock {
  display: block !important; /* スライドが少なくても強制表示 */
}

/* ドット（個々の丸）が生成された時に確実に見えるようにする */
.interviewSwiper .swiper-pagination-bullet {
  display: inline-block !important;
  visibility: visible !important;
}
/* 外側の枠（ドットを配置するベース） */
.interviewSwiper {
  width: 100%;
  position: relative;
  overflow: visible !important;
  margin-bottom: 50px !important; /* 下にしっかり余白を作る */
}

/* 画像を隠す枠（JSでSwiperが適用される場所） */
.swiper-main {
  width: 100%;
  overflow: hidden; /* ここで画像をカット */
  position: relative;
}

/* ドットの配置（必ず見える位置に固定） */
.interviewSwiper .swiper-pagination {
  position: absolute !important;
  bottom: -26px !important; /* 画像の下端から35px下 */
  width: 100% !important;
  text-align: center;
  line-height: 1;
  z-index: 99;
}

/* ドットが消えるのを防ぐ（念押し） */
.interviewSwiper .swiper-pagination-bullet {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  background: #88949b !important;
  opacity: 1 !important;
  margin: 0 5px !important;
}
.interviewSwiper .swiper-pagination-bullet-active {
  background: #ae2b2b !important;
}

/* 画像サイズ */
.interviewSwiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
	object-fit: cover;     /* 隙間が出ないように埋める */
}
#interview #section02-2 {
	padding: 10rem 0 9rem;
}
#interview #section02 .left-wrapper,
#interview #section02 .right-wrapper,
#interview #section02-2 .left-wrapper,
#interview #section02-2 .right-wrapper {
	width: 48%;
}
#interview #section03 {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;
	padding: 12rem 0;
	position: relative;
}

#interview #section03 .section03_bg{
	width: 100%;
	height: 100%;
	background-color: rgba(70, 88, 100, 1);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
#interview #section03 .section03_bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .1;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
#interview #section03 .section03_deco{
	font-size: 9.375vw;
	font-weight: 700;
	color: rgba(255,255,255,.3);
	text-transform: uppercase;
	line-height: .5;
	position: absolute;
	left: -.1em;
	top: 0;
}
#interview #section03 .flex {
	justify-content: flex-end;
}
#interview #section03 .message-img {
	width: 20%;
	max-height: 120%;
	object-fit: contain;
	object-position: bottom left;
	position: absolute;
	left: 18%;
	bottom: 0;
	z-index: 3;
}
#interview #section03 .message-text{
	position: relative;
	z-index: 2;
}
#interview #section03 .message-text h3 {
	font-size: 2.4rem;
	color: #fff;
	font-weight: bold;
	margin-bottom: 2rem;
}
#interview #section03 .message-text p {
	border: 1px solid #fff;
	padding: 4rem;
	color: #fff;
	font-size: 2.2rem;
	line-height: 1.8;
	max-width: 700px;
}
@media screen and (max-width: 1400px) {
	#interview #section03 .message-img {
		left: 9%;
	}
}
@media screen and (max-width: 1200px) {
	#interview .inner {
		width: 96%;
	}
	#interview #section01 .prf {
		width: 96%;
	}
	#interview #section03.engineer .flex {
		width: 96%;
	}
	#interview #section03 .message-img {
		width: 20%;
	}
}
@media screen and (max-width: 1120px) {
	#interview #section03 .message-img {
		left: 4%;
	}
}
@media screen and (max-width: 880px) {
	#interview #section03 {
		background-size: cover;
		padding: 38% 0 10%;
	}
	#interview #section03 .section03_deco{
		font-size: 20.8vw;
		letter-spacing: .03em;
	}
	#interview #section03 .flex {
		justify-content: center;
		width: 96%;
	}
	#interview #section03 .message-img {
		left: 50%;
		transform: translateX(-50%);
		top: -10%;
		bottom: auto;
		width: 43%;
		z-index: 1;
	}
	#interview #section03 .message-text {
		z-index: 100;
	}
	#interview #section03 .message-text p {
		background-color: #465864;
		font-size:  calc(32 / 880 * 100vw);
	}
}
@media screen and (max-width: 768px) {

	#interview #section01 .prf {
		flex-direction: column;
		bottom: -95%;
	}
	#interview #section01 .prf .left-wrapper {
		width: 100%;
		padding: 0.5rem 2rem 1rem;
	}
	#interview #section01 .prf .left-wrapper hgroup {
		display: flex;
		align-items: center;
	}
	#interview #section01 .prf .left-wrapper hgroup h2 {
		margin-right: 1.6rem;
	}
	#interview #section01 .prf .right-wrapper {
		padding: 2rem;
	}
	#interview #section01 .prf .right-wrapper .flex{
		flex-direction: column;
	}
	#interview #section01 .prf .right-wrapper .flex .prf-list {
		margin-bottom: 1.6rem;
	}
	#interview #section01 .prf .right-wrapper .prf-list dt,
	#interview #section01 .prf .right-wrapper p {
		font-size:  calc(28 / 750 * 100vw);
	}
	#interview #section01 .prf .right-wrapper .prf-list dd {
		font-size:  calc(36 / 750 * 100vw);
	}
	#breadcrumb {
		padding: 1.6rem;
	}
	#breadcrumb ul {
		font-size:  calc(24 / 750 * 100vw);
	}
	#interview #section02,
	#interview #section02-2{
		padding: 12% 0 10%;
}
	#interview #section02{
		padding-top: 84%;
	}
	
	#interview #section02 .flex {
		flex-direction: column;
	}
	#interview #section02-2 .flex {
		flex-direction: column-reverse;
	}
	#interview #section02 .flex,
	#interview #section02-2 .flex {
		width: 96%;
		margin: 0 auto;
	}
	#interview #section02 .left-wrapper,
	#interview #section02 .right-wrapper{
		width: 100%;
	}
#interview #section02 .left-wrapper{
	margin-bottom: 2rem;
}

	#interview #section01 {
		height: calc(480 / 750 * 100vw);
	}
	#interview .qa dt {
		font-size: calc(34 / 750 * 100vw);
	}
	#interview .qa dd {
		font-size: calc(26 / 750 * 100vw);
	}
	#interview #section02-2 .right-wrapper,
	#interview #section02-2 .left-wrapper {
		width: 100%;
	}
	#interview #section02-2 .right-wrapper {
		margin-bottom: 2rem;
	}
	#interview #section03 {
		
		background-size: cover;
		padding: 38% 0 10%;
	}

	#interview #section03 .flex {
		justify-content: center;
		width: 96%;
	}
	#interview #section03 .message-img {
		left: 50%;
		transform: translateX(-50%);
		top: -10%;
		width: 43%;
		z-index: 1;
	}
	#interview #section03 .message-text {
		z-index: 100;
	}
	#interview #section03 .message-text p {
		background-color: #465864;
		font-size:  calc(32 / 750 * 100vw);
		padding: 2rem;
	}
}
@media screen and (max-width: 500px) {
	#interview #section01 .prf {
		bottom: -111%;
	}
}

#reasom #mv {
	position: inherit;
	width: 100%;
	max-height: 300px;
	background-image: url("../image/reasom/mv.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}
#reasom #r-works {
	padding: 10rem 0 6rem;
	background-image: url("../image/reasom/bg_w.png");
	background-repeat: no-repeat;
	background-position: left top 10rem;
}
#reasom #r-works .flex {
	justify-content: space-between;
	align-items: center;
}
#reasom #r-works .left-wrapper {
	width: 38%;
}
#reasom #r-works .left-wrapper h2,
#reasom #r-weleare .inner h2{
	font-size: 3.8rem;
	font-weight: bold;
	margin-bottom: 3rem;
}
#reasom #r-works .left-wrapper p,
#reasom #r-weleare .left-wrapper p{
	line-height: 1.8;
}
#reasom #r-weleare {
	padding: 6rem 0;
	background-image: url("../image/reasom/bg_w_2.png");
	background-repeat: no-repeat;
	background-position: left top 6rem;
}
#reasom #r-weleare .inner h2 {
	margin-top: 7rem;
}
#reasom #r-weleare .inner h3 {
	font-size: 1.8rem;
	font-weight: bold;
	margin: 7rem 0 2rem;
}
#reasom #r-weleare .inner ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#reasom #r-weleare .inner ul li {
	width: 49%;
	background-color: #efefef;
	padding: 5rem 2rem 5rem 10rem;
	position: relative;
	background-repeat: no-repeat;
	background-position: top 5rem left 2.5rem;
	margin-bottom: 2rem;
	background-size: 10%;
}
#reasom #r-weleare .inner ul li h4 {
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 2rem;
}
#reasom #r-weleare .inner ul li p {
	line-height: 1.8;
}
#reasom #r-weleare .inner ul li a {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	font-weight: bold;
	color: #ae2b2b;
	text-decoration: underline;
}
#reasom #r-weleare .inner ul.weleare-list li.list01 {
	background-image: url("../image/reasom/bg_icon01.svg");
}
#reasom #r-weleare .inner ul.weleare-list li.list02 {
	background-image: url("../image/reasom/bg_icon02.svg");
}
#reasom #r-weleare .inner ul.weleare-list li.list03 {
	background-image: url("../image/reasom/bg_icon03.svg");
}
#reasom #r-weleare .inner ul.weleare-list li.list04 {
	background-image: url("../image/reasom/bg_icon04.svg");
}
#reasom #r-weleare .inner ul.weleare-list02 li.list01 {
	background-image: url("../image/reasom/bg_icon05.svg");
}
#reasom #r-weleare .inner ul.weleare-list02 li.list02 {
	background-image: url("../image/reasom/bg_icon06.svg");
	background-position: top 5rem left 3rem;
}
#reasom #r-weleare .inner ul.weleare-list03 li.list01 {
	background-image: url("../image/reasom/bg_icon07.svg");
}
#reasom #r-weleare .inner ul.weleare-list03 li.list02 {
	background-image: url("../image/reasom/bg_icon08.svg");
}
#reasom #r-weleare .inner ul.weleare-list03 li.list03 {
	background-image: url("../image/reasom/bg_icon09.svg");
}
#reasom #r-weleare .inner ul.weleare-list03 li.list04 {
	background-image: url("../image/reasom/bg_icon10.svg");
	background-position: top 5rem left 3.5rem;
}
#reasom #r-weleare .inner ul.weleare-list03 li.list05 {
	background-image: url("../image/reasom/bg_icon11.svg");
	background-position: top 5rem left 3rem;
}
#reasom #r-weleare .inner ul.weleare-list04 li.list01 {
	background-image: url("../image/reasom/bg_icon12.svg");
}
#reasom #r-weleare .inner ul.weleare-list04 li.list02 {
	background-image: url("../image/reasom/bg_icon13.svg");
}

@media screen and (max-width: 768px) {
	#reasom #mv{
		max-height: 15vh;
	}
	#reasom #r-works .flex {
		flex-direction: column;
	}
	#reasom #r-works .left-wrapper,
	#reasom #r-works .right-wrapper {
		width: 100%;
		margin-bottom: 7rem;
	}
	#reasom #r-works .right-wrapper {
		margin-bottom: 3rem;
	}
	#reasom #r-weleare ul {
		flex-direction: column;
	}
	#reasom #r-weleare .inner ul li {
		width: 100%;
		padding: 3rem 2rem 1rem 10rem;
		padding-left: 15%;
		background-size: 8%;
		background-position: top 3rem left 4.5%;
	}
	#reasom #r-works{
		padding: 23% 0 0;
		background-position: left top 11%;
    background-size: 60%;
	}
	#reasom #r-weleare{
		padding: 17% 0 10%;
		background-position: left top 1.5%;
    background-size: 77%;
	}
	#reasom #r-works .left-wrapper h2, #reasom #r-weleare .inner h2 {
		margin-bottom: 2rem;
	}
	#reasom #r-works .left-wrapper p, #reasom #r-weleare .left-wrapper p,
	#reasom #r-weleare .inner p {
		font-size: calc(26 / 750 * 100vw);
	}
	#reasom #r-weleare .inner h2 {
		margin-top: 0;
		font-size: calc(48 / 750 * 100vw);
	}
	#reasom #r-works .left-wrapper h2 {
		font-size: calc(48 / 750 * 100vw);
	}
	#reasom #r-weleare .inner ul li a {
		font-size: calc(26 / 750 * 100vw);
	}
	#reasom #r-weleare .inner ul li p {
		margin-bottom: 2rem;
	}
	#reasom #r-weleare .inner h3 {
		font-size: calc(28 / 750 * 100vw);
	}
	#reasom #r-weleare .inner ul li h4 {
		font-size: calc(32 / 750 * 100vw);
	}
	#reasom #r-weleare .inner ul.weleare-list02 li.list02,
	#reasom #r-weleare .inner ul.weleare-list03 li.list05{
		background-position: top 3rem left 4%;
	}
	#reasom #r-weleare .inner ul.weleare-list03 li.list04,
	#reasom #r-weleare .inner ul.weleare-list04 li.list02{
		background-position: top 3rem left 5%;
    background-size: 6%;
	}
	#reasom #r-weleare .inner ul.weleare-list03 li.list01 {
		padding-bottom: 3rem;
	}
}
@media screen and (max-width: 500px) {
	#reasom #r-weleare {
		background-position: left top 1%;
	}
}

#teaching #mv{
	position: inherit;
	width: 100%;
	max-height: 300px;
	background-image: url("../image/teaching/mv.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}
#teaching #title h3 {
	margin-bottom: 3rem;
}
#teaching #section01 {
	background-image: url("../image/teaching/bg_01.png");
	background-position: top left;
	background-repeat: no-repeat;
}
#teaching #section01 .inner {
	padding: 3rem 0 10rem;
}
#teaching #section01 .inner h2 {
	margin-bottom: 9rem;
	font-size: 3.8rem;
}
#teaching #section01 .inner ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1060px;
	margin: 0 auto;
}
#teaching #section01 .inner ul li {
	width: 48%;
	max-width: 480px;
	margin-bottom: 7rem;
}
#teaching #section01 .inner ul li img{
	margin-bottom: 2rem;
}
#teaching #section01 .inner ul li h3 {
	margin-bottom: 1rem;
}
#teaching #section01 .inner ul li h3 {
	font-weight: bold;
	font-size: 3rem;
}

#teaching #section01 .inner ul li h3 .small {
	font-size: 1.8rem;
}
#teaching #section01 .inner ul li p {
	line-height: 1.8;
}
#teaching #section01 .inner ul li .red {
	color: #ae2b2b;
	border-bottom: 1px solid #ae2b2b;
	margin-bottom: 5px;
	font-size: 1.6rem;
	display: inline-block;
}
#teaching #section01 .inner .text-gray {
	color: #566671;
	width: fit-content;
	margin: 0 auto;
	line-height: 1.8;
}
#teaching #section02 {
	background-image: url("../image/teaching/bg_02.png");
	background-position: top 10rem left;
	background-repeat: no-repeat;
	background-color: #efefef;
}
#teaching #section02 .inner {
	padding: 10rem 0 0;
}
#teaching #section02 .inner h2 {
	margin: 3rem 0 10rem;
	font-size: 3.8rem;
}
#teaching #section02 .inner .flex {
	justify-content: space-between;
}
#teaching #section02 .inner .flex .left-wrapper,
#teaching #section02 .inner .flex .right-wrapper {
	width: 48%;
}
#teaching #section02 .inner .flex .left-wrapper img,
#teaching #section02 .inner .flex .right-wrapper img {
	margin-top: -4rem;
	margin-bottom: 17rem;
}
/* 全体コンテナ */
.career-container {
    margin: 0 auto;
    overflow: hidden;
	
}
.career-container .career-inner {
	padding-right: 6%;
}
.career-row {
    display: flex;
    height: 350px;
    margin-bottom: -1px;
	
}

/* 左側：画像エリア */
.image-box {
    width: 65%; 
    flex-shrink: 0;
    /* ここが重要！画像を一番上に重ねて斜めラインを絶対に見せる */
    z-index: 3; 
    pointer-events: none; 
}
.image-box picture {
    display: block;
    width: 100%;
    height: 100%;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	object-position: center center !important;
}

/* 右側：テキストエリア */
.content-box {
    flex-grow: 1;
    margin-left: -32%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    /* 画像の下に配置 */
    z-index: 1; 
	padding-right: 6%;
}

/* --- 各段の設定（1段目の修正と、文字位置の調整） --- */

/* 1段目：【重要】ここを100%にすると文字が全部隠れるので、92%から始めます */
.bg01 { background-color: #fff; color: #333; }
.bg01 .image-box { clip-path: polygon(0 0, 92% 0, 84% 100%, 0 100%); }
.bg01 .content-box {
	padding-left: 27%; 
	background-color: #fff;
}
.bg01 .content-box p {
	max-width: 400px;
}

/* 2段目 */
.bg02 .image-box {
	clip-path: polygon(0 0, 84% 0, 76% 100%, 0 100%); 
	background-color: #88949b;
}
.bg02 .content-box {
	padding-left: 22%; 
	background-color: #7a8a94; 
}
.bg02 .content-box p {
	max-width: 480px;
}

/* 3段目 */
.bg03 .image-box { clip-path: polygon(0 0, 76% 0, 68% 100%, 0 100%); }
.bg03 .content-box {
	padding-left: 18%; 
	background-color: #435461; 
}
.bg03 .content-box p {
	max-width: 560px;
}

/* 4段目 */
.bg04 .image-box { clip-path: polygon(0 0, 68% 0, 60% 100%, 0 100%); }
.bg04 .content-box { padding-left: 13%; background-color: #d93333; }
.bg04 .content-box p {
	max-width: 640px;
}

/* 5段目 */
.bg05 .image-box { clip-path: polygon(0 0, 60% 0, 52% 100%, 0 100%); }
.bg05 .content-box { padding-left: 8%; background-color: #b02a2a; }
.bg05 .content-box p {
	max-width: 720px;
}

#teaching #section02 .career-container .bg01 .content-box p {
	line-height: 1.8;
}
#teaching #section02 .career-container .career-row hgroup {
	margin-bottom: .8rem;
}
#teaching #section02 .career-container .career-row hgroup p {
	font-size: 4.8rem;
	color: rgba(250,250,250,0.6);
	margin-bottom: 2.4rem;
	font-weight: bold;
	line-height: 1!important;
}
#teaching #section02 .career-container .career-row hgroup h3 {
	font-size: 3rem;
	color: #fff;
}
#teaching #section02 .career-container .career-row {
	color: #fff;
}
#teaching #section02 .career-container .career-row .big {
	font-size: 7.2rem;
}
#teaching #section02 .career-container .bg01 .content-box hgroup p {
	color: #b5b5b5;
}
#teaching #section02 .career-container .bg01 .content-box hgroup h3,
#teaching #section02 .career-container .bg01 .content-box p{
	color: #465864;
}

#teaching #section03 {
	background-image: url("../image/teaching/bg_03.png");
	background-position: top 11rem left;
	background-repeat: no-repeat;
	padding-bottom: 8rem;
}
#teaching #section03 .inner {
	padding: 11rem 0 5rem;
}
#teaching #section03 .inner h2 {
	margin: 3rem 0 5rem;
	font-size: 3.8rem;
}
#teaching #section03 .inner p {
	line-height: 1.8;
}

#teaching #section03 .tab-content {
	background-color: #eeeeee;
	padding: 7rem 10rem;
}
#teaching #section03 .tab-content h3 {
	font-size: 3.2rem;
}
#teaching #section03 .tab-content .flex {
	align-items: end;
	margin-bottom: 4rem;
}
#teaching #section03 .tab-content .flex .left-wrapper {
	background-color: #fff;
	padding: 3rem 5rem 6rem;
	text-align: center;
	min-width: 352px;
	margin-right: 4rem;
}
#teaching #section03 .tab-content .flex .left-wrapper .name {
	font-size: 2.6rem;
	margin-bottom: 2rem;
}
#teaching #section03 .tab-content .flex .left-wrapper .position {
	margin-bottom: 0;
}
#teaching #section03 .tab-content .teaching-list {
	width: 100%;
	background-color: #fff;
	border: 1px solid #000;
}
#teaching #section03 .tab-content .teaching-list tr th,
#teaching #section03 .tab-content .teaching-list tr td {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	padding: 2rem 3rem;
	text-align: center;
	font-weight: inherit;
}
#teaching #section04 {
	background-image: url("../image/teaching/bg_04.png"),url("../image/teaching/bg_06.jpg");
	background-position: top 10rem left, center;
	background-repeat: no-repeat;
	background-size: auto, cover;
}
#teaching #section04 .inner {
	padding: 11rem 0 10rem;
}
#teaching #section04 .inner h2 {
	margin: 3rem 0 7rem;
	font-size: 3.8rem;
	color: #fff;
}
#teaching #section04 .inner .bg-white {
	margin-bottom: 3rem;
}
#teaching #section04 .inner .bg-white li {
	background-color: #fff;
	padding: 3rem 3rem 3rem 0;
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 1rem;
}
#teaching #section04 .inner .bg-white li h3 {
	font-size: 2.4rem;
	font-weight: bold;
	min-width: 250px;
	text-align: center;
}
#teaching #section04 .inner .bg-white li p {
	line-height: 1.8;
	font-size: 1.8rem;
}
#teaching #section04 .inner .white-text {
	color: #fff;
	font-size: 1.8rem;
	text-align: center;
}
#teaching #section05 {
	background-image: url("../image/teaching/bg_05.png");
	background-position: top 11rem left;
	background-repeat: no-repeat;
}
#teaching #section05 .inner {
	padding: 11rem 0 10rem;
	max-width: 1200px;
	gap : 5rem;
}
#teaching #section05 .inner h2 {
	margin: 4rem 0 7rem;
	font-size: 3.8rem;
}
#teaching #section05 .inner .left-wrapper .bold {
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.8;
	margin-bottom: 4rem;
}
#teaching #section05 .inner .left-wrapper .text-gray02 {
	color: #959595;
	font-size: 1.4rem;
	line-height: 1.8;
}
#teaching #section05 .inner .left-wrapper .text-gray02 .red {
	color: #ae2b2b;
	border-bottom: 1px solid #ae2b2b;
	display: inline;
	font-size: 1.4rem;
}
#teaching #section02 .inner .flex .left-wrapper h3 {
	font-size: 2rem;
}
#teaching #section03 .tabs {
	max-width: 1400px;
	margin: 0 auto;
}
@media screen and (max-width: 823px) {
	.tab-btn:last-child {
		font-size: 1.7rem;
	}
}
@media screen and (max-width: 768px) {
	#teaching #mv{
		max-height: 15vh;
	}
	#teaching #mv h1{
	font-size: calc(48 / 750 * 100vw);
}
	#teaching #title {
		width: 96%;
		margin: 0 auto;
	}
	#teaching #title h2 {
		font-size: calc(48 / 750 * 100vw);
	}
	#teaching #title h3 {
		font-size: calc(30 / 750 * 100vw);
	}
	#teaching #title p {
		font-size: calc(28 / 750 * 100vw);
		text-align: left;
	}
	#teaching #section01 .inner ul,
	#teaching #section02 .inner .flex {
		flex-direction: column;
	}
	#teaching #section01 .inner ul li {
		width: 100%;
		max-width: none;
		margin-bottom: 12%;
	}
	#teaching #section01 .inner ul li img {
		width: 100%;
	}
	#teaching #section01 .inner ul li h3 {
		font-size: calc(40 / 750 * 100vw);
	}
	#teaching #section01 .inner ul li h3 .small {
		font-size: calc(28 / 750 * 100vw);
	}
	#teaching #section01 .inner ul li p {
		font-size: calc(28 / 750 * 100vw);
	}
	#teaching #section01 .inner .text-gray {
		font-size: calc(20 / 750 * 100vw);
	}
	#teaching #section02 {
		background-size: 80%;
	}
	#teaching #section02 .inner h2 {
		margin: 2.5% 0 10%;
	}
	#teaching #section02 .inner .flex .left-wrapper,
	#teaching #section02 .inner .flex .right-wrapper {
		width: 100%;
	}
	#teaching #section02 .inner .flex .left-wrapper{
		margin-bottom: 15%;
	}
	#teaching #section02 .inner .flex .right-wrapper{
		margin-bottom: 25%;
	}
		#teaching #section02 .inner .flex .left-wrapper img,
	#teaching #section02 .inner .flex .right-wrapper img {
		position: relative;
		width: 80%;
		margin: -10% auto 0;
		z-index: 1;
	}
	#teaching #section02 .inner .flex .right-wrapper img {
		margin-top: -5rem;
	}
	#teaching #section02 .inner .flex .left-wrapper h3 {
		position: relative;
		font-size: calc(28 / 750 * 100vw);
		z-index: 10;
	}
	.career-row {
        height: calc(500 / 750 * 100vw);
        display: flex; /* 横並び維持 */
    }

    .image-box {
        width: 30%; /* 画像の幅を固定 */
        clip-path: none !important;
        z-index: 1;
    }

    .content-box {
        width: 60%; /* テキストの幅を固定 */
        margin-left: 0;
        padding: 5%!important;
        clip-path: none !important;
    }
	.content-box p {
		font-size: calc(28 / 750 * 100vw);
	}
	.bg01 .content-box p {
		max-width: 100%;
	}
	#teaching #section02 .career-container .career-row hgroup p {
		font-size: calc(48 / 750 * 100vw);
	}
	#teaching #section02 .career-container .career-row .big {
		font-size: calc(72 / 750 * 100vw);
	}
	#teaching #section02 .career-container .career-row hgroup h3 {
		font-size: calc(30 / 750 * 100vw);
	}
	.tab-btn {
		font-size: calc(24 / 750 * 100vw);
		width: 30%;
		margin-right: 2%;
		padding: .5rem 1rem;
	}
	.tab-btn:last-child {
		margin-right: 0;
	}
	.tab-buttons {
		width: 96%;
		margin: 0 auto;
	}
	#teaching #section03 .inner p {
		font-size: calc(28 / 750 * 100vw);
		margin-bottom: 0;
	}
	#teaching #section03 .tab-content .flex {
		flex-direction: column;
	}
	#teaching #section03 .tab-content .flex .left-wrapper,
	#teaching #section03 .tab-content .flex .right-wrapper {
		width: 100%;
	}
	#teaching #section03 .tab-content {
		padding: 10% 2% 20%;
	}
	#teaching #section03 .tab-content .flex .left-wrapper {
		margin-right: 0;
		text-align: center;
		margin-bottom: 3rem;
		padding: 0rem 5rem 2.5rem;
	}
	#teaching #section03 .tab-content .flex .left-wrapper .bg-white img {
		margin: 0 auto;
		width: 50%;
	}
	#teaching #section03 .tab-content h3 {
		margin-bottom: 6%;
		font-size: calc(32 / 750 * 100vw);
	}
	#teaching #section03 .tab-content .teaching-list tr th, #teaching #section03 .tab-content .teaching-list tr td {
		font-size: calc(24 / 750 * 100vw);
		padding: 1rem 1.5rem;;
	}
	#teaching #section03 .tab-content .teaching-list {
		table-layout: auto; /* これが重要！ */
	}
	.no-wrap {
    white-space: nowrap; /* 文字を改行させない */
    width: 1px;          /* 必要最小限の幅に収めるためのテクニック */
  }
	#teaching #section04 .inner .bg-white li {
		flex-direction: column;
		padding: 3rem 1.5rem;
		align-items: flex-start;
	}
	#teaching #section04 .inner .bg-white li h3 {
		margin-bottom: 4%;
		text-align: left;
		font-size: calc(30 / 750 * 100vw);
	}
	#teaching #section04 {
		background-position: top 6% left, top center;
		background-color: #465864;
		background-size: 50%, contain;
	}
	#teaching #section04 .inner .white-text {
		text-align: left;
		font-size: calc(24 / 750 * 100vw);
	}
	#teaching #section04 .inner {
		padding: 16% 0;
	}
	#teaching #section05 .inner {
		flex-direction: column;
	}
	#teaching #section05 .inner .left-wrapper,
	#teaching #section05 .inner .right-wrapper {
		width: 100%;
	}
	#teaching #section05 .inner .left-wrapper .bold {
		font-size: calc(26 / 750 * 100vw);
	}
	#teaching #section05 .inner .left-wrapper .text-gray02,
	#teaching #section05 .inner .left-wrapper .text-gray02 .red{
		font-size: calc(24 / 750 * 100vw);
	}
	#teaching #section05 .inner .left-wrapper .text-gray02 {
		margin-bottom: 5rem;
	}
	#teaching #section05 .inner {
		padding: 15% 0 23%;
	}
	#teaching #section01 .inner {
		padding-top: 3%;
	}
	#teaching #section01 {
		background-size: 60%;
	}
	#teaching #section01 .inner h2,
	#teaching #section02 .inner h2,
	#teaching #section03 .inner h2,
	#teaching #section04 .inner h2,
	#teaching #section05 .inner h2{
		font-size: calc(38 / 750 * 100vw);
	}
	#teaching #section04 .inner h2 {
		margin: 4% 0 10%;
	}
	#teaching #section01 .inner h2 {
		margin-bottom: 12%;
	}
	#teaching #section03 .inner h2 {
		margin: 4% 0 6%;
	}
	#teaching #section03 {
		background-size: 100%;
	}
	#teaching #section04 .inner .bg-white li p {
		font-size: calc(26 / 750 * 100vw);
	}
	#teaching #section05 {
		background-size: 90%;
		background-position: top 10% left;
	}
	#teaching #section05 .inner h2 {
		margin: 10% 0 8%;
	}
	#teaching #title h3 {
		margin-bottom: 5%;
	}
	#teaching #title {
		padding: 13% 0 18%;
	}
	#teaching #section01 .inner ul li img {
		margin-bottom: 4%;
	}
	#teaching #section03 {
		padding-bottom: 0;
	}
}
#r-weleare,
#r-works {
	scroll-margin-top: 80px; /* ヘッダーの高さ分を指定 */
}
#kentei {
	scroll-margin-top: 160px; /* ヘッダーの高さ分を指定 */
}
@media screen and (max-width: 768px) {
	#r-weleare,
#r-works,
	#kentei {
		scroll-margin-top: 8rem; /* ヘッダーの高さ分を指定 */
	}
}