@charset "UTF-8";

/*=============================================

#page_top

===============================================*/

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 80px;
  background: #000;
	border: solid 1px #fff;
  opacity: 0.86;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
	line-height: 1;
}

/* id属性を持つすべての要素、または特定のセクションに一括適用 */
div[id],
section[id] {
  scroll-margin-top: 80px;
}


/*=============================================

common class

===============================================*/
.w100 { width: 100%!important; }
.w90 { width: 90%!important; }
.w80 { width: 80%!important; }


.mb0 { margin-bottom: 0 !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }

.mt0 { margin-top: 0px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt80 { margin-top: 80px !important; }
.mt100 { margin-top: 100px !important; }

.p_all15 { padding: 15px; }
.pb1em { padding-left:1em; padding-right: 1em; }

.al_left { text-align: left !important; }
.al_right { text-align: right !important; }
.al_center { text-align: center !important; }


.f_pink { color: #ed1e79; }
.f_orange { color: #F7931E; }
.f_green { color: #39b54a; }
.f_blue { color: #00B1C5; }
.f_red { color: #ff0000; }

.f_big { font-size: 1.25em; }

.f_mincho {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}


.marker_pink {
	background: linear-gradient(transparent 40%, #f9bbc0 0%);
	padding: 0 3px; margin: 0 3px;
}
.marker_pink2 {
	background: linear-gradient(transparent 70%, #f9bbc0 0%);
	padding: 0 3px; margin: 0 3px;
}
.marker_pink3 {
	background: linear-gradient(transparent 40%, #f9e5e5 0%);
	padding: 0 3px; margin: 0 3px;
}
.marker_yellow {
	background: linear-gradient(transparent 80%, #f4e7bd 0%);
	padding: 0 3px; margin: 0 3px;
}
.marker_green {
	background: linear-gradient(transparent 80%, #b6e0ba 0%);
	padding: 0 3px; margin: 0 3px;
}

.sp { display: none;} 
.pc { display: block; }
@media screen and (max-width: 640px){
	.sp { display: block;} 
	.pc { display: none; }	
}
/*=============================================

00. 共通

===============================================*/
.flex { display: flex; flex-wrap: wrap; }
.flex_s_b {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex_s_a {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.flex_c {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.flex_start {
	align-items: flex-start;
}

.align_c { align-items: center; }

.box_wide {
	width: 100%;;
}
.box_1_2 {
	width: 48%; margin-bottom: 10px;
}
.box_1_3 {
	width: 32%; margin-bottom: 10px;
}
.box_2_3 {
	width: 66%;
}
.box_1_4 {
	width: 25%;
}
.box_3_4 {
	width: 73%;
}
.box_1_5 {
	width: 20%;
}
.box_4_5 {
	width: 78%;
}
.box_3_7 {
	width: 41.71%;
}
.box_4_7 {
	width: 56.28%;
}

hr.hr_style01 { 
	border-top: solid 1px #b7b7b7;
	max-width: 83%;
	margin: 3em auto 4em;
}

@media screen and (max-width: 640px){
	.box_1_2,
	.box_1_3,
	.box_2_3,
	.box_1_4,
	.box_3_4,
	.box_1_5,
	.box_4_5,
	.box_3_7,
	.box_4_7 {
		width: 100%; margin-bottom: 10px;
	}
}

/*=============================================

breadcrumb

===============================================*/
.breadcrumb {
  padding: 10px 0;
  font-size: 0.85em;
  color: #666;
}

.breadcrumb .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1200px;
	width: 95%;
	padding: 10px;
	margin: 0 auto 1em;
	background: #fafafa;
}

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

/* ＞（区切り文字）の挿入 */
.breadcrumb li:not(:last-child):after {
  content: "＞";
  margin: 0 8px;
  color: #999;
  font-size: 0.75rem;
}

.breadcrumb a {
  color: #0b2545;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb li:last-child {
  color: #666; /* 最後の階層（現在地）はリンクにしない場合の色 */
}

/*=============================================

related-pages　関連ページボタン

===============================================*/
.related-pages {
	background-color: #eff9fe;
	color: var(--primary-color);
	padding: 3em 2em;	
	margin: 5em auto 0;
}
.layout-2col .sidebar h3,
.related-pages h3 {
	color: var(--primary-color);
	font-size: 1.5em;
	font-weight: 700;
	padding: 0;
	line-height: 1;
	margin: 0 auto 30px;	
	max-width: var(--inner-width);
	text-align: left;
}
.layout-2col .sidebar ul,
.related-pages ul {
	max-width: var(--inner-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.related-pages ul li {
	width: 30%;
	margin: 0 5% 0 0;
}
.related-pages ul li:nth-child(3n) {
	margin: 0;
}
.layout-2col .sidebar ul li a.btn_related,
.related-pages ul li a.btn_related {
	color: var(--primary-color);
	background-color: #fff;
	border: solid 1px #e2edf4;
	font-weight: 600;
	padding: 1em 1em 2em;
	width: 100%;
	display: block;
	text-decoration: none;
	position: relative;
	transition: .3s;
}
.layout-2col .sidebar ul li a.btn_related:hover,
.related-pages ul li a.btn_related:hover {
	background-color: #e2edf4;
}
.layout-2col .sidebar ul li a.btn_related i,
.related-pages ul li a.btn_related i {
    font-size: 1.0em;
    position: absolute; right: 15px; bottom: 15px;
	color: var(--secondary-color);
}
.layout-2col .sidebar ul li .num,
.related-pages ul li .num {
    color: var(--secondary-color);
	padding-right: 10px;	
}

@media screen and (max-width: 640px) {
	.related-pages ul li {
		width: 100%;
		margin: 0;
	}	
}

/*=============================================

main

===============================================*/
main#contents {
	padding: 0 0;
}
main#contents .inner {
	width: 95%; max-width: var(--inner-width);
	margin: 0 auto; padding: 0;
}
.inner_narrow {
	width: 90%; max-width: var(--inner-narrow);
	margin-left:auto; margin-right:auto; padding: 0;	
}
main#contents section {

}

@media screen and (max-width: 640px){
	main#contents section {
		margin: 2em auto 0;
	}	
}


/*=============================================

404

===============================================*/
.error404 {
	background: url("../images/bg_404.jpg") center top;
	background-size: cover;
}
.error404 footer {
	background-color: rgba(255,255,255,.9);
}
.error404 .index__bnr_area {
	background-color: rgba(0,0,0,.9);
}
.wrap_404 {
	text-align: center;
	position: relative;
	height: 100%;
}
.wrap_404 .inner {
	padding: 200px 0;
}
.wrap_404 h1 {
	color: #fff;
	font-size: 5em;
	line-height: 2;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 640px){
	.wrap_404 .inner {
		padding: 150px 0;
	}	
	.wrap_404 h1 {
		font-size: 3em;
		line-height: 1.5;
	}
}



/*==========================================================================================

SLD

============================================================================================*/
.sld {
	position: relative;
	padding: 150px 0 0;	
}
.sld .sld__bg {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}
.sld__bg img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
  font-family: "object-fit: cover;";
}
 .sld__inner {
	position: relative;
	max-width: var(--inner-width);
	width: 95%;
	margin: 0 auto 2.5em;
	display: flex;
	align-items: flex-start;
}
 .sld__inner .sld_num {
	font-family: "Tinos", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 4.0em;
	line-height: 1;
	margin-right: .5em;	 
}
.sld__ttl { 
	color: var(--primary-color);
	font-size: 2.115em;
	line-height: 1.2;
}
.sld__ttl::before {
	content: attr(data-ttl-en);
	color: var(--secondary-color);
	display: block;
	line-height: 1.2;
	font-size: .55em;
}

.sld .btn_box {
	position: absolute;
	left: 50%; bottom: 30px; transform: translateX(-50%);
}
.sld .btn_box a {
	background-color: #62C370;
	border-radius: 50vh;
	color: #fff;
	font-size: 1.25em;
	width: auto;
	margin: 20px auto 0;
	padding: 10px 3em;
	display: flex; justify-content: space-between; align-items: center;
	text-decoration: none;
	transition: .3s;
	border: solid 2px #fff;
	font-weight: bold;
	box-shadow: 0 0 30px rgba(0,0,0,.3);
}
.sld .btn_box a:hover { background-color: #16DB93; }


@media screen and (max-width: 640px){
	.sld {
		padding: 65px 0 0;	
	}	
	.sld__ttl { text-align: center; padding: 0 0 1em; }
	.sld__ttl::before {
	  font-size: 2rem;
		text-align: left;
	}	
	.sld .btn_box {
		width: 80%;
		text-align: center;
	}	
	.sld .btn_box a {
		width: auto;
		margin: 20px auto 0;
		padding: 10px 0;
		display: flex; justify-content: center; align-items: center;
	}	
}

/*==========================================================================================

h2.head_section

============================================================================================*/
h2.head_section {
	color: var(--primary-color);
	font-size: 2em;
	font-weight: 700;
	padding: 0;
	line-height: 1.5;
	margin: 0 auto 30px;
	text-align: center;
}

h2.head_section .eng {
	color: var(--secondary-color);
	display: block;
	font-size: .4em;
	margin: 20px 0;
}

h3.head_sub_section {
	color: var(--secondary-color);
	font-size: 1.75em;
	font-weight: 700;
	padding: 0;
	line-height: 1.5;
	margin: 0 auto 30px;
	text-align: center;
}

@media screen and (max-width: 640px){
	h2.head_section {
		font-size: 1.75em;
		padding: 10px 0 10px 20px;
	}
	h2.head_section .eng {
		margin: 0;
	}	
}

/*==========================================================================================

01.会社概要

============================================================================================*/
.message h3 {
	font-size: 1.25em; font-weight: 600;
	margin: 1em 0;
}
.message h4 {
	font-size: 1.5em; font-weight: 600;
	margin: 0 0 1em;
}
.message p { 
	font-size: 1.125em; 
	line-height: 1.8;
	margin: 0 0 1em;
}
.about__movie {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 95%;
	max-width: var(--inner-width);
	margin: 5em auto;
}
.about__movie .box_movie {
	border-radius: 15px;
	border: solid 1px #e2edf4;
	padding: 30px 30px; margin-bottom:2em;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 48%;
}
.about__movie .box_movie iframe {
	width: 28%;
	aspect-ratio: 16 / 9;
}
.about__movie .box_movie img {
	width: 28%;
	height: auto;
}
.about__movie .box_movie .txt_box {
	width: 67%;
}
.about__movie .box_movie p {
	color: var(--primary-color);
	line-height: 1.2;
}
.about__movie .box_movie a {
	color: var(--secondary-color);
	text-decoration: none;
}

.about__number {
	background-color: #eff9fe;
	color: var(--primary-color);
	font-size: .8em;
	padding: 3em 0;
}
.about__number .inner_narrow{
	max-width:var(--inner-narrow);
	margin-left: auto; margin-right: auto;
}
.about__number .box_number {
	width: 19%;
	border: solid 1px #e2edf4;
	background-color: #fff;
	text-align: center;
	padding: 1em;
}
.about__number .box_number.w24 {
	width: 24%;
}
.about__number .box_number img {
	width: 50%;
	height: auto;
}
.about__number .box_number .head_box {
	color: var(--secondary-color);
	font-size: 1.75em;
}

.about__access {
	width: 95%;
	max-width: var(--inner-width-thin);
	margin: 5em auto;
}
.about__access iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.about__access p {
	margin: 1em auto 0;
}

.outline {
	padding: 70px 0;
	background-color: #f2f2f2;
}
.outline .inner {
	background: #fff;
	padding-bottom: 50px !important;
}
.tbl_outline {
	margin: 0 auto;
	border-collapse: collapse;
	width: 90%;
}
.tbl_outline th,
.tbl_outline td {
	padding: 1em;
	border-bottom: solid 1px #ccc;
	text-align: left;
}



@media screen and (max-width: 640px){
	.message h3 {
		font-size: 1.3em;
		margin: 1em 2.5%;
		text-align: center;
	}
	.message p { 
		font-size: 1.125em; 
		margin: 0 2.5% 1em;
	}
	.about__number .box_number {
		width: 49%;
		margin-bottom: 1em;
	}	
	.about__movie .box_movie {
		padding: 20px 20px; margin-bottom:1em;
		width: 100%;
	}	
	.tbl_outline th,
	.tbl_outline td {
		display: block; width: 100%;
	}	
	.tbl_outline th {
		padding: 1em 1em 0;
		border-bottom: none;
	}	
	.tbl_outline td {
		padding: 0 1em 1em;
	}	
}


/*=============================================
about__step
===============================================*/
/* 全要素で border-box を適用（幅計算のずれを防止） */
.about__step *,
.about__step *::before,
.about__step *::after {
    box-sizing: border-box;
}

.about__step {
    padding: 70px 0;
    overflow: hidden;
}

.about__step .inner {
    background-image: url("https://sharousi-kyuujin.com/wps/wp-content/themes/kitami/images/about/about__step_bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 95%;
    max-width: var(--inner-width, 1200px);
    margin: 0 auto;
    position: relative;
	padding: 30px 20px !important;
}

.about__step .txt_box_1 {
    width: 13%;
	aspect-ratio: 1 / 1;
	position: absolute; left: 20px; top: 20%;
}
.about__step .txt_box_2 {
    width: 15%;
	aspect-ratio: 1 / 1;
	position: absolute; right: 0; top: 30%;
}

.about__step .txt_box {
    text-align: center;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    color: #003265;
    background: linear-gradient(180deg, #0287d4 0%, #082762 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;	
    margin-bottom: 20px;
	padding-left: 20%;
	padding-bottom: 1em;	
}


.about__step .txt_box .main-title {
    font-size: 5em;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.about__step .txt_box .main-title .cross {
    font-size: 1.0em;
    font-weight: 300;
    margin: 0 0.2em;
    color: #003265;
}

.about__step .txt_box .sub-title {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.4;
}

.about__step .txt_box .marker {
    position: relative;
    display: inline;
    color: #0995e5 !important;
    -webkit-text-fill-color: #0995e5 !important;

    background: linear-gradient(
        to bottom,
        transparent 55%,
        #fefac6 55%,
        #fefac6 100%
    ) !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

@media (max-width: 768px) {
  .about__step .txt_box .main-title {
    font-size: 28px;
  }
  .about__step .txt_box .sub-title {
    font-size: 20px;
  }
}


.about__step-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* ラインとテキストの間隔 */
  width: 100%;
  max-width: 900px; /* 必要に応じて全幅に合わせて調整してください */
  margin: 20px auto 0;
  padding: 12px 24px;
  background: linear-gradient(180deg, #eaf4ff 0%, #d8ebff 100%); /* 薄い水色グラデーション */
  border-radius: 50px; /* カプセル形状の丸み */
  box-sizing: border-box;
}
.step-bottom-text {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #0d47a1;
  text-align: center;
  white-space: nowrap;
}

.step-bottom-line {
  flex: 1;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

@media (max-width: 768px) {
  .about__step-bottom {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 16px;
  }
  .step-bottom-text {
    font-size: 12px;
    white-space: normal;
  }

  .step-bottom-line {
    display: none;
  }
}

.step-flow-scroll {
  overflow-x: auto;      /* 横方向だけスクロール */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch; /* スマホで慣性スクロール */
  white-space: nowrap;   /* 改行させず横一列に並べる */
	padding-top: 30px;
}

@media screen and (max-width: 767px) {
	.about__step .txt_box {
		margin-bottom: 20px;
		padding:100px 20px 0;
	}	
	.about__step .txt_box_1 {
		width: 25%;
		position: absolute; left: auto; right: 30px; top: 20px; transform: translateX(-100%);
	}
	.about__step .txt_box_2 {
		width: 25%;
		position: absolute; right: 20px; top: 20px;
	}	
    /* STEP全体 */
    .about__step .step-flow {
        display: flex;
        gap: 5px;

        width: max-content;
        min-width: max-content;
    }

    /* 各STEPの幅を固定 */
    .about__step .step-column {
        flex: 0 0 165px;
        width: 165px;
        min-width: 165px;
    }

    /* STEPカード */
    .about__step .step-item {
        width: 165px;
        min-width: 165px;
    }

}

/* =========================================
   STEP FLOW
========================================= */

.about__step .step-flow {
    display: flex;
    width: 100%;
}


/* 各カラム */
.about__step .step-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: -12px;
    position: relative;
}

.about__step .step-column:first-child {
    margin-left: 0;
}


/* 重なり順 */
.about__step .step-column:nth-child(1) { z-index: 6; }
.about__step .step-column:nth-child(2) { z-index: 5; }
.about__step .step-column:nth-child(3) { z-index: 4; }
.about__step .step-column:nth-child(4) { z-index: 3; }
.about__step .step-column:nth-child(5) { z-index: 2; }
.about__step .step-column:nth-child(6) { z-index: 1; }


/* =========================================
   STEP ITEM
   ※ clip-pathは使わない
========================================= */

.about__step .step-item {
    position: relative;
    padding: 38px 5px 12px 18px;
    text-align: center;
    flex-grow: 1;
    /* アイコンを外に出すため重要 */
    overflow: visible;
    /* clip-pathを完全に解除 */
    clip-path: none;

    z-index: 1;
}


/* =========================================
   矢印の背景
========================================= */

.about__step .step-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    clip-path: polygon(
        0% 0%,
        calc(100% - 14px) 0%,
        100% 50%,
        calc(100% - 14px) 100%,
        0% 100%,
        14px 50%
    );
}


/* =========================================
   最初のSTEP
========================================= */

.about__step .step-column:first-child .step-item::before {
    clip-path: polygon(
        0% 0%,
        calc(100% - 14px) 0%,
        100% 50%,
        calc(100% - 14px) 100%,
        0% 100%
    );

    border-radius: 6px 0 0 6px;
}


/* =========================================
   最後のSTEP
========================================= */

.about__step .step-column:last-child .step-item::before {
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        0% 100%,
        14px 50%
    );
}


/* =========================================
   色
========================================= */

.about__step .step-light::before {
    background-color: #dbeeff;
}

.about__step .step-medium::before {
    background-color: #72b2f2;
}

.about__step .step-dark::before {
    background-color: #0062c4;
}


/* =========================================
   STEP ICON
========================================= */

.about__step .step-icon {
    position: absolute;

    width: 48px;
    height: 48px;

    left: 50%;
    top: -24px;

    transform: translateX(-50%);

    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 20;

    /* 絶対に切らない */
    overflow: visible;
}


.about__step .step-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}


.about__step .step-num {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    opacity: 0.85;
    margin: 0 5px 0 0;
    line-height: 1.25;
    vertical-align: middle;
}

.about__step .step-title {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    line-height: 1.25;
    word-break: break-all;
    vertical-align: middle;
}


/* =========================================
   説明文
========================================= */

.about__step .step-desc {
    font-size: 11px;
    color: #333333;

    margin: 10px 5% 0;

    padding: 0 6px;

    text-align: center;

    line-height: 1.5;

    width: 90%;

    min-width: 0;

    box-sizing: border-box;

    white-space: normal !important;

    word-break: break-all;

    overflow-wrap: anywhere;
}


/*=============================================

  about__party 懇親会（会社概要トップ内）

===============================================*/

.about__party {
    position: relative;
    padding: 70px 0;
    background: #fff;
    overflow: hidden;
}
.about__party .inner {
    width: 95%;
    max-width: 1100px !important;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.about__party-main {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 65px;
}
.about__party-text {
    padding-left: 5px;
	width: 46%;
}
.about__party-text h3 {
    margin: 0 0 28px;
    font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
    font-size: 28px;
    line-height: 1.65;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-color);
}
.about__party-text p {
    margin: 0 0 18px;
    font-size: 1em;
    line-height: 2;
    color: #333;
}

.about__party-photo {
    position: relative;
    padding-bottom: 45px;
	width: 46%;
}
.about__party-photo-main {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 12px 12px 0 #eff9fe;
}
.about__party-photo-main img {
    display: block;
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


.about__party-photo-sub {
    position: absolute; left: 20px; bottom: 0;
    width: 40%;
    padding: 7px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    transform: rotate(-3deg);
    z-index: 2;
}
.about__party-photo-sub img {
    display: block;
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.about__party-photo-caption {
    position: absolute;
    right: -10px; bottom: 5px;
    padding: 8px 14px;
    font-family: "Hiragino Mincho ProN", "Yu Mincho",serif;
    font-size: 14px;
    font-weight: 700;
    transform: rotate(3deg);
}

.about__party-more {
    text-align: center;
    margin-top: 30px;
}

.about__party-more a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    min-width: 280px;
    padding: 13px 25px;
    border: 1px solid #1689d1;
    border-radius: 50px;
    background: #fff;
    text-decoration: none;
    color: #006fc0;
    font-size: 14px;
    font-weight: 700;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.about__party-more a:hover {
    background: #006fc0;
    color: #fff;
    transform: translateY(-2px);
}

.about__party-more-arrow {
    font-size: 20px;
    line-height: 1;
}


@media (max-width: 900px) {

    .about__party-main {
        gap: 40px;
    }
	.about__party-text,
	.about__party-photo {
		width: 100%;
	}
    .about__party-text h3 {
        font-size: 24px;
    }
    .about__party-point h4 {
        font-size: 20px;
    }

}

@media (max-width: 768px) {
    .about__party {
        padding: 65px 0 75px;
		background-color: #f8fcfe;
    }
    .about__party-inner {
        width: 90%;
    }


    .about__party-heading {
        margin-bottom: 40px;
    }

    .about__party-heading h2 {
        font-size: 34px;
        letter-spacing: 0.08em;
    }

    .about__party-label {
        font-size: 11px;
    }

    .about__party-main {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-bottom: 55px;
    }

    .about__party-text {
        padding: 0;
    }

    .about__party-text h3 {
        margin-bottom: 22px;
        font-size: 22px;
        line-height: 1.7;
    }
    .about__party-text p {
        font-size: 16px;
        line-height: 1.9;
        margin-bottom: 15px;
    }



    .about__party-photo {
        width: 100%;
        padding-bottom: 40px;
    }

    .about__party-photo-sub {
        left: 10px;
        width: 38%;
    }

    .about__party-photo-caption {
        right: 0;
        bottom: 0;
        font-size: 12px;
    }


    .about__party-message {
        gap: 0;
        padding: 20px 25px;
        border-radius: 20px;
    }
    .about__party-message-line {
        display: none;
    }
    .about__party-message p {
        font-size: 15px;
        line-height: 1.8;
    }
    .about__party-more {
        margin-top: 25px;
    }
    .about__party-more a {
        width: 100%;
        min-width: 0;
        max-width: 320px;
        padding: 12px 20px;
        font-size: 13px;
    }

}

/*=============================================

about__calendar

===============================================*/
.about__calendar {
	background-color: #eff9fe;
	padding: 3em 0;
}
.about__calendar .inner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	width: 95%;
	max-width: var(--inner-width);
	margin: 0 auto;
}
.about__calendar h2.head_section {

}
.about__calendar h3 {
	margin: 1em auto;
}
.about__calendar h4 {
	  border: solid 1px #e2edf4;
	  border-radius: 15px;
	  background-color: #fff/*#eff9fe */;
	  text-align: left;
	  font-weight: bold;
	  margin: 0 1% 15px;
	  padding: 1em;
	  line-height: 1.4;
}

.about__calendar .img_box {
	width: 32.5%;
}
.about__calendar .txt_box {
	width: 50%;
}
.about__calendar .txt_box p {
	color: var(--primary-color);
	margin-bottom: 2em;
}
.about__calendar .txt_box ul {
	padding-left: 1em;
	margin: 10px 1em 1em;
	color: #333;
}
.about__calendar .txt_box li {
	list-style: disc;
	list-style-position: outside;
}

.about__calendar .txt_box strong {
	font-size: 1.125em;
}
.about__calendar .txt_box a.btn {
	display: inline-block;
	padding: 1.5rem 4.5rem 1.5rem 3rem;
}
@media screen and (max-width: 640px){
	.about__calendar h2.head_section {
		padding:0;
		text-align: center;
	}
	.about__calendar h3 {
		text-align: center;
	}	
	.about__calendar .img_box {
		width: 100%;
		padding: 0 10%;
		text-align: center;
	}
	.about__calendar .img_box img {
		max-width: 240px;
	}
	.about__calendar .txt_box {
		width: 100%;
		padding: 0 1em;
	}	
}

/*==========================================================================================

03-1.01.会社概要　懇親会 /party

============================================================================================*/
.title_party {
    background-color: #1e3a8a;
    color: #ffffff;
    padding: 2.5em 1.5em;
    text-align: center;
	margin-top: 100px;
}

.title_party h1 {
    display: flex;
    flex-direction: column; /* 上下に並べる */
    align-items: center;    /* 左右中央に配置 */
    text-align: center;	
    font-size: 1.75em;
    font-weight: 700;
    margin: 0 0 0.75em 0;
    letter-spacing: -0.02em;
}
.title_party h1::before {
	content: "\f79f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 36px;
    margin-bottom: 12px;
    line-height: 1;
}
.about__party_detail {
	background-color: #eff9fe;
	color: var(--primary-color);
	font-size: .8em;
	padding: 3em 0;
}
.about__party_detail .inner {
	max-width: var(--inner-narrow) !important;
}
.about__party_detail .party {
	margin: 0 auto 3em;
}
.about__party_detail .party h3 {
	background-color: #fafbfc;
	border:1px solid #e1e6eb;
	color: #333;
	padding: 20px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	font-weight: bold;
	font-size: 20px;
	position: relative;
}
.about__party_detail .party h3 .day {
	color: var(--secondary-color);
	margin-right: 1em;
}
.about__party_detail .party .main_box {
	border:1px solid #e1e6eb;
	border-top: none;
	padding: 30px 30px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;	
	line-height: 1.8;
	color: #4a4a4a;
	font-size: 15px;
	display: block;
	background-color: #fff;
}
.about__party_detail .party .main_box .img_box {
	font-size: 12px;
	margin-bottom: 1em;
}
.about__party_detail .party .main_box p {
	margin-bottom: 1em;
}


/*==========================================================================================

02.仕事内容

============================================================================================*/
.page__intro {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 95%;
	max-width: var(--inner-width);
	margin: 0 auto;
}
.page__intro .img_box {
	width: 40%;
}
.page__intro .txt_box {
	width: 40%;
}
.page__intro.no_img_box .txt_box {
	width: 100%;
}
.page__intro .txt_box p {
	color: var(--primary-color);
	margin-bottom: 1em;
}
.page__intro .txt_box strong {
	font-size: 1.125em;
}
.page__intro.no_img_box .txt_box strong {
	font-size: 2.0em;
}

.job__duties {
	color: var(--primary-color);
	font-size: .8em;
	padding: 3em 0;
}
.job__duties .inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.job__duties .box_job {
	width: 23%;
	border: solid 1px #e2edf4;
	border-radius: 15px;
	background-color: #eff9fe;
	text-align: center;
	font-weight: bold;
	margin: 0 1% 30px;
	padding: 1em;
	line-height: 1.4;
}
.job__duties .box_job img {
	width: 50%;
	height: auto;
	margin-bottom: 1em;
}

.job__schedule .inner {
	align-items: flex-start;
}
.job__schedule h2.head_section {
	max-width: var(--inner-width);
	text-align: left;
}
.job__schedule .schedule_box {
	position: relative;
	width: 48%;
	padding: 0 1%;
	color: var(--primary-color);
}
.job__schedule .time_schedule{
	position: relative;
}
.job__schedule .img_box {
	width: 48%;
	padding: 0 1%;
}
.job__schedule .img_box p {
	padding: .5em 1em;
	border-radius: 10px;
	background-color: var(--secondary-color);
	color: #fff;
	text-align: center;
	margin: 1em auto;
}
.time_line {
	width: 4px;
	height: 95%;
	position: absolute;
	top: 0;
	left: 0;
	/* z-index: 999; */
	transform: translateX(-50%);
	padding-top: 15px;
}
.time_line span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--secondary-color);
}
.time_ball{
  position: absolute;
  background: var(--secondary-color);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 0;
  /* z-index: 999; */
}
dl{
  padding: 10px 0;
	font-weight: bold;
}
dl dt{
  width: 100%;
  position: absolute;
	padding-left: 2em;
	color: var(--secondary-color);
}
dl dd{
  width: 70%;
  margin-left: 30%;
	color: var(--primary-color);
}


@media screen and (max-width: 640px){
	.page__intro .img_box {
		width: 100%;
	}
	.page__intro .txt_box {
		width: 100%;
		padding: 1em 1em;
	}	
	.job__duties .box_job {
		width: 46%;
		margin: 0 2% 30px;
	}	
	.job__schedule .schedule_box {
		position: relative;
		width: 100%;
		padding: 0 5% 1em;
	}	
	.job__schedule .img_box {
		width: 100%;
	}	
}


/*==========================================================================================

03.教育研修制度

============================================================================================*/
.edu__growth {
	padding: 3em 0;
}

.step-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
}

/* カードスタイル */
.step-card {
  flex: 1;
  background-color: #ebf6fe; /* 薄い青色の背景 */
  border-radius: 16px;
  padding: 28px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.step-header {
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 1.125em;
  margin-bottom: 5px;
}

/* 数字の丸 */
.step-circle {
  width: 56px;
  height: 56px;
  border: 4px solid var(--secondary-color);
  border-radius: 50%;
  background-color: #ffffff;
  color: #0091e6;
  font-size: 1.5em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.step-title {
  color: #0d2c54;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
  white-space: nowrap;
}
.step-dark .step-num,
.step-dark .step-title {
  color: #fff;
}

.step-desc {
  color: #333333;
  font-size: 0.85em;
  line-height: 1.4;
  white-space: nowrap;
}

.step-arrow {
  color: var(--secondary-color);
  font-size: 1.4em;
  font-weight: bold;
  user-select: none;
}

@media (max-width: 768px) {
  .step-container {
    flex-direction: column;
    gap: 10px;
  }
  .step-card {
    width: 100%;
    max-width: 350px;
  }
  .step-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }
}



/*========================================
教育ロードマップ
========================================*/
.edu__roadmap {
	max-width: var(--inner-width);
	width: 95%;
	margin: 3em auto;
}
.roadmap {
  display: flex;
  gap: 0;
  width: 100%;
  overflow-x: auto;
}

.roadmap .step-column {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
}

.roadmap .step-header {
  position: relative;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-weight: bold;
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%);
  padding-left: 10px;
}

/* 最初のヘッダーのみ左側のくぼみをなくす */
.roadmap .step-1 .step-header {
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
  padding-left: 0;
}

.roadmap .step-label {
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.roadmap .step-num {
  font-size: 1.4em;
  font-weight: 800;
}

/* カード本文エリア */
.roadmap .step-body {
  flex: 1;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
	border-right: solid 5px #fff;
}

.roadmap .period {
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 4px;
}

.roadmap .main-title {
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 12px;
}

.roadmap .image-area {
  text-align: center;
	max-width: 200px;
	margin: 0 auto 1em;
}

.roadmap .image-area img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}

.roadmap .description {
  font-size: 0.8em;
  line-height: 1.4;
  color: #333;
  font-weight: bold;
  margin-bottom: 16px;
}

.roadmap .check-list {
  list-style: none;
  font-size: 0.75em;
  color: #333;
  margin-bottom: 20px;
  flex: 1; /* 高さ揃え */
}

.roadmap .check-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.roadmap .check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  color: #fff;
  font-size: 8px;
  text-align: center;
  line-height: 13px;
}

.roadmap .bottom-box {
  border-radius: 8px;
  padding: 12px 8px;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}


/* ==========================================
   教育ロードマップ　カラー定義
   ========================================== */
.step-body > * {

}

/* STEP 01 - グリーン */
.roadmap .step-1 .step-header { background-color: #52c41a; }
.roadmap .step-1 .step-body { background-color: #f6ffed; }
.roadmap .step-1 .period, .step-1 .main-title { color: #237804; }
.roadmap .step-1 .check-list li::before { background-color: #52c41a; }
.roadmap .step-1 .bottom-box { background-color: #d9f7be; color: #237804; }

/* STEP 02 - スカイブルー */
.roadmap .step-2 .step-header { background-color: #36cfc9; }
.roadmap .step-2 .step-body { background-color: #e6fffb; }
.roadmap .step-2 .period, .step-2 .main-title { color: #006d75; }
.roadmap .step-2 .check-list li::before { background-color: #36cfc9; }
.roadmap .step-2 .bottom-box { background-color: #b5f5ec; color: #006d75; }

/* STEP 03 - ブルー */
.roadmap .step-3 .step-header { background-color: #40a9ff; }
.roadmap .step-3 .step-body { background-color: #e6f7ff; }
.roadmap .step-3 .period, .step-3 .main-title { color: #0050b3; }
.roadmap .step-3 .check-list li::before { background-color: #40a9ff; }
.roadmap .step-3 .bottom-box { background-color: #bae7ff; color: #0050b3; }

/* STEP 04 - パープル */
.roadmap .step-4 .step-header { background-color: #9254de; }
.roadmap .step-4 .step-body { background-color: #f9f0ff; }
.roadmap .step-4 .period, .step-4 .main-title { color: #391085; }
.roadmap .step-4 .check-list li::before { background-color: #9254de; }
.roadmap .step-4 .bottom-box { background-color: #efdbff; color: #391085; }

/* STEP 05 - ピンク */
.roadmap .step-5 .step-header { background-color: #f759ab; }
.roadmap .step-5 .step-body { background-color: #fff0f6; }
.roadmap .step-5 .period, .step-5 .main-title { color: #9e1068; }
.roadmap .step-5 .check-list li::before { background-color: #f759ab; }
.roadmap .step-5 .bottom-box { background-color: #ffd6e7; color: #9e1068; }

/* STEP 06 - オレンジ */
.roadmap .step-6 .step-header { background-color: #ffa940; }
.roadmap .step-6 .step-body { background-color: #fffbe6; }
.roadmap .step-6 .period, .step-6 .main-title { color: #d46b08; }
.roadmap .step-6 .check-list li::before { background-color: #ffa940; }
.roadmap .step-6 .bottom-box { background-color: #ffe58f; color: #d46b08; }

/* 
@media (max-width: 640px) {
  .roadmap {
    flex-direction: column;
    gap: 0px;
  }


  .step-header,
  .step-1 .step-header {
    clip-path: none;
    padding-left: 0;
    border-radius: 8px 8px 0 0;
  }


  .step-body {
    padding-bottom: 24px;
    clip-path: polygon(
      0% 0%, 
      100% 0%, 
      100% calc(100% - 15px), 
      50% 100%, 
      0% calc(100% - 15px)
    );
	  box-shadow: 0 5px 5px rgba(0,0,0,.3);
    border-radius: 0 0 8px 8px;
  }
}
 */

@media (max-width: 900px) {
  /* 親要素：横スクロールを許可し、スナップ機能を有効化 */
  .roadmap {
    flex-direction: row; /* 横並びを維持 */
    overflow-x: auto;   /* 横スクロールを有効にする */
    scroll-snap-type: x mandatory; /* スクロール時にピタッと止まる設定 */
    -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールをスムーズにする */
    
    gap: 8px;
    padding-bottom: 16px; /* スクロールバーとの間に少し隙間を空ける */
  }

  .roadmap .step-column {
    /* 画面幅に応じてカード幅を固定（80vw で画面の8割幅に見せる） */
    flex: 0 0 80vw;
    max-width: 240px;
    
    /* スクロールを止めた時にカードの先頭（左端）に合わせる */
    scroll-snap-align: start;
  }
}

/* ==========================================
   edu__support　サポート
   ========================================== */
.edu__support {
	display: flex;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #d8e8f8;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin: 1em auto 2em;
}

.edu__support .support-header {
	background-color: #e8f3fe;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	flex-shrink: 0;
}

.edu__support .support-header h2 {
	margin: 0;
	color: #103366;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

.edu__support .support-content {
	display: flex;
	flex: 1;
	justify-content: space-around;
	align-items: center;
	padding: 20px 10px;
}

/* 各項目 */
.edu__support .support-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 10px;
}

.edu__support .icon-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden; /* 円形からはみ出る部分を隠す */
	flex-shrink: 0;
}

.edu__support .icon-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 縦横比を崩さずに枠いっぱいに収める */
	display: block;
}

.edu__support .item-text {
	color: #1a202c;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
}

.edu__support .item-text span {
	font-size: 12px;
	font-weight: normal;
	display: block;
}

.edu__summary p {
	margin: 1em auto 0;
}

@media (max-width: 850px) {
	.edu__support {
		flex-direction: column;
	}
	.edu__support .support-header {
		padding: 16px;
	}
	.edu__support .support-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px 30px;
	}
}

/*==========================================================================================

04.働く環境

============================================================================================*/
.office-peek {
	width: 95%;
	max-width: 1200px;
	margin: 5em auto;
	
}

.office-peek__title {
	font-size: 24px;
	font-weight: bold;
	color: #222222;
	text-align: center;
	margin-bottom: 30px;
	position: relative;
}

.office-peek__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	width: 100%;
}

.office-peek__item {
	position: relative;
	background-color: #fff;
	border: solid 1px #e2edf4;
	aspect-ratio: 1 / 1.1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.office-peek__item > p {
	color: #222222;
	padding: 1em 1em;
}

.office-peek__item img {
	width: 100%;
	height: auto;
	display: block;
}
.office-peek__item.fit img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: cover;
	display: block;
}

/* オーバーレイ表示するテキストカード */
.office-peek__card {
	position: absolute;
	bottom: 20px;
	left: 12px;
	right: 12px;
	background-color: #ffffff;
	padding: 16px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.office-peek__card p {
	margin: 0;
	font-size: 15px;
	color: #222222;
	line-height: 1.5;
}

.office-movie__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
	margin: 3em auto;
}
.office-movie__grid iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

@media (max-width: 900px) {
	.office-peek__grid,
	.office-movie__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.office-peek__grid,
	.office-movie__grid {
		grid-template-columns: 1fr;
	}
	.office-peek__item {
		aspect-ratio: auto;
	}	
	
}


/*==========================================================================================

05.先輩の声

============================================================================================*/
.voice__intro {
	background-color: #f8fcfe;
	padding: 3em 0;
}
.voice__intro .inner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	width: 95%;
	max-width: var(--inner-width);
	margin: 0 auto;
}
.voice__intro h2.head_section {
	text-align: left;
}
.voice__intro h3 {
	margin: 1em auto;
}
.voice__intro .img_box {
	width: 32.5%;
}
.voice__intro .txt_box {
	width: 40%;
}
.voice__intro .txt_box p {
	color: var(--primary-color);
	margin-bottom: 2em;
}
.voice__intro .txt_box strong {
	font-size: 1.125em;
}
.voice__intro .txt_box a.btn {
	display: table;
	padding: 1.5rem 4.5rem 1.5rem 3rem;
	margin: 0;
}

@media screen and (max-width: 768px){
	.voice__intro h3 {
		margin: 0 auto;
	}	
	.voice__intro .img_box {
		width: 100%;
		order:1;
	}
	.voice__intro .txt_box {
		width: 100%;
		order: 2;
		padding: 0 2.5%;
	}	
	.voice__intro .txt_box h2.head_section {
		margin: 10px 0;
		padding: 0;
	}
	.voice__intro .txt_box a.btn {
		margin: 0 auto;
	}	
}

/* インタビューリスト */
.interview-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
	max-width: var(--inner-width);
	margin: 5em auto;
}
.interview-list .interview-list__header {
    grid-column: 1 / -1; /* 1列目から最後の列まで全幅で広げる */
    text-align: center;  /* 必要に応じて中央寄せ */
}
.interview-list .interview-card {
	background-color: #ffffff;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	padding: 24px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 2em;
}

/* 上部のコンテンツエリア */
.interview-list .interview-card__body {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

/* サムネイル画像（円形/角丸） */
.interview-list .interview-card__thumb {
	width: 130px;
	height: 130px;
	flex-shrink: 0;
	border-radius: 12px;
	overflow: hidden;
	background-color: #f0f0f0;
}

.interview-list .interview-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.interview-list .interview-card__info {
	flex: 1;
}
.interview-list .interview-card__role {
	font-size: 16px;
	font-weight: bold;
	color: #3182ce; /* 青色表記 */
	margin: 0 0 12px 0;
}
.interview-list .interview-card__text {
	font-size: 14px;
	color: #2d3748;
	line-height: 1.6;
	margin: 0 0 8px 0;
}

.interview-list .interview-card__author {
	font-size: 14px;
	color: #4a5568;
	margin: 0;
}

.interview-list .interview-card__link {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	font-weight: bold;
	color: #3182ce;
	text-decoration: none;
	align-self: flex-start;
	transition: opacity 0.2s;
}

.interview-list .interview-card__link:hover {
	opacity: 0.7;
}

@media (max-width: 768px) {
	.interview-list {
		grid-template-columns: 1fr;
	}
	.interview-list h2.head_section {
	  margin: 0 auto;
	}	
	
	.interview-list .interview-card {
		margin-bottom: 1em;
	}	
	.interview-list .interview-card__body {
		flex-direction: column;
	}
	.interview-list .interview-card__thumb {
		width: 100%;
		height: 180px;
	}
}




/*==========================================================================================

05-1.先輩の声　インタビュー

============================================================================================*/
.interview-card {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	width: 95%;
	max-width: 1000px;
	padding: 30px;
	margin: 0 auto 5em;
}

.interview-header {
	background-color: #f4f7fc;
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

@media (min-width: 600px) {
	.interview-header {
		flex-direction: row;
		align-items: center;
		gap: 28px;
	}
}

.profile-img-container {
	flex-shrink: 0;
	width: 100%;
	max-width: 240px;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin: 0 auto;
}

@media (min-width: 600px) {
	.profile-img-container {
		width: 220px;
		margin: 0;
	}
}

.profile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.interview-title {
	font-size: 1.1em;
	font-weight: bold;
	color: #0055b3;
	line-height: 1.5;
	margin-bottom: 16px;
}

@media (min-width: 600px) {
	.interview-title {
		font-size: 1.25em;
	}
}

.profile-name {
	text-align: right;
	font-size: 1.0em;
	font-weight: 500;
	color: #222222;
}
.profile-name strong {
	font-size: 1.125em;
	font-weight: 600;
	margin-right: 5px;
}

.qa-wrapper {
	background-color: #ffffff;
	color: #333;
	line-height: 1.6;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
}

.qa-item {
	padding: 16px 0;
}

.qa-item:not(:last-child) {
	border-bottom: 1px dashed #cbd5e1;
	margin-bottom: 8px;
}

.qa-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
}

.qa-row:last-child {
	margin-bottom: 0;
}

.badge {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 0.9em;
	color: #ffffff;
}

.badge-q {
	background-color: #5bc0de;
}

.badge-a {
	background-color: #f0ad4e;
}

.qa-text {
	font-size: 1.0em;
	line-height: 1.6;
	color: #333333;
	padding-top: 3px;
}

.question-text {
	font-weight: bold;
}

.answer-text {
	color: #333333;
}

.answer-text + .answer-text {
	margin-top: 6px;
}



/*==========================================================================================

06.強み

============================================================================================*/
.reason7 {
	
}
.strength-heading-wrap {
  display: inline-block;
	margin-bottom: 10px;
}

.strength-heading {
  position: relative;
  display: inline-block;
  background-color: #0b2545;
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: bold;
  padding: 15px 40px 15px 30px; 
  margin: 0;
  /* 右端を斜め（／）にする設定 */
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}

.strength-heading .num {
  color: #38bdf8; /* 数字のアクセントカラー */
  font-size: 2.4rem;
}
/*=============================================
.reason7
===============================================*/

.reason7 {
    padding: 50px 0;
    margin: 0 !important;
}

.reason7 .inner { margin-top: 30px !important; }


.reason7 .inner .flex_s_b {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    align-items: stretch !important; /* 高さを01〜04ですべて揃える */
    justify-content: flex-start !important;
}

.reason7 .inner .flex_s_b::before,
.reason7 .inner .flex_s_b::after {
    display: none !important;
}

.reason7 .box_1_4 {
    width: calc((100% - 72px) / 4) !important;
    max-width: calc((100% - 72px) / 4) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    border: solid 1px #e2edf4 !important;
    background-color: #fff !important;
	position: relative !important;
}

.reason7 .box_1_4 .txt_box a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    display: block !important;
	ursor: pointer;
}

.reason7 .box_1_4 .box {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}
.reason7 .box_1_4 .img_box,
.reason7 .box_1_4 .img {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.reason7 .box_1_4 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

.reason7 .box_1_4 .txt_box {
    background-color: #fff !important;
    position: relative !important;
    padding: 1em 1em 45px 1em !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important; /* 文字量が少なくてもカード下部まで広げる */
    margin: 0 !important;
}

.reason7 .box_1_4 .txt_box h3,
.reason7 .box_1_4 .txt_box p {
    margin-top: 0 !important;
}
.reason7 .box_1_4 .txt_box h3 .num {
	color: var(--secondary-color);
	margin-right: 10px;
}

/* 矢印アイコン（.btn）の位置をカード最下部に完全固定 */
.reason7 .box_1_4 .txt_box .btn {
    position: absolute !important;
    right: 15px !important;
    bottom: 15px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 25px !important;
    height: 25px !important;
    z-index: 1 !important;
}

@media screen and (max-width: 640px) {
	.reason7 {
		padding: 25px 0;
	}	
	.reason7 .inner { margin-top: 0 !important; }
	.reason7 .inner .flex_s_b {
		gap: 24px !important;
	}

	.reason7 .box_1_4 {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-width: 0 !important;
	} 
}




/*=============================================
.reason7 写真上のバッジ
===============================================*/
.reason7 .box .img-wrap {
  position: relative;
  width: 100%;
}

.reason7 .box .img-wrap img {
  width: 100%;
  display: block;
}
.reason7 .badge-circle {
  position: absolute;
  right: -5px;
  bottom: -10px;
  width: 85px;
  height: 85px;
  background: linear-gradient(135deg, #0b2545 0%, #2563eb 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  border: 2px solid #ffffff; /* 白いフチ（お好みで削除可能） */
  z-index: 2;
}

.reason7 .badge-circle span {
  font-size: 0.75em;
  line-height: 1.2;
}

.reason7 .badge-circle strong {
  font-size: 1.0em;
  line-height: 1.2;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .badge-circle {
    width: 75px;
    height: 75px;
    right: 8px;
    bottom: 8px;
  }
  .badge-circle span {
    font-size: 0.55rem;
  }
  .badge-circle strong {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 768px) {
  .strength-heading {
    font-size: 1.5rem;
    padding: 12px 30px 12px 20px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  }
}


/* ニュース */
.pickup-news {
  width: 95%;
  max-width: var(--inner-width, 1000px);
  margin: 5em auto;
}
.news-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* ニュースカード全体 */
.news-list .news-card {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 30px;
	border: 1px solid #e0ebf5;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* ==========================================
   スライダー親枠
========================================== */
.news-media {
  flex-shrink: 0;
  width: 260px;
  position: relative !important;
  overflow: visible !important; /* ドットを枠外に表示させる */
  padding-bottom: 24px !important; /* 写真下にドット用の空きスペースを作る */
	margin-right: 30px;
}

/* スライダー画像本体の枠（ここで高さと角丸を決定） */
.news-media .news-slider {
  width: 100%;
  height: auto;
  border-radius: 12px !important;
  background-color: #f5f5f5;
  position: relative !important;
}

/* Slickトラック・スライドの高さ固定 */
.news-media .slick-list,
.news-media .slick-track {
  width: 100%;
  height: auto;
	aspect-ratio: 70 / 43;

}

/* フェード切り替えの重なり位置制御 */
.news-media .slick-slide {
  width: 100%;
  height: auto;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  z-index: 1 !important;
  transition: opacity 0.6s linear !important;
}

.news-media .slick-slide.slick-active {
  opacity: 1 !important;
  z-index: 2 !important;
}

.news-media .slick-slide > div,
.news-media .news-slider img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ==========================================
   ドットインジケーター
========================================== */
.news-media .slick-dots {
  position: absolute !important;
  bottom: -10px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 16px !important;
}

.news-media .slick-dots li {
  margin: 0 4px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

.news-media .slick-dots li button {
  font-size: 0 !important;
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: #c0d8e8 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.news-media .slick-dots li button:before {
  display: none !important;
}

/* 選択中のドット */
.news-media .slick-dots li.slick-active button {
  background-color: #0088cc !important;
  width: 20px !important;
  border-radius: 4px !important;
}


/* ==========================================
   テキスト領域
========================================== */
.news-content {
  flex: 1;
}
.news-title {
  font-size: 18px;
  color: #0088cc;
  margin-bottom: 12px;
  font-weight: bold;
  line-height: 1.4;
}
.no-media .news-title {
	text-align: center;
}

.news-text {
  color: #002b55;
  line-height: 1.6;
  margin-bottom: 10px;
}
.news-list .news-card .btn_box {
	width: 100%;
}
.news-list .news-card a.btn {
	margin: 1em 0 0 auto;
	width: 30%;
}
.news-list .news-card a.btn.btn02:hover {
	background-color: #149ce3;
	color: #fff;
}

@media (max-width: 768px) {
  .news-list .news-card {
    flex-direction: column;
    padding: 20px;
  }
  .news-media {
    width: 100%;
    height: auto;
  }
	.news-list .news-card a.btn {
		width: 50%;
		margin: 1em auto;
	}
}


/*==========================================================================================

07.よくある質問

============================================================================================*/

.faq-section {
	width: 95%;
	max-width: 1000px;
	margin: 5em auto;
}


/* ==========================================
   カテゴリーから探すエリア (category-area)
========================================== */

/* セクションタイトル */
.category-area .section-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #0b3252;
  margin: 0;
}

.category-area .section-subtitle {
  text-align: center;
  font-size: 14px;
  color: #2da1e7;
  font-weight: bold;
  margin: 5px 0 30px;
}

/* カテゴリーグリッド */
.category-area .category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

/* カテゴリーカード（ボタン） */
.category-area .category-card {
  background-color: #edf7fd;
  border: none;
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-area .category-card:hover,
.category-area .category-card.active {
  background-color: #d8effc;
  transform: translateY(-2px);
}

.category-area .card-title {
  font-size: 18px;
  font-weight: bold;
  color: #0b3252;
  margin-bottom: 8px;
}

.category-area .card-link {
  font-size: 13px;
  color: #2da1e7;
  font-weight: bold;
}

/* ==========================================
   バナー
========================================== */
.banner-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* カード共通スタイル */
.banner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 16px;
    text-decoration: none;
    color: #333333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box;

	text-decoration: none !important;
}

/* ホバー時 */
.banner-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0, 115, 230, 0.1);
    border-color: #0073e6;
}

/* 丸型アイコン */
.icon-circle {
    width: 64px;
    height: 64px;
    border: 2px solid #0073e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #0073e6;
    font-size: 26px;
    background-color: #f8fbff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.banner-card:hover .icon-circle {
    background-color: #0073e6;
    color: #ffffff;
}

.banner-card h2 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 12px 0;
    text-align: center;
    color: #1a202c;
}

.banner-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
    text-align: center;
}

@media (max-width: 800px) {
    .banner-container {
        flex-wrap: wrap;
    }
    .banner-card {
        flex: 0 0 calc(50% - 10px);
    }
}
@media (max-width: 480px) {
    .banner-container {
        flex-direction: column;
        gap: 16px;
    }
    .banner-card {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ==========================================
   よくある質問エリア (faq-area)
========================================== */

/* セクションタイトル */
.faq-area .section-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #0b3252;
  margin: 0;
}

.faq-area .section-subtitle {
  text-align: center;
  font-size: 14px;
  color: #2da1e7;
  font-weight: bold;
  margin: 5px 0 30px;
}

/* FAQコンテンツ (タブ切替) */
.faq-area .faq-content {
  display: none;
}

.faq-area .faq-content.active {
  display: block;
}

/* 見出し */
.faq-area .category-heading {
  font-size: 22px;
  font-weight: bold;
  color: #0b3252;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.faq-area .category-heading::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #1bb0ec;
  border-radius: 50%;
  margin-right: 12px;
}

/* アコーディオン要素 */
.faq-area .faq-item {
  border-bottom: 1px solid #e0e0e0;
}

.faq-area .title {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 50px 20px 0;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #0b3252;
}

.faq-area .q-number {
  font-size: 20px;
  color: #0b3252;
  margin-right: 15px;
}

.faq-area .q-text {
  flex: 1;
}

/* プラス・マイナス アイコン */
.faq-area .icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background-color: #edf7fd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-area .icon::before,
.faq-area .icon::after {
  content: "";
  position: absolute;
  background-color: #2da1e7;
  transition: all 0.3s ease;
}

.faq-area .icon::before {
  width: 14px;
  height: 2px;
}

.faq-area .icon::after {
  width: 2px;
  height: 14px;
}

/* 開いたときのアイコン（プラス→マイナス変化） */
.faq-area .title.close .icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* アコーディオン本文 */
.faq-area .box {
  display: none;
  padding: 0 50px 25px 0;
  line-height: 1.8;
  color: #4a4a4a;
  font-size: 16px;
}

.faq-area .box p {
  margin: 0;
	text-align: left;
}
.faq-area .box img.w50 {
	border: solid 1px #ccc;
	display: block;
	margin: 20px auto;
	width: 50%;
}

@media (max-width: 768px) {
  .category-area .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.faq__summary {
	margin: 3em auto 0;
	padding: 2em 3em 1em;
	background-color: #ffffff;
	border: 1px solid #d8e8f8;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.faq__summary p {
	margin: 1em auto 2em;	
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

@media (max-width: 768px) {
  .job-grid {
    grid-template-columns: 1fr;
  }
}




/*==========================================================================================

07-1.よくある質問　「今の給与」保障します！　転職希望の経験者の方へ guarantee

============================================================================================*/
.title_faq_special {
    background-color: #1e3a8a;
    color: #ffffff;
    padding: 2.5em 1.5em;
    text-align: center;
	margin-top: 100px;
}

.title_faq_special h1 {
    display: flex;
    flex-direction: column; /* 上下に並べる */
    align-items: center;    /* 左右中央に配置 */
    text-align: center;	
    font-size: 1.75em;
    font-weight: 700;
    margin: 0 0 0.75em 0;
    letter-spacing: -0.02em;
}
.title_faq_special h1::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 36px;
    margin-bottom: 12px;
    line-height: 1;
}
.title_faq_special h1.guarantee::before {
    content: "\f15c";
}
.title_faq_special h1.brag::before {
    content: "\f1ad";
}
.title_faq_special h1.job-hunting::before {
    content: "\f508";
}
.title_faq_special h1.applicants-voices::before {
    content: "\f086";
}
.title_faq_special h1.pickup-news {
    max-width: 100%;
}
.title_faq_special h1.pickup-news::before {
    content: "\f1ea";
}

.title_faq_special__text {
    font-size: 1em;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .title_faq_special {
        padding: 3em 2em;
    }
    .title_faq_special__title {
        font-size: 2.25em;
    }
}

/* ==========================================
   給与比較テーブル
========================================== */
.table-scroll-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2rem; 
}
.salary-comparison-table {
  width: 90%;
	min-width: 650px;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 1.0em;
	table-layout: fixed;
	margin: 1em auto;
}

/* 1列目、2列目、3列目の幅を上下の表で共通化する */
.salary-comparison-table col:nth-child(1) { width: 30%; }
.salary-comparison-table col:nth-child(2) { width: 30%; }
.salary-comparison-table col:nth-child(3) { width: 40%; }

.salary-comparison-table th,
.salary-comparison-table td {
  padding: 12px 15px;
  border: 1px solid #e2e8f0;
  text-align: left;
}

.salary-comparison-table th {
  background: #2b6cb0;
  color: #ffffff;
  font-weight: bold;
}

/* 対象・対象外のタグバッジ */
.tag-target {
  display: inline-block;
  background: #c6f6d5;
  color: #22543d;
  font-size: 0.75em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  margin-right: 5px;
}

.tag-exclude {
  display: inline-block;
  background: #fed7d7;
  color: #742a2a;
  font-size: 0.75em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  margin-right: 5px;
}


/* ==========================================
   不満の声
========================================== */
.kitami-voice-section {
    background-color: #f8fafc;
    padding: 3em 1em;
    font-family: inherit;
    color: #1e293b;
}

.kitami-voice-container {
	width: 95%;
    max-width: var(--inner-narrow);
    margin: 0 auto;
}

.kitami-section-header {
    margin-bottom: 2em;
    text-align: center;
}

.kitami-section-lead {
    font-size: 1.5em;
    font-weight: 700;
    color: #334155;
    line-height: 1.5;
}

.kitami-voice-item {
    margin-bottom: 2.5em;
}
.chat-bubble {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1rem;
}
.chat-avatar {
    flex-shrink: 0;
    width: 2.5em;
    height: 2.5em;
    background-color: #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-text {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.875em 1.25em;
    border-radius: 0 1rem 1rem 1rem;
    font-size: 1.0em;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    line-height: 1.5;
    position: relative;
    max-width: calc(100% - 3.375rem);
}

/* 北見事務所の回答テキスト部分 */
.kitami-answer {
    padding-left: 3.375em; /* アイコンの幅分インデント */
    font-size: 1.0em;
    color: #334155;
    line-height: 1.7;
}

.kitami-answer p {
    margin: 0 0 0.5rem 0;
}

.kitami-answer p:last-child {
    margin-bottom: 0;
}

/* レスポンシブ調整 */
@media (max-width: 640px) {
    .kitami-voice-section {
        padding: 2em 1em;
    }
    .kitami-answer {
        padding-left: 0;
        margin-top: 0.75rem;
        background: #ffffff;
        padding: 1em;
        border-radius: 8px;
        border-left: 4px solid #1e3a8a;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    }
}






/*==========================================================================================

07-2.よくある質問　就活相談ページ job-hunting

============================================================================================*/
.section_bg_light {
	padding: 80px 0;
	background: #f8fafc;
}
.soudan__video {
	padding: 80px 0;
}
.soudan__video .inner {
	max-width: var(--inner-narrow) !important;
	width: 95%;
	margin: 0 auto;
}
.soudan__video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.soudan__document {
	padding: 80px 0;
}

.job-hunting-pdf {
  padding: 32px 20px 40px;
  text-align: center;
  background: #fff;
}
.job-hunting-pdf__text {
  margin: 0 0 18px;
  color: #000;
  font-size: 15px;
  line-height: 1.8;
}
.job-hunting-pdf__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  padding: 16px 32px;
  background: #063b70;
  border: 2px solid #063b70;
  border-radius: 6px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(6, 59, 112, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}

.job-hunting-pdf__button:hover {
  background: #075092;
  border-color: #075092;
  color: #fff !important;
  transform: translateY(-2px);
}

.job-hunting-pdf__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 4px;
  color: #063b70;
  font-size: 12px;
  font-weight: 800;
}

.job-hunting-pdf__arrow {
  margin-left: 4px;
  font-size: 20px;
}

@media (max-width: 767px) {
  .job-hunting-pdf {
    padding: 24px 16px 30px;
  }

  .job-hunting-pdf__button {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 15px;
  }
}


.soudan__document .swiper-slide {
	border:1px solid #e1e6eb;
}

.soudan__faq .inner {
	width: 95%;
	max-width: var(--inner-narrow) !important;
}
.soudan__faq .soudan__faq-area .title {
	background-color: #fafbfc;
	border:1px solid #e1e6eb;
	padding: 20px 20px 20px 65px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	font-weight: bold;
	font-size: 18px;
	position: relative;
}
.soudan__faq .soudan__faq-area .box {
	border:1px solid #e1e6eb;
	padding: 30px 30px;
	line-height: 1.8;
	color: #4a4a4a;
	font-size: 15px;
	display: block;
	background-color: #fff;
}
.soudan__faq .soudan__faq-area .box img.w50 {
	border: solid 1px #ccc;
	display: block;
	margin: 20px auto;
	width: 50%;
}
.soudan__faq .soudan__faq-area .q-number {
	font-size: 20px;
	color: #0b3252;
	margin-right: 15px;
	background-color: #edf7fd;
	border-radius: 50%;	
	width: 36px;
	height: 36px;	
	text-align: center;
	display: block;
	position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
}

.soudan__research {
	padding: 80px 0;
}
.soudan__research .inner {
	max-width: 1000px !important;
}
.soudan-research-card {
	display: flex;
	flex-direction: column;
	min-height: 280px;
	padding: 28px;
	background: #fff;
	border: 1px solid #dbe5ec;
	width: 48%;
	box-shadow: 0 4px 14px rgba(6, 59, 112, .035);
	margin-bottom: 2em;
}
.soudan-research-card._w100 {
	width: 100%;
}

.soudan-research-content h3 {
  margin: 0 0 15px;
  font-size: 1.25em;
}
.soudan-research-content img {
  width: 100%; height: auto;
}
/* 3. Q&Aボックス（カードデザイン） */
.soudan__faq .faq-box {
    background: #fff;
    border: 1px solid #e1e6eb;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 30px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.soudan__faq .faq-box:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 質問エリア */
.soudan__faq .faq-question {
    display: flex;
    align-items: center;
    background: #fafbfc;
    padding: 20px 24px;
    border-bottom: 1px solid #e1e6eb;
}
.soudan__faq .faq-question .badge-q {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #0056b3; /* サイトのメインカラーに合わせて調整 */
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    font-size: 16px;
    flex-shrink: 0;
    margin-right: 16px;
}
.soudan__faq .faq-question h2 {
    font-size: 17px;
    color: #222;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

/* 回答エリア */
.soudan__faq .faq-answer {
    padding: 30px 24px;
    color: #444;
    font-size: 15px;
    line-height: 1.8;
}
.soudan__faq .faq-answer p {
    margin-bottom: 1.2em;
}
.soudan__faq .faq-answer p:last-child {
    margin-bottom: 0;
}
.soudan__faq .faq-answer a {
    color: #0056b3;
    text-decoration: underline;
}
.soudan__faq .faq-answer a:hover {
    color: #003d82;
}

/* 画像中央配置・レスポンシブ対応 */
.soudan__faq .faq-img-wrap {
    text-align: center;
    margin-top: 20px;
}
.soudan__faq .faq-img-wrap img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
    border-radius: 4px;
}

/*==========================================================================================

07-4.名古屋の社会保険労務士法人北見事務所には、なぜ応募者が集まるのか？ applicants-voices

============================================================================================*/
body.category-applicants-voices main {
	background-color: #f3f7f9;
}
.applicants-voice-list {
	background-color: #f3f7f9;
	padding: 50px 0;
}


.applicants-voice-list .inner,
.applicants-voices .inner {
	max-width: 1000px !important;
}

.applicants-voice-list .tbl_list {
	margin: 1em auto;
	border-collapse: separate;
	border-spacing: 0 15px;	
}
.applicants-voice-list .tbl_list tr {
	background-color: #fff;
	border: solid 1px #e1e6e9;
	margin: 1em 0;
}
.applicants-voice-list th,
.applicants-voice-list td {
	padding: 1em 1em;
}
.applicants-voice-list th{
	width: 25%;
}


.applicants-voices .inner p {
	color: #333;
	line-height: 2.0;
	margin-bottom: 1em;
}
.applicants-voices .inner h2.title {
	color: var(--primary-color);
	font-size: 2.0em;
	margin: 2em auto 1em;
}
.applicants-voices .inner h2.title {
    position: relative;
    margin: 55px 0 30px;
    padding: 0 0 14px 18px;
    color: #263f4d;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    border-bottom: 1px solid #dfe5e8;
}

.applicants-voices .inner h2.title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: calc(100% - 18px);
    background: #8b6f57;
    border-radius: 2px;
}
.applicants-voices .inner h3 {
	background-color: #f4f7fc;
	border-radius: 12px;
	padding: 24px;
	margin: 2em auto 1em;
}
@media screen and (max-width: 768px){
	.applicants-voice-list {
		margin: 0 !important;
		padding: 20px 0;
	}
}

/*==========================================================================================

08.採用情報

============================================================================================*/
.sld__inner .recruit__intro {
	padding-left: 2em;
}
.sld__inner .recruit__intro .head_recruit_intro {
	font-size: 1.5em;
	font-weight: 600;
}


/* カードスタイル */
.job-card {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-top: 6px solid #1ba0e2; /* カード上部の青線 */
  border-radius: 12px;
  padding: 1.5em 1.5em;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* 番号と職種名 */
.job-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.job-number {
  color: #1ba0e2;
  font-size: 20px;
  font-weight: bold;
}

.job-title {
  font-size: 18px;
  font-weight: bold;
  color: #0b2545;
}

/* 雇用形態タグ */
.job-type {
  display: inline-block;
  color: #1ba0e2;
  font-size: .8em;
  font-weight: bold;
}

/* 詳細エリア（給与・特徴） */
.job-details {
  margin-bottom: 0;
}

.detail-row {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	font-size: 14px;
}

.detail-row dt {
	font-weight: bold;
	color: #0b2545;
	width: 4em;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 0;
}

.detail-row dd {
  font-weight: bold;
  color: #0b2545;
	width: calc(100% - 4em);
	margin-left: 6rem;
}

/* 詳細の特記・文字サイズ */
.detail-row:first-child dd {
  font-size: 16px;
}

/* ボタン */
a.job-btn {
  display: inline-block;
  background-color: #1ba0e2;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 24px;
  text-align: center;
  width: fit-content;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

a.job-btn:hover {
  background-color: #1483bc;
  transform: translateY(-2px);
}

@media screen and (max-width: 768px){
	.sld__inner .recruit__intro {
		width: 100%;
		padding: 1em 0;
	}
}





/*==========================================================================================

08-1.採用情報　詳細ページ

============================================================================================*/

/* =========================================================
  recruitment-video-section
========================================================= */
.recruitment-video-section {
  padding: 60px 20px;
  background-color: #f8fafc;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", MeiRyo, sans-serif;
  color: #333333;
  margin: 1em auto 3em;
}

.recruitment-container {
  max-width: var(--inner-width, 1000px);
  margin: 0 auto;
}

.recruitment-container h3 {
  font-size: 2.0em;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.45;
  margin: 0 0 24px 0;
  text-align: center;
}

.recruitment-container h3 .marker {
  background: linear-gradient(transparent 60%, #fef08a 60%);
  padding: 0 2px;
}

/* ── 全体レイアウト（Flexbox） ── */
.recruitment-wrapper {
  display: flex;
  flex-wrap: wrap; /* 子要素を折り返す（動画とリストを横並びにするため） */
  gap: 24px;
  background: #ffffff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  align-items: flex-start;
	margin: 2em auto;
}

/* --- 左カラム：動画部分 --- */
.video-column {
	flex: 1;
	min-width: 280px;
	max-width: 560px;
	margin: 0 auto;	
	
}

/* アスペクト比16:9を保持 */
.video-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- 右カラム：メッセージ（特長リスト） --- */
.info-column {
  flex: 1.2;
  min-width: 280px;
}
.info-heading {
  font-size: 1.15em;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  font-size: 1em;
  margin-bottom: 12px;
  line-height: 1.6;
}

.feature-list li:last-child {
  margin-bottom: 0;
}

.feature-list li strong {
  background-color: #005a9c;
  color: #fff;
  font-size: .95em;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: bold;
  margin-right: .5em;
  display: inline-block;
}

/* ── アコーディオン（recruitment-wrapper直下・幅100%） ── */
.video-accordion {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  border-top: 1px solid #edf2f7;
  padding-top: 20px;
  margin-top: 8px; /* 上の動画・リストとの余白 */
}

.video-accordion summary {
  list-style: none; /* デフォルトの矢印を消す */
  cursor: pointer;
  outline: none;
  background-color: #f0f4f8;
  color: #2b6cb0;
  font-weight: bold;
  padding: 12px 16px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.video-accordion summary:hover {
  background-color: #e2e8f0;
  color: #1a365d;
}

/* Safari向けのデフォルト矢印非表示 */
.video-accordion summary::-webkit-details-marker {
  display: none;
}

/* 開閉用のカスタムアイコン */
.video-accordion summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1;
  transition: transform 0.2s ease;
}

.video-accordion[open] summary::after {
  content: "-";
}

/* 展開されるコンテンツエリア */
.video-accordion__content {
  margin-top: 12px;
  padding: 14px;
  background-color: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9em;
  line-height: 1.8;
  color: #4a5568;
	max-height: 250px; 
  overflow-y: auto;
}
.video-accordion__content p {
  margin-bottom: 1em;
}



/* =========================================================
.job-detail
========================================================= */
.job-detail {
	width: 95%;
	max-width: 1000px;
	box-sizing: border-box;
	margin: 1em auto;
}


/* 導入エリア（画像左 ＋ テキスト右） */
.job-detail__intro {
  display: flex;
  align-items: center;
  gap: 24px;
  background-color: #f4f8fa;
  padding: 24px;
  margin-bottom: 32px;
  border-radius: 0 8px 8px 0;
}

.job-detail__intro-image {
  flex-shrink: 0;
  width: 240px;
}

.job-detail__intro-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.job-detail__intro-content {
  flex: 1;
}

.job-detail__intro-title {
  font-size: 1.25em;
  font-weight: bold;
  color: #005a9c;
  line-height: 1.6;
  margin: 0;
}

/* 特徴カード */
.job-detail__feature-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
}
.job-detail__feature-card hr {
	border: solid .5px #ccc;
	margin: 20px auto;
}

.job-detail__feature-title {
  font-size: 1.125em;
  color: #333;
  margin-top: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.job-detail__badge {
  background-color: #005a9c;
  color: #fff;
  font-size: .8em;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: bold;
}
.job-detail__table-wrapper {
	margin: 3em auto;
}
.job-detail__section-title {
	padding-left: 1em;
	border-left: solid 5px var(--secondary-color);
}
/* 募集要項テーブル */
.job-detail__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  margin-bottom: 32px;
}

.job-detail__table th,
.job-detail__table td {
  border: 1px solid #ddd;
  padding: 12px 16px;
  text-align: left;
}

.job-detail__table th {
  background-color: #f7f9fa;
  width: 25%;
  font-weight: bold;
  white-space: nowrap;
}

/* =========================================================
  初任給シミュレーション
========================================================= */

.job-detail__simulation {
	max-width: var(--inner-narrow);
  background-color: #fdfbf7;
  border: 2px solid #e6a100;
  border-radius: 8px;
  padding: 24px;
  margin: 32px auto;
  box-sizing: border-box;
  text-align: center; /* 全体の中央寄せ */
}

.job-detail__simulation-title {
  text-align: center;
  font-size: 1.125em;
  font-weight: bold;
  color: #8a6200;
  margin: 0 0 8px 0;
}

.job-detail__simulation-headline {
  text-align: center;
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.job-detail__price-highlight {
  color: #d93025;
  font-size: 1.75em;
  font-weight: bold;
  margin: 0 4px;
}

.job-detail__simulation-body {
  width: 100%;
  margin: 0 auto;
}

/* 内訳テーブル本体：左右中央に配置 */
.job-detail__simulation-table {
  width: 100%;
  max-width: 420px; /* テーブルの最大幅 */
  margin: 0 auto !important; /* 強制的に中央配置 */
  border-collapse: collapse;
  border: none !important;
  background: transparent !important;
}

.job-detail__simulation-table th,
.job-detail__simulation-table td {
  padding: 8px 4px;
  border: none !important;
  background: transparent !important;
  font-size: 1em;
  box-sizing: border-box;
}

/* 左列（項目名）：左揃え */
.job-detail__simulation-table th {
  text-align: left !important;
  font-weight: normal;
  color: #333;
}

/* 右列（金額）：右揃え */
.job-detail__simulation-table td {
  text-align: right !important;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

/* 所定内賃金の打ち消し線風仕切り */
.job-detail__simulation-subtotal th,
.job-detail__simulation-subtotal td {
  border-bottom: 1px dashed #ccc !important;
  padding-bottom: 12px;
}

/* 総支給額（強調行） */
.job-detail__simulation-grandtotal th,
.job-detail__simulation-grandtotal td {
  padding-top: 16px;
  font-size: 1.25em;
  font-weight: bold;
  color: #d93025;
}

.job-detail__simulation-grandtotal td {
  font-size: 1.4em;
}

/* 注記 */
.job-detail__simulation-notes {
  font-size: 0.85em;
  color: #666;
  margin: 16px auto 0;
  line-height: 1.6;
  text-align: center;
}

/* スマホ調整 */
@media (max-width: 768px) {
	.job-detail__simulation {
	padding: 16px;
	}

	.job-detail__simulation-table th,
	.job-detail__simulation-table td {
	font-size: 0.9rem;
	}

	.job-detail__simulation-grandtotal th,
	.job-detail__simulation-grandtotal td {
	font-size: 1.1rem;
	}
}

/* 注意書きボックス */
.job-detail__notice {
  background: #fff8f8;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 32px;
}

.notice-title {
  color: #721c24;
  margin-top: 0;
  margin-bottom: 12px;
}

.btn-sub-link {
  display: inline-block;
  background-color: #ffffff;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 12px;
}

.btn-sub-link:hover {
  background-color: #f5c6cb;
}

/* =========================================================
  CTAエリア（btn btn01）
========================================================= */

.job-detail__cta {
  text-align: center;
  margin: 40px auto 60px;
  padding: 0 16px;
}

/* btn btn01 を適用したボタンのスタイル調整 */
.job-detail__btn-entry {
  display: inline-block;
  text-decoration: none;
  padding: 1em 2em !important;
  max-width: 480px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
	margin: 0 auto;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .job-detail__cta {
    margin: 28px auto;
  }
  
  .job-detail__btn-entry {
    padding: 14px 20px;
  }
}

/* レスポンシブ対応（スマホ画面） */
@media (max-width: 768px) {
  .job-detail__intro {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  
  .job-detail__intro-image {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 12px;
  }

  .job-detail__intro-title {
    font-size: 1.15rem;
  }

  .job-detail__table th {
    width: 30%;
    white-space: normal;
  }
}


/*==========================================================================================

07-3.よくある質問　北見事務所のナンバーワン（自慢話） brag

============================================================================================*/
.brag__number {
	padding: 5em 0;
}
.brag__number .inner_narrow {
	font-size: 1.25em;
	color: #333;
	line-height: 1.8;
}
.brag__number .inner_narrow ol {
  list-style: none;
  counter-reset: number;
	margin: 1em 0;
}
.brag__number .inner_narrow li {
  position: relative;
  padding-left: 2.0em;
	margin: 5px 0;
}
.brag__number .inner_narrow li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  top: 0; left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
	background-color: var(--secondary-color);
	color: #fff;
  font-size: 1em;
	font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

@media screen and (max-width: 640px){
	.about__number .box_number.w24 {
		width: 48%;
		margin-bottom: 1em;
	}
}

.brag__number .number_one {
	width: 100%;
	margin: 50px auto 0;
}
.brag__number .number_one h3 {
	background-color: #fafbfc;
	border:1px solid #e1e6eb;
	color: var(--primary-color);
	padding: 20px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	font-weight: bold;
	font-size: 20px;
	position: relative;
}
.brag__number .number_one .txt_box {
	border:1px solid #e1e6eb;
	padding: 30px 30px;
	line-height: 1.8;
	color: #4a4a4a;
	font-size: 15px;
	display: block;
	background-color: #fff;
}
.brag__number .number_one .txt_box li {
  position: relative;
  padding-left: 2.0em; padding-bottom: 15px;
	margin: 10px 0;
	border-bottom:dotted 2px #e1e6eb;
}
.brag__number .number_one .txt_box li:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}
.brag__number .number_one .txt_box li::before {
	content: "";
	background-image: url("https://sharousi-kyuujin.com/wps/wp-content/themes/kitami/images/faq/icon_check.png");
	background-size: cover;
	position: absolute;
	top: 3px; left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--secondary-color);
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}
.brag__number .number_one .txt_box li strong {
	font-size: 1.125em;
}


/*==========================================================================================

09.応募フォーム

============================================================================================*/
.entry__container {
	width: 95%;
	max-width: var(--inner-width);
	margin: 0 auto;
}

/* 2カラムレイアウト設定 (Flexbox) */
.layout-2col.layout-2col {
  display: flex;
  flex-direction: row-reverse; /* ★ここを追加！子要素の並び順を反転（右から順に配置＝サイドバーが左に配置） */
  gap: 30px; /* メインとサイドバーの間隔 */
  margin-top: 30px;
  margin-bottom: 30px;
	flex-wrap: wrap;
}

.layout-2col .main-content {
  flex: 1; /* 残りのスペースをすべて */
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */
}

.layout-2col .sidebar {
	width: 300px;
	background-color: #eff9fe;
	color: var(--primary-color);	
	padding: 25px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	height: fit-content; /* 中身に合わせた高さにする */
}
.layout-2col .sidebar h3 {
	font-size: 1.25em;
}
.layout-2col .sidebar ul li {
	width: 100%;
	margin: 0 0 1em;
}

@media (max-width: 768px) {
      .layout-2col {
        flex-direction: column; /* スマホでは縦並びに変更 */
      }

      .layout-2col .sidebar {
        width: 100%; /* サイドバーを全幅にする */
		  order: 1;
      }
	.layout-2col .main-content {
		order: 2;
	}
}


.entry__intro {
	margin: 3em auto 0;
	padding: 2em 3em 1em;
	background-color: #ffffff;
	border: 1px solid #d8e8f8;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.entry__intro p {
	margin: 1em auto 2em;	
}
.entry__form {
	margin: 5em auto;
}


.entry__container h3 {
	font-size: 1.25em;
	font-weight: 600;
	color: var(--primary-color);
	line-height: 1;
	padding: 10px;
	margin-bottom: 0px;
	width: 100%;
}


.required {
  color: #e74c3c;
  font-size: 12px;
  margin-left: 4px;
}

.required_note {
  color: #e74c3c;
  font-size: 12px;
}

/* フォームテーブル設定 */
.tbl_entry {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  border-top: 1px solid #d2e2eb;
}

.tbl_entry th,
.tbl_entry td {
  padding: 20px 20px;
  border-bottom: 1px solid #d2e2eb;
  text-align: left;
  vertical-align: middle;
}

.tbl_entry th {
  width: 30%;
  /* background-color: #f4f6f8; */
  font-weight: bold;
  font-size: 15px;
}

.tbl_entry td {
  width: 70%;
  background-color: #fff;
}

.tbl_entry th.w100 {
  border-bottom: none;
}
.tbl_entry td.w100 {
  padding-top: 0;
}
.tbl_entry.note {
	border: none;
}
.tbl_entry.note td {
	background-color: #eff9fe;
	border: none;
}
.tbl_entry_end {
	width: 100%;
}
.tbl_entry_end td {
  padding: 16px 20px;
  text-align: center;
  vertical-align: middle;
}



/* フォーム部品の共通設定 */
.tbl_entry input[type="text"],
.tbl_entry input[type="email"],
.tbl_entry input[type="tel"],
.tbl_entry input[type="date"],
.tbl_entry select,
.tbl_entry textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
  color: #333;
  background-color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tbl_entry input:focus,
.tbl_entry select:focus,
.tbl_entry textarea:focus {
  border-color: #0066cc;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 102, 204, 0.3);
}

.tbl_entry textarea {
  resize: vertical;
}

/* 送信ボタンエリア */
.btn_area {
  text-align: center;
}

.wpcf7-form-control.wpcf7-submit {
  display: inline-block;
  width: 200px;
  padding: 14px 0;
  background-color: #0066cc;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.wpcf7-form-control.wpcf7-submit:hover {
  background-color: #004b99;
}

/* スマホ対応（レスポンシブデザイン） */
@media screen and (max-width: 600px) {
  .form_container {
    padding: 20px 15px;
  }

  .tbl_entry,
  .tbl_entry tbody,
  .tbl_entry tr,
  .tbl_entry th,
  .tbl_entry td {
    display: block;
    width: 100%;
  }

  .tbl_entry th {
    border-bottom: none;
    padding-bottom: 5px;
    background-color: transparent;
  }

  .tbl_entry td {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .btn_submit {
    width: 100%;
  }
}


.tbl_entry .hissu,
.tbl_entry .ninni {
	color: #fff;
	font-size: .9em;
	padding: 5px 5px;
	border-radius: 2px;
	margin: 0 7px;
	white-space: nowrap;
}
.tbl_entry .hissu {
	background-color: #E75211;
}
.tbl_entry .ninni {
	background-color: var(--secondary-color);
}

.tbl_entry .remarks {
	border-top: solid 1px #ccc;
	padding-top: 2em;
}




.tbl_entry .w100 {
	width: 100% !important;
}
.tbl_entry .w50 {
	width: 50% !important;
}
.tbl_entry .w30 {
	width: 30% !important;
}
.tbl_entry .w15 {
	width: 15% !important;
}





/*==========================================================================================

募集要項 .job_description

============================================================================================*/
.job_description {
	padding: 0 0 80px;	
}
.job_description .inner {
	max-width: 900px !important;
}
.job_description .tbl_job {
	width: 100%;
}
.job_description th {
	border-bottom: solid 1px #E95517;
	padding: 1em 1em;
	width: 20%;
	vertical-align: top;
	text-align: left;
}
.job_description td {
	border-bottom: solid 1px #ccc;
	padding: 1em 1em;
}
.job_description td ul {
	margin: 1em 1em 0;
}
.job_description td ul li {
	list-style: disc;
	list-style-position: outside;
}


/*==========================================================================================

お知らせ news

============================================================================================*/

section.news {
	padding: 0 0 6em !important;
}
section.news h1.title {
	background-color: antiquewhite;
	padding: 0 1em;
}
section.news p {
	padding: 1em 1em 0;
	line-height: 2;
}

.wrap_post_menu {
	margin: 3em auto;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.wrap_post_menu li {
	width: calc(100% / 3);
	border: solid 1px #C9D4E3;
	padding: 1em 1em;
}
.wrap_post_menu li.category_top {
	text-align: center;
	border-left: none;
	border-right: none;
	background-color: #f4f7fc;
}
.wrap_post_menu li.next {
	text-align: right;
}
.wrap_post_menu li a {
	text-decoration: none;
}

@media screen and (max-width: 640px){
	.wrap_post_menu li {
		width: 50%;
		border: solid 1px #ccc;
		padding: 1em 1em;
	}
	.wrap_post_menu li.category_top {
		width: 100%;
		border: solid 1px #ccc;
		border-top: none;
		order: 3;
	}
}



/*==========================================================================================

privacy / entry /news

============================================================================================*/
.bg_gray {
	background-color: var(--section-bg-gray);
	padding: 8em 0;
	margin-bottom: 3em !important;
	
}
section.news-list {
	margin-top: 0 !important;
}
section.entry .inner,
section.privacy .inner,
section.news-list .inner {
	background-color: #fff;
	padding: 5em 5em !important;
}

section.privacy .inner h3 {
	margin: 3em auto 1em;
}
section.privacy .inner ol {
	list-style-type: decimal;
	list-style-position: outside;
	margin: 0 0 0 1.5em;	
}
section.privacy .inner ol ol {
	margin: 1em 0 2em 1.5em;	
}

@media screen and (max-width: 640px){
	.bg_gray {
		padding: 4em 0 !important;

	}


form#mailformpro label.mfp_not_checked {
  padding: 3px;
  border: none !important;
}


.form-confirm-check {
	text-align: center;
}

input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 18px;
  font-weight: bold;
  
  padding: 10px 2em;
  border-radius: 50vh;
  background-color: #E95517;
  border: none;
  color: #fff;
  cursor: pointer;
}
span.wpcf7-spinner {
  display: none;
}
.submit-btn {
  display: table; /*インラインブロック要素にする*/
  position: relative;
	margin: 0 auto;

}
.submit-btn::after {
  position: absolute;
  font-family: "Font Awesome 6 Free";
  content: "\f061";
  font-weight: 900;
  color: #fff;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.submit-btn .ajax-loader { display: none !important; }



.mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev {
  color: #000;
}

/*==============================
contact form 7
==============================*/
.wpcf7-form-control-wrap.job {
	line-height: 2.5;
}
span.wpcf7-list-item {
  display: inline-block;
  margin: 0 3em 0 0 !important;
}

/*==========================================================================================

contact

============================================================================================*/
/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:80%; max-width: 1200px;
	margin:0 auto;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}


.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
	padding: 1em 1em;
}

.CF7_table ::placeholder {
	color:#797979;
}
/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th,
	.CF7_table td {
		padding: 20px 20px;
	}
	.CF7_table th{
	width:25%;
	border-bottom:solid 2px #ebedf5;
		text-align: left;
	}
	.CF7_table td{
	border-bottom:solid 1px #ccc;
	}	
}
/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}
/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#f79034;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}