body {
	font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;    
	position: relative;
  left: 0;
  overflow-x: hidden;
	-webkit-text-size-adjust: 100%; /* iphone横向き 文字拡大防止 */
	background-color: #ddd;
}

img {
	display: block;
	width: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

a {
	text-decoration: none;
	color: #333;
	transition: all .3s;
}
a:hover {
	filter: brightness(1.06);
}

p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
	line-height: 1.0;
}

:root {
    --purple: #924faa;
    --deep_purple: #6a1b9a;
    --light_puple: #b08cc7;
    --grad_purple: linear-gradient(90deg, #a951b1 0%, #9549c5 100%);
    --gray: #999999;
	  --white: #ffffff;
}

/* アニメーション -----------*/
.animated.fadeinup {
	animation: fadeinup .6s;
}
@keyframes fadeinup {
	0% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}
.animated.fadeinup.second {
	animation: fadeinup_2nd 1.2s;
}
@keyframes fadeinup_2nd {
	0% {opacity: 0; transform: translateY(30px);}
	50% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}
.animated.fadeinright {
	animation: fadeinright .6s;
}
@keyframes fadeinright {
	0% {opacity: 0; transform: translateX(30px);}
	100% {opacity: 1; transform: translateX(0);}
}
.animated.fadeinright.second {
	animation: fadeinright_2nd 1.2s;
}
@keyframes fadeinright_2nd {
	0% {opacity: 0; transform: translateX(30px);}
	50% {opacity: 0; transform: translateX(30px);}
	100% {opacity: 1; transform: translateX(0);}
}

[id] {
  scroll-margin-top: 100px;
}

/*==================================================================================
共通
==================================================================================*/
/* レイアウト */
.container {
	width: calc(100% - 100px);
	margin: auto;
}
.max2000 {
	max-width: 2000px;
	margin: auto;
}
.max1400 {
	max-width: 1400px;
	margin: auto;
}
.max1200 {
	max-width: 1200px;
	margin: auto;
}
.max960 {
	max-width: 960px;
	margin: auto;
}
.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.row.align_center {
	align-items: center;
}
.row.align_end {
	align-items: flex-end;
}
.row.just_center {
	justify-content: center;
}
.row.just_start {
	justify-content: flex-start;
}
.row.just_end {
	justify-content: flex-end;
}


/* 文字サイズ */
.font_12 {
	font-size: 12px;
}
.font_14 {
	font-size: 14px;
}
.font_16 {
	font-size: 16px;
}
.font_18 {
  font-size: 18px;
}
.font_20 {
	font-size: 20px;
}
.font_24 {
	font-size: 24px;
}
.font_25 {
	font-size: 25px;
}
.font_30 {
	font-size: 30px;
}
.font_34 {
	font-size: 34px;
}
.font_40 {
	font-size: 40px;
}
.font_50 {
	font-size: 50px;
}

h1 {
  font-size: 30px; 
  color: #333;
  font-weight: 600;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 0.01em;
}


/* 文字の太さ */
.medium {
  font-weight: 500;
}
.bold {
	font-weight: 700;
}

/* 文字列 */
.txt_center {
	text-align: center;
}
.txt_right {
	text-align: right;
}
.txt_left {
	text-align: left;
}
.line1 {
    line-height: 1;
}
.line1_4 {
    line-height: 1.4;
}
.line1_6 {
    line-height: 1.6;
}
.ls-005 {
  letter-spacing: 0.05em;
}
.ls-01 {
  letter-spacing: 0.1em;
}


/* 余白 */
.mt_20 {
  margin-top: 20px;
}
.mt_40 {
  margin-top: 40px;
}
.mt_100 {
  margin-top: 100px;
}

.mb_10 {
	margin-bottom: 10px;
}
.mb_20 {
	margin-bottom: 20px;
}
.mb_25 {
	margin-bottom: 25px;
}
.mb_40 {
	margin-bottom: 40px;
}
.mb_50 {
	margin-bottom: 50px;
}
.mb_60 {
	margin-bottom: 60px;
}
.mb_120 {
	margin-bottom: 120px;
}
.mb_200 {
	margin-bottom: 200px;
}

.mr_100 {
  margin-right: 100px;
}

.spacer {
  height: 1rem;
}

.tb_in {
  display: block !important;
}

.tb_sp_in {
  display: block;
}

/* 装飾 */
.img_round {
    border-radius: 40px 0 40px 40px;
    overflow: hidden;
}
.img_round_s {
    border-radius: 20px 0 20px 20px;
    overflow: hidden;
}
img.cover {
    height: 100%;
    object-fit: cover;
}
.border {
	border-bottom: 1px #8e8e8e solid;
}

/* 色 */
.white {
	color: #ffffff;
}
.gray {
	color: #999;
}
.red {
  color: red;
}
.grad-purple {
  color: var(--grad_purple);
}
.purple {
  color: #924faa;
}

/* アニメーション -----------*/
.animated.fadeinup {
	animation: fadeinup .6s;
}
@keyframes fadeinup {
	0% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}
.animated.fadeinup.second {
	animation: fadeinup_2nd 1.2s;
}
@keyframes fadeinup_2nd {
	0% {opacity: 0; transform: translateY(30px);}
	50% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}
.animated.fadeinright {
	animation: fadeinright .6s;
}
@keyframes fadeinright {
	0% {opacity: 0; transform: translateX(30px);}
	100% {opacity: 1; transform: translateX(0);}
}
.animated.fadeinright.second {
	animation: fadeinright_2nd 1.2s;
}
@keyframes fadeinright_2nd {
	0% {opacity: 0; transform: translateX(30px);}
	50% {opacity: 0; transform: translateX(30px);}
	100% {opacity: 1; transform: translateX(0);}
}

/*==================================================================================
共通タグ
==================================================================================*/

/*タイトル*/
.sm-title {
   font-size: 18px;
   line-height: 1.4;
}

.title {
  font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 60px;
	font-weight: 900;
  color: rgb(143, 35, 165);
}

.section-title {
  color: rgb(143, 35, 165);
  text-align: left;
  margin-bottom: 70px;
}

/*白いコンテナ*/
.cont_white {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  border-radius: 30px;
  padding: 50px;            
}

/*ボタン*/
.btn {
  position: relative;
  display: flex; /* ← flex を生かす */
  justify-content: center; /* ← テキストを中央に固定 */
  align-items: center;
  width: 140px;
  padding: 14px 20px 16px 20px;
  background: var(--grad_purple);
  font-size: 20px;
  border-radius: 30px;
  text-decoration: none;
  color: #fff;
  transition: box-shadow 0.3s ease;
  line-height: 1;
}

/* ENTRY（右矢印） */
.btn .arrow {
  position: absolute;
  right: 20px;
  top: 48%;
  transform: translateY(-50%);
}

/* テキストは中央寄せのままでOK */
.btn .text {
  margin: 0 auto;
  letter-spacing: 0.04em;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
}

.back_btn {
  position: relative;
  display: flex; /* ← flex を生かす */
  justify-content: center; /* ← テキストを中央に固定 */
  align-items: center;
  width: 120px;
  padding: 13px 16px;
  font-size: 20px;
  border-radius: 30px;
  text-decoration: none;
  border: #8f8e8e solid 2px;
  background-color: #fff;
  transition: box-shadow 0.3s ease;
  line-height: 1;
}

.back_btn .text {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  margin: 0 auto;
  color: #8f8e8e;
  letter-spacing: 0.04em;
}

/*基本文*/
.memo {
	color: #333;
	font-size: 18px;
	line-height: 1.9;
  margin: 10px 0;
}



/*==================================================================================
ヘッダー全体
==================================================================================*/
header {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #eeecec;
}

.header-row {
  display: flex;
  flex-wrap: nowrap;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 0px;
  justify-content: space-between;
  align-items: center; 
}

.header-brand {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.company_name {
  font-family: "Racing Sans One", sans-serif;
  font-size: 40px;
  display: inline-block;
}

.company_name a:hover {
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  padding-right: 3px;
}

.tb.sp {
  display: none;
}



/*==================================================================================
親メニュー
==================================================================================*/
nav.gnav > ul {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* 親メニューの li の間隔（最初以外） */
nav.gnav > ul > li:not(:first-child) {
  position: relative; /* サブメニュー用 */
}

/* 通常リンク（ボタン除く） */
nav.gnav > ul > li > a:not(.btn) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 600;
  padding: 12px 18px;
  color: #333;
  transition: all 0.3s ease;
  letter-spacing: 0.03em;
}

nav.gnav > ul > li > a:not(.btn):hover {
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

nav.gnav > ul > li > a:not(.btn) > span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 6px;
  display: block;
}

/* ボタン */
nav.gnav > ul > li > a.btn {
  margin-left: 15px;
}

/*==================================================================================
サブメニュー（事業内容）
==================================================================================*/
nav.gnav ul li.has-sub {
  position: relative;
}

nav.gnav ul li.has-sub > a {
  padding: 12px 18px;
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9998;
  min-width: 180px; /* 必要に応じて調整 */
}

/* hoverで表示 */
nav.gnav ul li.has-sub:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* サブメニューリスト */
.business-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* サブメニューリンク */
.business-sub li a {
  display: inline-block;
  width: auto;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  padding: 4px 0;
  position: relative;
}

.business-sub li a:hover {
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  transition: all 0.3s ease;
}

.gnavToggle {
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.gnavToggle span {
  display: block;
  height: 2px;
  background: #000;
}



/* ==============================
   PC用：hoverのみ
============================== */
@media screen and (min-width: 1101px) {
  .sub-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  nav.gnav ul li.has-sub:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}


/*==================================================================================
topイメージ
==================================================================================*/
#top_img {
  position: relative;
  background-image: url("../img/top_image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 95vh;
  width: 100%;
}

.top-inner {
  position: relative;
  width: calc(100% - 100px); 
  max-width: 1600px;     
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
}

.top_comment {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 70px;
  color: white;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

.top_subcomment {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  color: white;
  line-height: 1.6;
  letter-spacing: 0.09em;
}

.hero-text {
  position: absolute;
  bottom: 8%;
  text-align: left;
  color: #fff;
  width: 100%;
}


/*==================================================================================
top_NEWS
==================================================================================*/
#top_news {
  padding: 85px 0 80px 0;
  background-color: #f8f8f8;
}

#top_news .container {
  max-width: 1100px;
}

#top_news .cont_white {
  flex-direction: column;      /* 縦に積む */
  justify-content: center;     /* 縦方向の中央揃え */
  align-items: center;         /* 横方向の中央揃え */
  gap: 24px;                   /* NEWS一覧とMOREの間の余白 */    
}

.news-list {
  width: 100%;
  max-width: 900px;            /* ← 中央に収まる幅 */
  border-top: 1px solid #ccc;
}

.news-list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  line-height: 2.0;
}

.news-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  color: inherit;
  text-decoration: none;
}

.news-label {
  display: inline-block;
  padding: 3px 14px;
  margin-right: 15px;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  border: 1px solid  #924faa;
  border-radius: 999px; /* ← 丸で囲う */
  white-space: nowrap;   /* 要素内の テキストが折り返されるのを防ぐ */
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: 70px;
  flex-shrink: 0;   /* 要素幅そのものが縮むのを防ぐ */
}

.news-date {
  color: #999;
  width: 115px;
  flex-shrink: 0;    /* 要素幅そのものが縮むのを防ぐ */
  letter-spacing: 0.03em;
}

.news-text {
  color: #333;
  flex: 1;
  transition: color 0.25s ease;
}

.news-link:hover .news-text {
  color: #555; 
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.news-more {
  text-align: center;
  margin-top: 40px;
}

#top_news .btn-more {            
  align-items: center;
}


/*==================================================================================
フッター
==================================================================================*/
footer {
	background-color: #eeecec;
}

.footer-row {
  display: flex;
  flex-wrap: nowrap;
  max-width: 1600px;   /* ← header-row と同じ */
  margin: 0 auto;      /* ← 中央寄せ */
  align-items: flex-end;
  justify-content: space-between;
}

.footer-left {
  display: flex;
  align-items: flex-end;
}

footer .logo {
	width: 90px;
  margin-right: 30px;
}

footer .adress_1{
  margin-right: 30px;
}

footer ul.foot_nav {
  padding: 30px 0;
  max-width: 1600px;
  margin: 0 auto; /* ← これが必要 */
}

footer ul.foot_nav li {
	margin: 0 0 30px 30px;
}

footer ul.foot_nav li:first-child {
	margin: 0 0 30px 0;
}

footer ul.foot_nav li a {
	display: block;
  font-weight: 600;
  color: #333;
}

footer ul.other li {
	padding-right: 15px;
	margin-right: 15px;
	border-right: 1px #333 solid;
}

footer ul.other li:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: none;
}

footer ul.other li a {
	text-decoration: underline;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* ← 右寄せ */
}

.p-policy {
  font-size: 12px;
  padding-top: 5px;
  border-bottom: 1px solid #333;
}

footer ul.foot_nav li a:hover {
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.copyright {
  font-size: 12px;
  text-align: right;
  padding: 50px 0 20px 0;
  max-width: 1600px;     /* ← 追加 */
  margin: 0 auto;        /* ← 追加 */
}

.footer-right img {
  width: 50%;
}

/*==================================================================================
POLICYページ
==================================================================================*/
#policy {
  padding: 150px 0 80px 0;
  background-color: #f8f8f8;
}

#policy .container {
  max-width: 1100px;
}

#policy .cont_white {
  flex-direction: column;
  padding: 60px;
}

.policy_cont {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  width: 100%;
  gap: 30px;
}

.policy_title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.6;
}

.policy_comment {
  font-size: 17px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.policy_comment2 {
  font-size: 17px;
  margin-bottom: 20px;
  line-height: 1.6;
}

.policy_comment3 {
  font-size: 16px;
  line-height: 1.4;
  text-align: right;
  margin-bottom: 40px;
}

.policy_info {
  font-size: 17px;
  line-height: 1.6;
}

.policy1 {
  width: 75%;
}

.policy2 {
  width: 25%;
  margin-top: auto;
}

.policy2 img {
  width: 80%;
  margin-left: auto;
  text-align: right;
}

.pmark-cont {
  width: 200px;
  margin-left: 900px;
}


/*==================================================================================
TOP_BUSINESS
==================================================================================*/
#top_business {
  padding: 170px 0 100px 0;
  background-color: #f8f8f8;
}

#top_business .container {
  max-width: 1100px;
}

#top_business .cont_white {
  flex-direction: row; /* ← 横並びにする */
  justify-content: space-between;
  align-items: stretch; /* ← 左右の高さを揃える */
  gap: 24px;                   /* NEWS一覧とMOREの間の余白 */ 
  margin-bottom: 50px;   
}

.topwork_left {
	width: 47%;
}

.work_mainimg img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-left: auto;
}

/* 下の画像2枚の親を右寄せ＆幅統一 */
.sub_topwork_left {
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  width: 98%;          /* ← 上と同じ幅 */
}

/* 下の画像は親基準で50% */
.sub_topwork_left img {
  width: 50%;
  border-radius: 10px;
  display: block;
}

/* 右カラム（テキストエリア） */
.topwork_right {
  box-sizing: border-box;
  width: 48%;
  position: relative;
  display: flex; 
  flex-direction: column; 
  justify-content: center;
}

.inner-box {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;   /* inner-box を中央に */
}

.topwork_title {
  font-size: 30px;
  font-family: 'I-OTFゴシックオールドPro M{pm}', '游ゴシック Medium', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* MOREボタン */
#top_business .btn {
  margin-left: auto;  
  margin-top: 30px;
}

/*==================================================================================
NEWSページ
==================================================================================*/
#news {
  padding: 170px 0 100px 0;
  background-color: #f8f8f8;
}

#news .container {
  max-width: 1100px;
}

.news-date2 {
  color: #999;
  font-size: 17px;
  line-height: 1.7;
  margin-top: 5px;
}

.news_btn {
  margin: 0 auto;
  margin-top: 60px;
}


/*==================================================================================
BUSINESSページ
==================================================================================*/
#business {
  padding: 170px 0 100px 0;
  background-color: #f8f8f8;
}

#business .container {
  max-width: 1100px;
}

#business .row {
  justify-content: space-between;
  align-items: flex-start; /* ← 左右の高さを揃える */
  gap: 30px;
}

#doboku {
  margin-bottom: 80px;
  scroll-margin-top: 80px; /* 固定ヘッダーの高さに合わせる */
}

#it {
  margin-bottom: 80px;
  scroll-margin-top: 80px; /* 固定ヘッダーの高さに合わせる */
}

.slogan {
  position: relative;
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  padding: 0 3px 8px 3px;
  color: #333;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.slogan::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* 下線の太さ */
  background: rgb(143, 35, 165);
  border-radius: 2px;
  animation: underlineGrow 1.0s ease forwards;
}

@keyframes underlineGrow {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

#business .rec_box {
  padding: 80px;
}

.bus_subtitle {
  color: rgb(143, 35, 165);
  font-size: 22px;
  font-weight: 600;
}

.bus_maintitle {
  font-size: 30px;
  color: #333;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.05em;
  margin-top: 10px;
  line-height: 1.5;
}

.bus_english {
  font-size: 16px;
  color: #999999;
  margin-top: 3px;
}

.bus_left {
	margin-bottom: 60px;
}

.bus_left2 {
  margin-bottom: 0;
}

.bus_right {
  width: 45%;
  display: flex; 
}

.bus_right img {
  width: 90%;
  border-radius: 10px;
  margin-left: auto;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

.three-row {
  display: flex;
  align-items: stretch; 
}

#business .decorated-text {
  position: relative;
  font-size: 22px;
  padding-left: 20px; /* モチーフ分の余白 */
  line-height: 1.4;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

#business .decorated-text::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0.2em;              
  width: 7px;
  height: 1.08em;         
  background: linear-gradient(
    to bottom,
    #f3edf7 0%,
    #7a2c91 100%);
}

.business-name {
  position: relative;
  line-height: 1.4;
  font-size: 22px;
  color: #333;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.05em;
  margin-bottom: 0;
  padding-left: 25px; /* モチーフ分の余白 */
}

.business-name::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.col_left {
  width: 55%;
}

.bs-maincol {
  width: 100%;
}

.col_right {
  width: 40%;
  margin-top: 20px;
}

.col_right .slider img {
  width: 100%;
  height: auto;
  border-radius: 10px; /* 好みに応じて */
  display: block;
}

.work_main {
  grid-column: 1 / 3; /* 2列ぶち抜き */
  width: 100%;
  border-radius: 10px;
}

.work_sub1 {
  width: 100%;
  border-radius: 10px;
}

#doboku_1,#doboku_2,#doboku_3,#doboku_4,#doboku_5,#doboku_6,#doboku_7,#it_1,#it_2,#it_3,#it_4,#it_5,#it_6,#it7 {
  margin-bottom: 50px;
}

/* ===== mainスライダー ===== */

.bs-mainslider {
  max-width: 1100px;
  margin: 20px auto 10px auto;
}

.bs-mainslider .slick-slide {
  padding: 0 10px;
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.75;
  transform: scale(0.85);
}

.bs-mainslider .slick-center {
  opacity: 1;
  transform: scale(1);
}

.bs-mainslider img {
  width: 100%;
  border-radius: 15px;
  display: block;
}

.parent {
  text-align: right;  /* 親で右寄せ */
}

.moreLinkArrow {
  display: inline-block; /* 文字幅だけのリンク */
  width: auto;           /* 文字幅だけ */
  font-size: 15px;
  color: #333;
  text-decoration: none;
  padding-bottom: 9px;
  position: relative;
  transition: 0.3s ease;
}

.moretext {
  margin-right: 25px;
}

/* 下線 */
.moreLinkArrow::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 155px;
    height: 0.8px;
    background: currentColor;
}

/* 矢印 */
.moreLinkArrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 100%;          /* 文字の右端に沿わせる */
    width: 10px;          /* 矢印の横線の長さ */
    height: 0.8px;
    background: currentColor;
    transform: rotate(-150deg);
    transform-origin: left center;
}

.moreLinkArrow:hover {
  color: #7a2c91;
}

.bus_heading {
  font-size: 20px;
  font-family: 'I-OTFゴシックオールドPro M{pm}', '游ゴシック Medium', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  font-weight: 900;
  letter-spacing: 0.05em;
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}

.bus_heading::before {
  content: "";
  width: 7px;
  height: 7px;
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

#business_nav {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 50px;
}

.business_nav_row {
  display: flex;
  gap: 50px;
}

.bsnav_col {
  display: flex;
  flex-direction: column;
}

.bsnav_col img{
  border-radius: 10px;
}

.bsnav_item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0 10px 0;
  position: relative;        /* ← 必須 */
  text-decoration: none;
  color: inherit;
}

/* 下線 */
.bsnav_item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #bbbaba;
}

.bsnav_text {
  color: #333;
  font-size: 16px;
  white-space: nowrap;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.bsnav_text:hover {
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  transition: all 0.3s ease;
}

/* 丸ボタン */
#business_nav .circle_btn {
  flex: 0 0 30px;   /* ← 伸びない・縮まない */
  width: 30px;
  height: 30px;
  display: flex;             
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */
}

#business_nav .circle_btn:hover {
  filter: brightness(1.1);
}

#business_nav .circle_btn svg {
  width: 8px;
  height: auto;
  display: block;
}



/*============================================================================
under
==================================================================================*/
#under {
  margin: 100px 0 40px 0;
}

#under .section-title {
  margin-bottom: 0;
}

#under .title {
  color: white;
  font-size: 29px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.03em;
}

#business #under .container {
  width: 100%;
}

#company #under .container {
  width: 100%;
}

#access #under .container {
  width: 100%;
}

.rec_btn {
  align-items: center;
  padding: 30px 50px;
  border-radius: 40px; 
  background-color: #d0aedb;
  color: #ffffff;
  box-sizing: border-box;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.recruit-inner {
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.rec_copy {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 5px;
  letter-spacing: 0.01em;
  color: white;
}

.recbtn_row {
  display: flex;
  align-items: center; /* ← これで高さが揃わなくなる */
  gap: 25px;
}

.white_btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 145px;
  padding: 14px 18px;
  background: white;
  font-size: 18px;
  border-radius: 30px;
  text-decoration: none;
  transition: box-shadow 0.3s ease;
  line-height: 1;
  margin-left: auto;
  box-sizing: border-box;
}

.white_btn .text {
  flex: 1;
  text-align: center;
  color: var(--purple);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: "Rubik", sans-serif;
}

.white_btn .arrow {
  position: absolute;
  right: 20px;
  top: 49%;
  transform: translateY(-50%);
  display: flex;         /* SVGの高さズレ防止 */
  flex-shrink: 0;        /* 絶対に潰さない */
}

#under.white_btn svg {
  width: 8px;
  height: auto;
  display: block;
}

.white_btn .arrow svg polyline {
  stroke: var(--purple);
  stroke-width: 2.8;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}


.icon-arrow {
  width: 0.5em;
  height: auto;
  stroke-width: 1.7; /* ← 追加 */
}

/*============================================================================
COMPANYページ
==================================================================================*/
#company {
  padding: 170px 0 80px 0;
  background-color: #f8f8f8;
}

#company .container {
  max-width: 1100px;
}

.decorated-text {
  position: relative;
  font-size: 26px;
  font-weight: 600;
  color: #333;
  padding-left: 28px; /* モチーフ分の余白 */
  line-height: 1.4;
  margin-bottom: 20px;
}

.decorated-text::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.15em;
  width: 9px;
  height: 1.15em;
  background: linear-gradient(
    to bottom,
    #f3edf7 0%,
    #7a2c91 100%
  );
}

.main_text {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  line-height: 1.8;
  padding: 0 30px 10px 30px;
}

.sub_text {
  font-size: 18px;
  padding: 0 30px;
  line-height: 1.9;
  color: #333;
}

.name {
  margin-top: 40px;
  font-size: 18px;
  padding: 0 30px;
  line-height: 1.7;
  color: #333;
  text-align: right;
  font-weight: 600;
}

#company_nav {
  max-width: 1100px;
  margin: 0 auto;
}

#company_nav h3 {
  font-size: 23px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #333;
}

.company_nav_row {
  display: flex;
  gap: 45px;
}

.cpnav_item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;  /* ← これ入れないと崩れる */
  position: relative;
  padding-bottom: 10px;
}

/* 下線 */
.cpnav_item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #bbbaba;
}

.cpnav_text {
  font-size: 18px;
  white-space: normal;   
  min-width: 0;      
  font-weight: 500;
  color: #333;
}

.cpnav_text:hover {
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  transition: all 0.3s ease;
}

/* 丸ボタン */
#company_nav .circle_btn {
  flex: 0 0 33px;   /* ← 伸びない・縮まない */
  width: 33px;
  height: 33px;
  display: flex;             
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */
}

#company_nav .circle_btn:hover {
  filter: brightness(1.1);
}

#company_nav .circle_btn svg {
  width: 8px;
  height: auto;
  display: block;
}

#about {
  margin: 0 0 100px 0;
}

#message {
  margin: 0 0 100px 0;
}

/* SUMMARY */
#summary {
  margin: 0 0 100px 0;
}

.cp-table {
	width: 100%;
	border-top: 1px #8e8e8e dashed!important;
  margin: 30px 0 0 0;
}

.cp-table tr {
	border-bottom: 1px #8e8e8e dashed;
}

.cp-table th {
	width: 160px;
	padding: 30px;
	text-align: left;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.cp-table td {
	padding: 30px 30px 30px 0;
}

.cp-table p {
	font-size: 18px;
	line-height: 1.7;
}

.cp-table a {
  font-size: 12px;
  line-height: 1.2;
  border-bottom: 1px solid;
  display: inline-block;
}

/*============================================================================
ACCESSページ
==================================================================================*/
#access {
  padding: 170px 0 80px 0;
  background-color: #f8f8f8;
}

#access .container {
  max-width: 1100px;
}

.adress_text {
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 20px;
}

#access ul {
	border-left: 1px #8e8e8e dashed;
}

#access ul li {
	width: calc(100% / 3);
	box-sizing: border-box;
	padding: 0 30px;
	border-right: 1px #8e8e8e dashed;
}

#access .row {
  margin-top: 40px;
  width: 100%;
}

#map {
  margin: 0 0 80px 0;
}

#map .row {
  display: flex;
  align-items: stretch;
}

#map .row li {
  display: flex;
  flex-direction: column;
}

#map .row li iframe {
  margin-top: auto;
}

.adress {
  position: relative;
  font-weight: 600;
  color: #333;
  font-size: 22px;
  margin-bottom: 20px;
  line-height: 1.4;
  padding-left: 25px; /* モチーフ分の余白 */
  letter-spacing: 0.05em;
}

.adress::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/*==================================================================================
TOP_RECRUIT
==================================================================================*/
#top_recruit {
  padding: 170px 0 100px 0;
  background-color: #f8f8f8;
}

#top_recruit .container {
  max-width: 1100px;
}

#top_recruit .btn {
  margin-top: 30px;
}

.toprec_left {
  width: 55%;
}

.toprec_right {
  width: 45%; 
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* ジグザグ4枚を横一列に */
.zigzag-row {
  display: flex;
  gap: 16px;
  width: 100%;
  margin: 70px 0;
  flex-wrap: nowrap;
  align-items: flex-start; 
  justify-content: flex-end; 
}

/* 画像の形（縦長・角丸） */
.zigzag-box {
  width: 25%;
  aspect-ratio: 1 / 2;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  position: relative;
}

/* 画像の基本 */
.zigzag-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2番目・4番目だけ「下揃え」にする */
.zigzag-box:nth-child(even) {
  align-self: flex-end; /* ← これが本命！ */
  margin-top: 0;
  margin-bottom: 0;
}

.toprec_title {
  font-size: 25px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-bottom: 10px;
}

#recruit .row .memo {
  margin: 10px 0 30px 0;
}

/*============================================================================
 RECRUITページ
==================================================================================*/
#recruit {
  padding: 170px 0 80px 0;
  background-color: #f8f8f8;
}

#recruit .container {
  max-width: 1100px;
}

#top_career {
  margin: 45px 0 60px 0;
}

.heading-line {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 25px;
}

.heading-line::before,
.heading-line::after {
  content: "";
  flex: 1;
  border-top: 2px solid #333; /* 線の色 */
}

.heading-line span {
  margin: 0 30px; /* 線と文字の間の余白 */
  font-size: 28px;
  color: #333; /* 文字色 */
  font-weight: bold;
}

/* ボックス内タイトル部分 */
.info-btn__title {
  font-size: 29px;
  font-weight: 600;
  width: 350px;
  position: relative;
  padding-left: 60px;   /* 左アイコン分の余白 */
}

/* 左側アイコン（タイトルテキストの ::before） */
.info-btn__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ボックス */
.btn_recruit {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr); /* 左:タイトル, 右:説明 */
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  height: 110px;
  width: 100%;
  padding: 20px 100px;  /* 右側の丸ボタン分を多めに */
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
  background: #fff;
  color: #333;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  overflow: visible;
  border-radius: 20px;
}

/* ボックスホバー時 */
.btn_recruit:hover {
	background: var(--deep_purple);
  color: #FFFFFF;
  opacity: 0.5;/* ホバー時の軽い演出 */
}

/* 右アイコン */
.btn_recruit::before,
.btn_recruit::after {
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--deep_purple);
  position: absolute;
  top: 50%;
  right: 40px;
	transform-origin: center;
	transition: all .3s;
  transform: translateY(-50%);
}

.btn_recruit::after {
  width: 5px;
  height: 5px;
  background: white;
  right: 55px;
}

/* ホバー時の右アイコン */
.btn_recruit:hover::before {
	background: #FFFFFF;
	transform: translateY(-50%) scale(1.2);
  animation: btn_circle2 .3s;
}

/* 土木コンサルタント(キャリア)のアイコン */
.icon-doboku .info-btn__title::before {
  background-image: url("../img/doboku_1.png");
}

/* ITサービスのアイコン(キャリア)*/
.icon-it .info-btn__title::before {
  background-image: url("../img/it_1.png");
}

/* 総務・事務のアイコン(キャリア)*/
.icon-jimu .info-btn__title::before {
  background-image: url("../img/jimu_1.png");
}

/* ホバー時の業務アイコン*/
.btn_recruit:hover .info-btn__title::before {
  filter: brightness(0) invert(1);
}



/* 新卒第二新卒ボックス */
.btn_recruit2 {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr); /* 左:タイトル, 右:説明 */
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  height: 110px;
  width: 100%;
  padding: 20px 100px;  /* 右側の丸ボタン分を多めに */
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
  background: #fff;
  color: #333;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  overflow: visible;
  border-radius: 20px;
}

/* ボックスホバー時 */
.btn_recruit2:hover {
  background: var(--light_puple);
  color: #FFFFFF;
  opacity: 0.5;/* ホバー時の軽い演出 */
}

/* 右アイコン */
.btn_recruit2::before,
.btn_recruit2::after {
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--light_puple);
  position: absolute;
  top: 50%;
  right: 40px;
	transform-origin: center;
	transition: all .3s;
  transform: translateY(-50%);
}

.btn_recruit2::after {
  width: 5px;
  height: 5px;
  background: white;
  right: 55px;
}

/* ホバー時の右アイコン */
.btn_recruit2:hover::before {
	background: #FFFFFF;
	transform: translateY(-50%) scale(1.2);
  animation: btn_circle2 .3s;
}

/* 土木コンサルタント(キャリア)のアイコン */
.icon-doboku2 .info-btn__title::before {
  background-image: url("../img/doboku_2.png");
}

/* ITサービスのアイコン(キャリア)*/
.icon-it2 .info-btn__title::before {
  background-image: url("../img/it_2.png");
}

/* 総務・事務のアイコン(キャリア)*/
.icon-jimu2 .info-btn__title::before {
  background-image: url("../img/jimu_2.png");
}

/* ホバー時の業務アイコン*/
.btn_recruit2:hover .info-btn__title::before {
  filter: brightness(0) invert(1);
}

@keyframes btn_circle2 {
	0% {opacity: 0; transform: translateY(-50%) scale(0);}
	100% {opacity: 1; transform: translateY(-50%) scale(1.2);}
}
.btn_recruit:hover::after {
	background: url("../img/icon_arrow1.png") center center / contain no-repeat;
	transition: none;
  transform: translateY(-50%) scale(2.5);
	animation: btn_arrow .6s;
}
.btn_recruit2:hover::after {
	background: url("../img/icon_arrow2.png") center center / contain no-repeat !important;
	transition: none;
  transform: translateY(-50%) scale(2.5);
	animation: btn_arrow .6s;
}


/*============================================================================
 RECRUITページ2
==================================================================================*/
#sec_recruit {
  padding: 170px 0 80px 0;
  background-color: #f8f8f8;
}

#sec_recruit .container {
  max-width: 1100px;
}


.rec_title {
  width: 30%;
}

.accordion-title {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 600;
  background: rgb(143, 35, 165);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accordion {
  width: 260px;
}

.accordion:not([open]) {
  margin-bottom: 7px;
}

.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 1em;
  border-left: 5px solid rgb(143, 35, 165);
  background-color: #ffffff;
  color: #333;
  font-weight: 600;
  cursor: pointer;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::before,
.accordion summary::after {
  width: 3px;
  height: .9em;
  border-radius: 5px;
  background-color: #cfcfcf;
  content: '';
}

.accordion summary::before {
  position: absolute;
  right: 2em;
  rotate: 90deg;
}

.accordion summary::after {
  transition: rotate .3s;
}

.accordion[open] summary::after {
  rotate: 90deg;
}

.accordion-body {
  background-color: #ffffff;   /* ← 追加 */
  margin: 0 0 7px 0;
  padding: 0 2em 0.09em;
  transform: translateY(-10px);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}

.accordion[open] .accordion-body {
  transform: none;
  opacity: 1;
}

.accordion-body a {
  display: block;
  padding: 1em 0em 1em 0em;
  color: #333;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.accordion-body a:hover {
  color: var(--purple);
}

.rec_box {
  margin-bottom: 50px;
  width: 100%;
  padding: 40px;  
  box-sizing: border-box;
  background: #fff;
  color: #333;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  overflow: visible;
  border-radius: 20px;
}

.rec_cont {
  width: 67%;
}

.cont_row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info_box {
  width: 50%;
}

.box_text1 th {
	width: 120px;
	font-weight: 500;
	letter-spacing: 0.05em;
  padding: 5px 0;
}

.box_text1 td {
  padding: 5px 0;
}

.rec_comment {
  font-size: 16px;
  margin: 20px 0;
  line-height: 1.6;
}

.rec_maintitle {
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 10px;
  margin-bottom: 20px;
  line-height: 1.4;
  border-bottom: 2px #333 solid;
}

/* 左側ラベルの統一サイズ */
.label {
  --grad_purple: linear-gradient(90deg,#962097 0%,#6a1b9a 100%);
  position: relative;
  width: 105px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 20px;
  font-weight: 500;
  color: transparent;
  background: var(--grad_purple);
  -webkit-background-clip: text;
}

.label::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: var(--grad_purple);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.breadcrumb {
  padding-bottom: 50px;
}

.breadcrumb ol {
  display: flex;
  list-style: none;
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.1em;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}


.breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2.5px solid #6a1b9a;   /* 紫 */
  border-right: 2.5px solid #6a1b9a;
  transform: rotate(45deg);
  margin: 0 8px;
}

.breadcrumb a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
}

.breadcrumb ol li:not(:first-child) a {
  padding-left: 8px;
}


.breadcrumb li[aria-current="page"] a {
  color: #929090;
  font-weight: 500;
  pointer-events: none; /* クリック不可にしたいなら */
}

.info_row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.box_img {
  width: 45%;
  height: auto;
}

.circle_btn {
  position: relative;           
  display: flex;               
  width: 60px;
  height: 60px;
  background: var(--grad_purple);
  font-size: 20px;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  transition: box-shadow 0.3s ease;
  line-height: 1;
  margin-left: auto;
}

.circle_btn .arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#fresh_doboku .rec_box,
#fresh_it .rec_box,
#career_doboku .rec_box,
#career_it .rec_box {
  background: none;
  box-shadow: none;
}

/*============================================================================
 RECRUITページ3
==================================================================================*/

#kyujin .rec_box {
  padding: 80px;
}

.kyujin_title {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 30px;
  padding-left: 20px;
  text-align: left;
  position: relative;
}

.kyujin_title::before {
  content: "";
  width: 7px;
  height: 7px;
  background: linear-gradient(90deg, #962097 0%, #6a1b9a 100%);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.table_recruit {
  width: 100%;
  border-top: 1px #8e8e8e dashed
}

.table_recruit p{
  font-size: 17px;
  line-height: 1.9;
  font-weight: 500;
}

.table_recruit th {
  font-size: 17px;
  line-height: 1.9;
  width: 25%;
  white-space: nowrap;
  background-color: #f6f0f8;
  padding: 40px;
  text-align: left;
  border-bottom: 1px #8e8e8e dashed;
  font-weight: 600;
}

.table_recruit td {
  font-size: 17px;
  text-align: left;
  line-height: 1.9;
  padding: 40px;
  font-weight: 500;
  border-bottom: 1px #8e8e8e dashed;
}

.table_recruit ul li::before {
  content: "・";
}

.btn_scale {
  transform: scale(1.1);       
  transform-origin: center;     
  display: inline-block;       
}

.btn_row {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
}




@media screen and (max-width: 1500px) {
/*============================================================================
共通
==================================================================================*/
.font_10 {
  font-size: 8px;
}
.font_14 {
  font-size: 13px;
}
.font_18 {
  font-size: 16px;
}
.font_20 {
  font-size: 18px;
}
.font_25 {
  font-size: 18px;
}
.font_34 {
  font-size: 26px;
}
.font_40 {
  font-size: 30px;
}


.line1_6 {
  line-height: 1.5;
}
.mb_50 {
  margin-bottom: 40px;
}
.mb_60 {
  margin-bottom: 25px;
}
.mr_100 {
  margin-right: 50px;
}

h1 {
  font-size: 26px;
  line-height: 1.5;
}

.btn {
  font-size: 18px;
  width: 140px;
  padding: 14px 10px 14px 10px;
}


.btn_scale {
  transform: scale(1.03);
}

.btn .arrow svg {
  width: 9px;
}

.container {
  width: calc(100% - 100px);
}

.section-title {
  margin-bottom: 50px;
}

.memo {
  font-size: 17px;
}

/*============================================================================
TOPページ
==================================================================================*/
.top_comment {
  font-size: 53px;
}

.top_subcomment {
  font-size: 15px;
}

/*============================================================================
共通ページ（リクルートボタン）
==================================================================================*/
.rec_btn {
  padding: 28px 50px;
}

#under .container {
  width: 100%;
}

.recbtn_row {
  display: block;
}

.rec_copy {
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0;
}

.white_btn {
  width: 140px;
  padding: 12px 14px;
  font-size: 17px;
}

.white_btn .arrow svg {
  width: 9px;
}


/*============================================================================
ヘッダー
==================================================================================*/
.company_name {
  font-size: 35px;
}

.header-row {
  padding: 20px 0px;
}

/* hover無効 */
  .has-sub:hover .sub-menu {
  display: none;
}

/* 初期は閉じる */
.has-sub .sub-menu {
  display: none;
}

/* 開いた状態 */
.has-sub.is-open .sub-menu {
  display: block;
}

  /* ハンバーガーアイコン */
  .tb.sp {
    display: flex;
    position: relative;
    z-index: 10000;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
    height: 22px;  /* 通常の高さ */
    gap: 6px;      /* spanの間隔 */
  }

  .tb.sp.is-open {
    height: 17px;  /* 開いたときの全体高さ */
    gap: 6px;      /* spanの間隔を少し狭く */
  }

  .tb.sp span {
    display: block;
    height: 2px;
    background: #000;
    transition: all 0.3s ease; /* 追加 */
  }

/* ハンバーガー開いたとき（×にする） */
  .tb.sp.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .tb.sp.is-open span:nth-child(2) {
    opacity: 0;
  }

  .tb.sp.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* SPメニュー全体 */
  nav.gnav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 9998;
  }

  nav.gnav.is-open {
    transform: translateX(0);
  }

  nav.gnav ul {
    display: flex;
    flex-direction: column;
    align-items: center;  /* 中央揃え */
    margin-top: 80px;
    width: 100%;
  }

  nav.gnav ul li {
    width: 100%;
    text-align: center;
  }

  nav.gnav ul li a {
    display: block;
    width: 90%;
    margin: 10px auto;   /* 中央寄せ */
    text-align: center;
    padding: 14px 0 16px 0;
  }

  /* ボタンも中央 */
  nav.gnav ul li a.btn {
    margin: 20px auto 0 auto;
    width: 170px;
  }

  .business-sub {
    margin: 0 !important;
    gap: 0 !important;
  }

  /* サブメニュー */
  nav.gnav ul li.has-sub .sub-menu {
    position: static;        /* 親の下に表示 */
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    width: 40%;
    margin: 0 auto;          /* 中央寄せ */
    text-align: center;
    transition: opacity 0.25s ease;
    background-color: #fff;
    box-shadow: none;
  }

  nav.gnav ul li.has-sub.is-open .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none !important;
    padding: 0 !important;
  }

  nav.gnav ul li.has-sub .sub-menu li a {
    display: block;
    width: 100%;
    padding: 5px 0;
  }


/*============================================================================
フッター
==================================================================================*/
footer ul.foot_nav {
 padding: 30px 0 50px 0;
}

footer ul.foot_nav li {
  margin: 0 0 20px 20px;
}

footer ul.foot_nav li a {
  font-weight: 500;
}

footer ul.foot_nav li:first-child {
  margin: 0;
}

footer .logo {
  width: 55px;
  margin-right: 15px;
} 

footer .adress_1 {
  margin-right: 15px;
}

.footer-right img {
  width: 35%;
}

.p-policy {
  font-size: 10px;
}

.copyright {
  font-size: 11px;
  padding: 30px 0 20px 0;
  max-width: 1600px;
}


/*============================================================================
TOP_news
==================================================================================*/
#top_news {
  padding: 70px 0 70px 0;
}

#top_news .container {
  max-width: 900px;
}

.cont_white {
  padding: 40px 60px;
}

.news-date {
  font-size: 17px;
}

.news-text {
  font-size: 17px;
}

.news-link {
  padding: 15px 0;
}

/*============================================================================
news
==================================================================================*/
#news .container {
  max-width: 900px;
}


/*==================================================================================
POLICYページ
==================================================================================*/
#policy {
  padding: 140px 0 70px 0;
}

#policy .container {
  max-width: 900px;
}

.policy_title {
  font-size: 25px;
}

.policy2 {
  margin-top: auto;
}


/*============================================================================
top_business
==================================================================================*/
#top_business {
  padding: 140px 0 70px 0;
}

#top_business .container {
  max-width: 900px;
}

#top_business .container {
  max-width: 900px;
}

#top_business .cont_white {
  padding: 50px;
}


/*============================================================================
BUSINESS
==================================================================================*/

#business .rec_box {
  padding: 50px;
}

#business .container {
  max-width: 900px;
}

.bus_subtitle {
  font-size: 20px;
}

.bus_maintitle {
  font-size: 25px;
  margin-top: 6px;
}

.slogan {
  font-size: 19px;
}

.bus_left {
  margin-bottom: 55px;
}

.col_left {
  width: 100%;
}

#business .row {
  gap: 0px;
}

.col_right {
  width: 100%;
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央（高さがある場合） */
}

.col_right {
  display: flex;
  justify-content: center;
}

.col_right .slider {
  width: 100%;
  text-align: center;
}

.col_right .slider img {
  width: 70%;  
  height: auto;
  margin: 0 auto;
}

.col_right .slick-slide {
  text-align: center;
}

#business .decorated-text {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 0;
}

#business .decorated-text::before {
  top: 0.15em;
  width: 7px;
  height: 1.05em;
}

#business_nav {
  padding-top: 30px;
}

.bsnav_text {
  font-size: 16px;
}

#business_nav .circle_btn {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

#business_nav .circle_btn svg {
  width: 6px;
}

/*============================================================================
COMPANY
==================================================================================*/

.decorated-text {
  font-size: 23px;
}

#company .container {
  max-width: 900px;
}

.main_text {
  padding: 0 0 10px 25px;
  font-size: 20px;
}

.sub_text {
  font-size: 17px;
  padding-left: 25px;
}

#about {
  margin: 0 0 60px 0;
}

#message {
  margin: 0 0 60px 0;
}

.name {
  margin-top: 20px;
  font-size: 17px;
}

#summary {
  margin: 0 0 60px 0;
}

.cp-table p {
  font-size: 17px;
}

.cp-table th {
  padding: 20px;
}

.cp-table td {
  padding: 20px 20px 20px 0;
}

#company_nav h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

.cpnav_text {
  font-size: 15px;
  line-height: 1.5;
}

#company_nav .circle_btn {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

#company_nav .circle_btn svg {
  width: 7px;
}

/*============================================================================
ACCESS
==================================================================================*/
#access .container {
  max-width: 900px;
}

#access .row {
  margin-top: 25px;
}

.adress {
  font-size: 19px;
  margin-bottom: 13px;
  padding-left: 20px;
}

.adress::before {
  width: 5px;
  height: 5px;
  top: 50%;
}

/*============================================================================
REECRUIT
==================================================================================*/
#recruit .container {
  max-width: 900px;
}

.toprec_title{
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 0;
}

#recruit .row {
  display: flex;
  flex-direction: column;
}

.toprec_left {
  width: 100%;
  order: 1;
}

#recruit .btn {
  order: 2;
  margin-left: auto;
  margin-right: 0;

}

.toprec_right {
  order: 3;
  width: 100%;
  display: flex;
  justify-content: center;
}

.zigzag-row {
  display: flex;
  flex-wrap: wrap;              
  justify-content: center;     
  gap: 30px;
  width: 100%;
  margin: 30px 0 0 0;
}

.zigzag-box {
  width: 130px;
  aspect-ratio: 1 / 2;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* ジグザグ（2列用） */
.zigzag-box:nth-child(even) {
  margin-top: 50px;          
}


/*============================================================================
REECRUIT2
==================================================================================*/
#top_recruit .container {
  max-width: 900px;
}

#sec_recruit .container {
  max-width: 900px;
}

#top_career {
  margin: 30px 0 45px 0;
}

.btn_recruit {
  gap: 16px;
  margin-bottom: 15px;
  height: 100px;
  padding: 15px 50px;
}

.info-btn__title {
  font-size: 24px;
  width: 220px;
  padding-left: 45px;
}

.info-btn__title::before {
  width: 35px;
  height: 35px;
}

.btn_recruit::before {
  width: 32px;
  height: 32px;
}

.btn_recruit::after {
  width: 3.6px;
  height: 3.6px;
  right: 54px;
}

.btn_recruit2 {
  gap: 16px;
  height: 100px;
  margin-bottom: 15px;
  padding: 15px 50px;
}


.btn_recruit2::before {
  width: 32px;
  height: 32px;
}

.btn_recruit2::after {
  width: 3.6px;
  height: 3.6px;
  right: 54px;
}

.btn_recruit:hover::after {
  transform: translateY(-50%) scale(2.4);
}

.btn_recruit2:hover::after {
  transform: translateY(-50%) scale(2.4);
}


/*============================================================================
REECRUIT3
==================================================================================*/
.rec_title {
  width: 100%;
  margin-bottom: 40px;
}

.accordion {
    width: 272px;
}

.accordion-wrap {
  display: flex;
  gap: 30px;
}

.accordion-title {
  font-size: 22px;
}

.accordion {
  width: 260px;
}

.accordion:not([open]) {
  margin-bottom: 7px;
}


.accordion summary {
  padding: 1em;
  font-size: 15px;
}

.accordion summary::before {
  right: 1em;
}

.accordion-body {
  padding: 0.2em 0 0.2em 1.2em;
}

.accordion-body a {
  padding: 0.8em 1.2em 1em 0em;
  font-size: 14px;
}

.rec_cont {
  width: 100%;
}

.rec_maintitle {
  font-weight: 600;
  padding-bottom: 5px;
  margin-bottom: 20px;
  border-bottom: 2px #333 solid;
}

.circle_btn {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

/*============================================================================
REECRUIT4
==================================================================================*/
.kyujin_title {
    font-size: 22px;
}

.table_recruit th {
    font-size: 14px;
    width: 20%;
    padding: 30px;
}

.table_recruit td {
    font-size: 15px;
    padding: 30px;
}

.table_recruit p {
    font-size: 15px;
}

.back_btn {
  font-size: 18px;
  border: #8f8e8e solid 2px;
  padding: 11px 9px;
}

}

@media screen and (max-width: 950px) {
/*==================================================================================
TOP_BUSINESS
==================================================================================*/
#top_business .row {
  flex-direction: column-reverse;
  gap: 30px;
}

.bus_maintitle {
  font-size: 28px;
  margin-top: 8px;
}

.topwork_left {
	width: 92%;
  margin: 0 auto;
}

/* 下の画像2枚の親を右寄せ＆幅統一 */
.sub_topwork_left {
  display: flex;
  gap: 10px;
  width: 98%;          /* ← 上と同じ幅 */
}

/* 下の画像は親基準で50% */
.sub_topwork_left img {
  width: 50%;
  border-radius: 10px;
  display: block;
}

/* 右カラム（テキストエリア） */
.topwork_right {
  width: 100%;
  position: relative;
  display: flex; 
  flex-direction: column; 
  justify-content: center;
}

.inner-box {
  width: 100%;
  max-width: 100%;
  margin: 0 ;  
}

/*============================================================================
under
==================================================================================*/
#under .container {
  width: 100% !important;
}

/*============================================================================
REECRUIT4
==================================================================================*/
#kyujin .rec_box {
  padding: 60px;
}

.table_recruit th {
  padding: 40px 30px 40px 20px;
}

.table_recruit td {
  padding: 40px 30px 40px 20px;
}

.btn_row {
  gap: 20px;
}


.btn_row .btn .arrow svg {
  width: 8px;
}

}


@media screen and (max-width: 830px) {
/*============================================================================
共通
==================================================================================*/
.font_10 {
  font-size: 5px;
}
.font_14 {
  font-size: 12px;
}

.font_18 {
  font-size: 15px;
}
.font_20 {
  font-size: 13px;
}
.font_25 {
  font-size: 16px;
}
.font_34 {
  font-size: 25px;
}
.line1_6 {
  line-height: 1.4;
}

.mb_40 {
  margin-bottom: 20px;
}
.mb_60 {
  margin-bottom: 15px;
}
.mr_100 {
  margin-right: 15px;
}

h1 {
  font-size: 27px;
}

.title {
  font-size: 53px;
}

.sm-title {
 font-size: 16px;
}

.btn {
  font-size: 17px;
  width: 12px;
  padding: 12px 10px 13px 10px;
}

.container {
  width: calc(100% - 50px);
}

.section-title {
  margin-bottom: 50px;
}

/*============================================================================
TOPページ
==================================================================================*/
#top_img {
  height: 60vh;
}

.top-inner {
  width: calc(100% - 50px);
}

.top_comment {
  font-size: 43px;
  margin-bottom: 15px;
}

.top_subcomment {
  font-size: 13px;
}

/*============================================================================
under
==================================================================================*/
.rec_btn {
  padding: 25px 35px;
}

.recbtn_row {
  display: block;
}

.rec_copy {
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0;
}

.white_btn {
  width: 140px;
  padding: 12px 0px;
  font-size: 16px;
}

.white_btn .arrow svg {
  width: 7px;
}


/*============================================================================
ヘッダー
==================================================================================*/
.company_name {
  font-size: 30px;
}

/* ハンバーガーアイコン */
.tb.sp {
  height: 20px;
  gap: 0px;     
}

.gnavToggle {
  width: 30px;
}

nav.gnav ul li.has-sub .sub-menu li a {
  padding: 0;
}

nav.gnav ul li.has-sub > a {
  padding: 5px 0;
}

nav.gnav ul li a.btn {
  margin: 10px auto 0 auto;
  width: 160px;
}

/*============================================================================
フッター
==================================================================================*/
  /* 左右を縦並びに */
  .footer-row {
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding-bottom: 30px;
  }

  footer ul.foot_nav {
    padding: 30px 0 30px 0;
} 

  .footer-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  footer .logo {
    margin: 0 0 20px 0;
  }

  footer .adress_1,
  footer .adress_2 {
    margin: 0 0 20px 0;
  }

  .footer-right {
    align-items: center;
    text-align: center;
  }

  .footer-right img {
    width: 0px; /* Pマーク小さめに */
  }

  .copyright {
    text-align: center;
    padding: 30px 0 20px 0;
  }

/*============================================================================
TOP_news
==================================================================================*/
#top_news {
  padding: 40px 0 40px 0;
}

#top_news .container {
  width: calc(100% - 130px);
}

.cont_white {
  padding: 40px;
}

.news-label {
  font-size: 14px;
}

.news-date {
  width: 105px;
}

.news-text {
  font-size: 16px;
}

.news-link {
  padding: 15px 0;
  gap: 0;
}

/*============================================================================
POLICY
==================================================================================*/
#policy {
  padding: 110px 0 70px 0;
}

#policy .container {
  width: calc(100% - 130px);
}

#policy .cont_white {
  padding: 40px;
}

.policy_title {
  font-size: 22px;
}

.policy_comment {
  font-size: 16px;
  line-height: 1.6;
}

.policy_comment2 {
  font-size: 16px;
}


.policy_comment3 {
  font-size: 15px;
}

.policy_info {
  font-size: 16px;
}


/*============================================================================
top_business
==================================================================================*/
#top_business {
  padding: 110px 0 70px 0;
}

.bus_maintitle {
  font-size: 26px;
}

#top_business .container {
  width: calc(100% - 130px);
}

#top_business .cont_white {
  padding: 40px;
}

/*============================================================================
NEWS
==================================================================================*/
#news {
  padding: 110px 0 70px 0;
}

#news .container {
  width: calc(100% - 130px);
}


/*============================================================================
BUSINESS
==================================================================================*/
#business {
  padding: 110px 0 70px 0;
}

#business .container {
  width: calc(100% - 130px);
}

#business .rec_box {
  padding: 40px;
}

.topwork_left {
  width: 100%;
}

.memo {
  font-size: 16px;
  margin: 10px 0;
}

.bus_left {
  margin-bottom: 40px;
}

#business .decorated-text::before {
  top: 0.15em;
  width: 6px;
}

#business_nav {
  padding-top: 30px;
  max-width: 460px;
}

.bsnav_text {
  font-size: 15px;
}

#business_nav .circle_btn {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
}

#business_nav .circle_btn svg {
  width: 6px;
}

.bs-mainslider {
  margin: 5px auto;
}

.bs-mainslider img {
  width: 70%;
  margin: 0 auto;
}

.moreLinkArrow {
  font-size: 13px;
}

.moreLinkArrow::before {
  width: 135px;
}

.moretext {
  margin-right: 20px;
}

/*============================================================================
COMPANY
==================================================================================*/
#company {
  padding: 110px 0 70px 0;
}

#company .container {
  width: calc(100% - 130px);
}

.decorated-text {  
  font-size: 22px;
  padding-left: 20px;
  margin-bottom: 15px;
}

.decorated-text::before {
  left: 2px;
  top: 0.19em;
  width: 7px;
  height: 1.1em;
  background: linear-gradient(to bottom, #f3edf7 0%, #7a2c91 100%);
}

.main_text {
  font-size: 19px;
  padding: 0 0 10px 20px;
}

.sub_text {
  font-size: 16px;
  padding-left: 20px;
}

#about {
  margin: 0 0 60px 0;
}

#message {
  margin: 0 0 60px 0;
}

.name {
  margin-top: 20px;
  font-size: 16px;
}

#summary {
  margin: 0 0 60px 0;
}

.cp-table {
  margin: 20px 0 0 0;
}

.cp-table p {
  font-size: 16px;
}

.cp-table th {
  padding: 20px;
}

.cp-table td {
  padding: 20px 20px 20px 0;
}

.company_nav_row {
  flex-direction: column;
  gap: 25px;
  width: 100%;
}

#company_nav h3 {
  font-size: 19px;
}

.cpnav_text {
  font-size: 16px;
  line-height: 1.4;
}


/*============================================================================
ACCESS
==================================================================================*/
#access {
  padding: 110px 0 70px 0;
}

#access .container {
  width: calc(100% - 130px);
}

#access .row {
  margin-top: 25px;
  flex-direction: column;
}

#access ul {
  border-left: none;
}

#access ul:last-child {
  border-bottom: 1px #8e8e8e dashed;
}

#access ul li {
  width: 100%;
  padding: 30px 0px 30px 0;
  border-top: 1px #8e8e8e dashed;
  border-right: none;
}

.adress {
  font-size: 19px;
  margin-bottom: 13px;
  padding-left: 20px;
}

.adress::before {
  width: 5px;
  height: 5px;
  top: 50%;
}

/*============================================================================
REECRUIT
==================================================================================*/
#recruit {
  padding: 110px 0 70px 0;
}

#recruit .container {
  width: calc(100% - 130px);
}

.toprec_title{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0;
}

#recruit .row {
  display: flex;
  flex-direction: column;
}

.toprec_left {
  width: 100%;
  order: 1;
}

#recruit .btn {
  order: 2;
  margin-left: auto;
  margin-right: 0;

}

.toprec_right {
  order: 3;
  width: 100%;
  display: flex;
  justify-content: center;
}

.zigzag-row {
  display: flex;
  flex-wrap: wrap;              
  justify-content: center;     
  gap: 20px;
  width: 100%;
  margin: 30px 0 0 0;
}

.zigzag-box {
  width: 100px;
  aspect-ratio: 1 / 2;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* ジグザグ（2列用） */
.zigzag-box:nth-child(even) {
  margin-top: 50px;          
}

/*============================================================================
REECRUIT2
==================================================================================*/
#top_recruit {
  padding: 110px 0 70px 0;
}

#top_recruit .container {
  width: calc(100% - 130px);
}

#top_career {
  margin: 30px 0 45px 0;
}

.btn_recruit {
  gap: 0px;
  margin-bottom: 15px;
  padding: 15px 25px;
}

.info-btn__title {
  font-size: 21px;
  width: 193px;
  padding-left: 41px;
}

.info-btn__title::before {
  width: 35px;
  height: 35px;
}

.btn_recruit::before {
  width: 26px;
  height: 26px;
  right: 30px;
}

.btn_recruit::after {
  width: 3.5px;
  height: 3.5px;
  right: 42px;
}

.btn_recruit2 {
  gap: 0px;
  margin-bottom: 15px;
  padding: 15px 25px;
}

.btn_recruit2::before {
  width: 26px;
  height: 26px;
  right: 30px;
}

.btn_recruit2::after {
  width: 3.5px;
  height: 3.5px;
  right: 42px;
}

.btn_recruit:hover::after {
  transform: translateY(-50%) scale(2.1);
}

.btn_recruit2:hover::after {
  transform: translateY(-50%) scale(2.1);
}

/*============================================================================
REECRUIT3
==================================================================================*/
#sec_recruit {
  padding: 110px 0 70px 0;
}

#sec_recruit .container {
   width: calc(100% - 130px);
}

#sec_recruit .row {
  flex-direction: column;
  gap: 20px;
}

.rec_title {
  width: 100%;
}

.accordion-wrap {
  flex-direction: column;
  gap: 0;
}

.rec_cont {
  width: 100%;
}

.cont_row {
  gap: 20px;
}

.info_box {
  width: 100%;
}

.box_img {
  width: 100%;
}

.circle_btn {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.label {
  width: 100px;
  height: 33px;
  font-size: 14px;
}

/*============================================================================
REECRUIT4
==================================================================================*/
#kyujin .rec_box {
  padding: 40px;
}

.kyujin_title {
  font-size: 22px;
  margin-bottom: 20px;
  padding-left: 18px;
}

.kyujin_title::before {
  width: 6px;
  height: 6px;
}

.table_recruit th {
  font-size: 16px;
  width: 25%;
  padding: 0 18px;
}

.table_recruit td {
  font-size: 16px;
}

.table_recruit p {
  font-size: 16px;
}

.btn_row {
  gap: 20px;
}

.btn_scale {
  transform: scale(1.18);
}

.back_btn {
  padding: 11px 9px;
}

}

@media screen and (max-width: 660px) {
/*============================================================================
共通
==================================================================================*/
.title {
  font-size: 45px;
}

.sm-title {
 font-size: 15px;
}

h1 {
  font-size: 23px;
}

.sp {
  display: none;
}

.mb_50 {
  margin-bottom: 30px;
}

/*============================================================================
top_img
==================================================================================*/
#top_img {
  height: 70vh;
}

/*============================================================================
top_news
==================================================================================*/
#top_news .container {
  width: calc(100% - 80px);
}

.news-label {
  padding: 3px 8px;
  font-size: 13px;
}

/*============================================================================
UNDER
==================================================================================*/
#under {
  margin: 70px 0 40px 0;
}

.rec_btn {
  padding: 25px 30px;
}

#under .title {
  font-size: 25px;
}

.rec_copy {
  font-size: 14px;
  margin: 7px 0;
}

.white_btn {
  width: 120px;
  padding: 10px 0px;
  font-size: 15px;
}

.white_btn .arrow {
  right: 15px;
}

/*============================================================================
POLICY
==================================================================================*/
#policy .cont_white {
  padding: 40px;
}

.policy_title {
  font-size: 22px;
  margin-bottom: 30px;
}

.policy_comment {
  font-size: 15px;
  margin-bottom: 10px;
  line-height: 1.9;
}

.policy_comment2 {
   font-size: 15px;
  margin-bottom: 20px;
  line-height: 1.9;
}

.policy_comment3 {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 30px;
}

.policy_info {
  font-size: 14px;
  line-height: 1.9;
}

.policy_cont {
  flex-direction: column;
}

.policy1 {
  width: 100%;
}

.policy2 {
  width: 50%;
  margin-left: auto;
}

/*============================================================================
NEWS
==================================================================================*/
#news .container {
  width: calc(100% - 80px);
}

.news-date2 {
  font-size: 15px;
  line-height: 1.5;
  margin-top: 5px;
}

/*============================================================================
BUSINEESS
==================================================================================*/
#business .container {
  width: calc(100% - 80px);
}

#top_business .container {
  width: calc(100% - 80px);
}

.business_nav_row {
  gap: 10px;
  flex-direction: column;
  margin: 0 auto;
}

.bus_maintitle {
  font-size: 24px;
}

.bus_subtitle {
  font-size: 18px;
}

#business_nav {
  padding-top: 0px;
  max-width: 75%;
}

.bs-mainslider img {
  width: 100%;
}

.col_right .slider img {
  width: 100%;
}

.col_right {
  margin-top: 10px;
}

.bsnav_col img {
  width: 0%;
}

/*============================================================================
COMPANY
==================================================================================*/
#company .container {
  width: calc(100% - 80px);
}

#company_nav h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

#company_nav .circle_btn {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

#company_nav .circle_btn svg {
  width: 6px;
}

.cp-table,
.cp-table tbody,
.cp-table tr,
.cp-table th,
.cp-table td {
    display: block;
    width: 100%;
}

.cp-table th {
    width: 100%;
    padding: 20px 0 5px 0;
    font-weight: 600;
}

.cp-table td {
    padding: 0 0 20px 0;
}

.cp-table tr {
    padding: 10px 0;
}


/*============================================================================
ACCESS
==================================================================================*/
#access .container {
  width: calc(100% - 80px);
}

/*============================================================================
RECRUIT
==================================================================================*/
#recruit .container {
  width: calc(100% - 80px);
}

.zigzag-row {
  gap: 18px;
}

.zigzag-box {
  width: 85px;
}

/*============================================================================
top_recruit
==================================================================================*/
#top_recruit .container {
  width: calc(100% - 80px);
}

.info-btn__title {
  padding-left: 47px;
}

.info-btn__title::before {
  width: 35px;
  height: 35px;
}

.btn_recruit {
  height: 80px;
  padding: 30px;
  margin-bottom: 10px;
}

.btn_recruit2 {
  height: 80px;
  padding: 30px;
  margin-bottom: 10px;
}


/*============================================================================
RECRUIT3
==================================================================================*/
#sec_recruit .container {
  width: calc(100% - 80px);
}

.rec_maintitle {
  font-size: 18px;
}

.cont_row {
  flex-direction: column;
}

.info_box {
  width: 100%;
}

.accordion-title {
  font-size: 21px;
  margin-bottom: 15px;
}

/*============================================================================
RECRUIT4
==================================================================================*/
.kyujin_title {
  font-size: 20px;
}

.kyujin_title::before {
  width: 5px;
  height: 5px;
}

.table_recruit th {
  width: 30%;
}

.btn_scale {
  transform: scale(1.2);
}

}

@media screen and (max-width: 480px) {    
/*============================================================================
共通
==================================================================================*/
.mb_40 {
   margin-bottom: 20px;
}

.font_16 {
  font-size: 14px;
}

.font_34 {
  font-size: 23px;
}

h1 {
  font-size: 22px;
}

.tb_in {
  display: none !important;
}

.tb_sp_in {
  display: block;
}

.container {
  width: calc(100% - 40px);
}

.title {
  font-size: 42px;
}

.sm-title {
  font-size: 15px;
}

.section-title {
  margin-bottom: 45px;
}

.btn {
  font-size: 15px;
  width: 100px;
  letter-spacing: 0.03em;
  padding: 11px 13px 11px 13px;
}

.btn .arrow {
  top: 50%;
}

.btn .text {
  font-weight: 500;
}

.btn .arrow svg {
  width: 8px;
}

.memo {
  font-size: 16px;
}

/*============================================================================
ヘッダー
==================================================================================*/
.row.just_end {
  justify-content: center;
}

.company_name {
  font-size: 26px;
}

.tb.sp {
  height: 19px;
}

.gnavToggle {
  width: 27px;
}

nav.gnav ul li a.btn {
  margin: 8px auto 0 auto;
  width: 140px;
}

.business-sub li a {
  display: inline-block;
  width: auto;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}


/*============================================================================
フッター
==================================================================================*/
footer .row {
  flex-direction: column;
  align-items: flex-start;
}

.footer-row {
  align-items: flex-start;
}

footer ul.foot_nav {
  padding: 50px 0 30px 0;
}

footer ul.foot_nav li:first-child {
  margin: 0 0 20px 0px;
}

footer ul.foot_nav li {
  margin: 0 0 20px 0px;
}

.sp_14 {
  font-size: 14px !important;
}

.sp_20 {
  font-size: 23px !important;
}

.footer-left {
  align-items: flex-start;
  text-align: left;
}

footer .logo {
  width: 70px;
  margin-right: 0px;
}

.copyright {
  text-align: left;
}

/*============================================================================
under
=============================================================================*/
#under .title {
  font-size: 22px;
}

.rec_copy {
  font-size: 13px;
  line-height: 1.5;
  margin: 10px 0 13px 0;
}

.white_btn {
  font-size: 15px;
}

.white_btn .text {
  font-weight: 500;
}

.white_btn .arrow {
  right: 15px;
  top: 50%;
}

.white_btn .arrow svg {
  width: 7px;
}


/*============================================================================
top_img
==================================================================================*/
#top_img {
  height: 65vh;
}

.top_comment {
  font-size: 38px;
  margin-bottom: 10px;
  letter-spacing: 0.08em;
}

.top_subcomment {
  font-size: 12px;
  width: 100%;
}

.hero-text {
  bottom: 6%;
}

.top-inner {
  width: calc(100% - 30px);
}

/*============================================================================
top_news
==================================================================================*/
#top_news .container {
  width: calc(100% - 50px);
}

  /* 白ボックスの余白を縮める */
#top_news .cont_white {
    padding: 60px 25px;
}

  /* 横並び解除 */
.news-list li {
    display: block;
}

.news-link {
    display: block;
    padding: 15px 0;
}

  /* 上段（ラベル＋日付） */
.news-label {
    margin-right: 10px;
    font-size: 12px;
    width: auto;        /* 固定幅解除 */
    padding: 3px 13px;
}

.news-date {
    font-size: 16px;
    width: auto;        /* 固定幅解除 */
}

  /* タイトルを下に */
.news-text {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.6;
}

/* MOREボタン中央 */
#top_news .btn {
    margin: 0px auto;
}

/*============================================================================
POLICY
==================================================================================*/
#policy .container {
  width: calc(100% - 50px);
}

#policy .cont_white {
  padding: 35px;
}

.policy_title {
  font-size: 20px;
  margin-bottom: 20px;
}

/*============================================================================
NEWS
==================================================================================*/
#news .container {
  width: calc(100% - 50px);
}

#news .container {
  width: calc(100% - 50px);
}


/*============================================================================
BUSINESS
==================================================================================*/
#top_business .container {
  width: calc(100% - 50px);
}

#business .container {
  width: calc(100% - 50px);
}

.slogan {
  font-size: 18px;
}

.bus_maintitle {
  margin-top: 5px;
  font-size: 22px;
}

.bus_subtitle {
  font-size: 17px;
}

.bus_english {
  font-size: 13px;
  margin-top: 1px;
}

.work_mainimg img {
  margin-bottom: 7px;
}

.sub_topwork_left {
  gap: 7px;
  width: 98%;
}

#top_business .btn .arrow svg {
  width: 7px;
}

.topwork_right::before {
  content: none;
}

.topwork_right::after {
  content: none;
}

#business .rec_box {
  padding: 30px;
}

.topwork_right {
  padding: 0px;
}

#top_business .btn {
  margin-top: 0px;
}

#top_business .cont_white {
  padding: 30px;
}

#business .decorated-text {
  font-size: 18px;
  padding-left: 15px;
}

.decorated-text {
  font-size: 20px;
  margin-bottom: 13px;
}

.business-name {
  font-size: 18px;
  padding-left: 15px;
}

.business-name::before {
  width: 5px;
  height: 5px;
}

/*============================================================================
COMPANY
==================================================================================*/
#company .container {
  width: calc(100% - 50px);
}

.decorated-text::before {
  top: 0.2em;
  width: 7px;
  height: 1.1em;
}

.main_text {
  font-size: 16px;
  padding: 0;
  margin: 0px 0 10px 0;
}

.sub_text {
  padding: 0px;
  line-height: 1.8;
}

.name {
  padding: 0;
  font-size: 15px;
}

.company_nav_row {
  gap: 17px;
}

#company_nav .circle_btn {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

.cp-table p {
  font-size: 16px;
}

.cpnav_text {
  font-size: 16px;
  line-height: 1.5;
}

/*============================================================================
ACCESS
==================================================================================*/
#access .container {
  width: calc(100% - 50px);
}

.adress_text {
  font-size: 16px;
}

.adress {
  font-size: 20px;
  padding-left: 16px;
}

#access ul li {
  padding: 30px 0px 35px 0;
}

/*============================================================================
RECRUIT
==================================================================================*/
#recruit .container {
  width: calc(100% - 50px);
}

#top_recruit .container {
  width: calc(100% - 50px);
}

#sec_recruit .container {
  width: calc(100% - 50px);
}

.toprec_title {
  font-size: 20px;
}

#recruit .row .memo {
  line-height: 1.8;
}

#recruit .btn .arrow {
  top: 50%;
  right: 17px;
}

.zigzag-row {
  gap: 15px;
}

.zigzag-box {
  width: 66px;
}

#recruit .btn .arrow svg {
  width: 7.5px;
}

.heading-line span {
  margin: 0 16px;
}

.info-btn__title {
  font-size: 19px;
  padding-left: 37px;
}

.info-btn__title::before {
  width: 28px;
  height: 28px;
}

.btn_recruit {
  height: 70px;
  padding: 25px;
  margin-bottom: 10px;
}

.btn_recruit::after {
  width: 3px;
  height: 3px;
  right: 31px;
}

.btn_recruit::before {
  width: 23px;
  height: 23px;
  right: 21px;
}

.btn_recruit2 {
  height: 70px;
  padding: 25px;
  margin-bottom: 10px;
}

.btn_recruit2::after {
  width: 3px;
  height: 3px;
  right: 31px;
}

.btn_recruit2::before {
  width: 23px;
  height: 23px;
  right: 21px;
}

.accordion {
  width: 100%;
}

.accordion-title {
  font-size: 20px;
  margin-bottom: 15px;
}

.accordion summary {
  padding: 0.93em 1em;
}

.accordion summary::before {
  right: 1.03em;
}

.rec_box {
  padding: 30px;
}

.rec_maintitle {
  font-size: 18px;
  padding-bottom: 7px;
}

.box_text1 th {
  width: 95px;
}

.label {
  width: 95px;
  height: 32px;
  font-size: 14px;
}

.box_text1 td {
  font-size: 15px;
  padding: 5px 0 5px 10px;
}

.rec_comment {
  font-size: 15px;
}

.btn_recruit:hover::after {
  transform: translateY(-50%) scale(2.4);
}

.btn_recruit2:hover::after {
  transform: translateY(-50%) scale(2.4);
}

#kyujin .rec_box {
  padding: 30px;
}

.kyujin_title {
  font-size: 18px;
  padding-left: 15px;
}

.table_recruit {
  border-top: none;
}

.table_recruit th,
.table_recruit td{
  display:block;
  width:100%;
  box-sizing:border-box;
  border-bottom: none;
}

.table_recruit th{
  padding:10px 15px;
  font-size: 15px;
  white-space: normal;
}

.table_recruit td{
  padding: 15px 0px 15px 15px;
  font-size: 15px;
}

.table_recruit p{
  font-size: 15px;
}

.btn_scale .btn {
  font-size: 16px;
  width: 120px;
  padding: 13px 10px;
}

.back_btn .text {
  font-weight: 500;
}

}