@charset "UTF-8";

body {
	font-family:/*YakuHanJP,*/'Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;
	color:#171717;/*neutral-900*/
	font-display:swap;
	//background-color: #f1f5f9;/*slate-100*/
}

.num {
	font-family:'Roboto Condensed', monospace,Sans-Serif;
	font-display:swap;
}

/*smooth scroll
チャットボットと干渉するため使用停止

@media (prefers-reduced-motion: no-preference) {
	:root {
	  scroll-behavior: smooth;
	}
  }
*/

body {
	animation: fadein 1s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

html, body {scroll-padding-top: 60px;/*header height*/}

@media (min-width: 1024px) {
    html, body {scroll-padding-top: 90px;/*header height*/}
}

/*text-size*/

.bj_display-1 {font-size:calc(1.725rem + 5.7vw);}
.bj_display-2 {font-size:calc(1.675rem + 5.1vw);}
.bj_display-3 {font-size:calc(1.575rem + 3.9vw);}
.bj_display-4 {font-size:calc(1.475rem + 2.7vw);}

.bj_display-5 {font-size:calc(1.375rem + 1.5vw);}
.bj_display-6 {font-size:calc(1.325rem + 1.1vw);}
.bj_display-7 {font-size:calc(1.325rem + .9vw);}
.bj_display-8 {font-size:calc(1.3rem + .6vw);}
.bj_display-9 {font-size:calc(1.275rem + .3vw);}
.bj_display-10 {font-size:calc(1.1rem + .25vw);}

@media (min-width: 1024px) {
	.bj_display-1 {font-size:calc(1.675rem + 5.1vw);}
	.bj_display-2 {font-size:calc(1.575rem + 3.9vw);}
	.bj_display-3 {font-size:calc(1.475rem + 2.7vw);}
	.bj_display-4 {font-size:calc(1.375rem + 1.5vw);}
}

/*background*/

.bj_gradient {
	background-color: #fff;
	background-repeat: repeat-y;
	background-size: 25% 100%;
	background-position: 0 0;
	background-image: linear-gradient(#FFF7ED,#FFF7ED);/*orange-50*/
}

.bj_gradient_50 {
	background-color: #fff;
	background-repeat: repeat-y;
	background-size: 50% 100%;
	background-position: 0 0;
	background-image: linear-gradient(#FFF7ED,#FFF7ED);/*orange-50*/
}

.bj_gradient_75 {
	background-color: #fff;
	background-repeat: repeat-y;
	background-size: 75% 100%;
	background-position: 0 0;
	background-image: linear-gradient(#FFF7ED,#FFF7ED);/*orange-50*/
}

.bj_gradient_rev {
	background-color: #FFF7ED;/*orange-50*/
	background-repeat: repeat-y;
	background-size: 25% 100%;
	background-position: 0 0;
	background-image: linear-gradient(#fff,#fff);
}

.bj_gradient_rev_50 {
	background-color: #FFF7ED;/*orange-50*/
	background-repeat: repeat-y;
	background-size: 50% 100%;
	background-position: 0 0;
	background-image: linear-gradient(#fff,#fff);
}

.bj_gradient_rev_75 {
	background-color: #FFF7ED;/*orange-50*/
	background-repeat: repeat-y;
	background-size: 75% 100%;
	background-position: 0 0;
	background-image: linear-gradient(#fff,#fff);
}

.bj_bg_logo {
	background-image: url(/common/cmn_img/bg_logo_BJ.svg);
	background-position: right bottom;
	background-size: 50%;
	background-repeat: no-repeat;
}

.bj_bg_slant {
    background: repeating-linear-gradient(135deg, #FFF7ED 10%, #fff 10%, #fff 90%,#FFF7ED 90%, #FFF7ED 100%);
}

@media (min-width: 1024px) {

	.bj_bg_slant {
		background: repeating-linear-gradient(135deg, #FFF7ED 20vw, #fff 20vw, #fff 80vw,#FFF7ED 80vw, #FFF7ED 100vw);
	}

}

.bj_gradient_chart_lime {background-image: linear-gradient(135deg, #cedb40 0%, #bacb28 100%);}
.bj_gradient_chart_teal {background-image: linear-gradient(135deg, #31c9bc 0%, #19a391 100%);}
.bj_gradient_chart_sky {background-image: linear-gradient(135deg, #22b0e4 0%, #1394d8 100%);}
.bj_gradient_chart_blue {background-image: linear-gradient(135deg, #4d81bc 0%, #2a5191 100%);}
.bj_gradient_chart_purple {background-image: linear-gradient(135deg, #b365d9 0%, #853abb 100%);}
.bj_gradient_chart_red {background-image: linear-gradient(135deg, #f0465b 0%, #e22533 100%);}
.bj_gradient_chart_orange {background-image: linear-gradient(135deg, #ff5e00 0%, #ff3500 100%);}
.bj_gradient_chart_amber {background-image: linear-gradient(135deg, #ffc04b 0%, #ff9628 100%);}

.bj_gradient_chart_lime_base {background-image: linear-gradient(150deg,#e3eb93 0%, #e3eb93 8%,#fff 8%, #fff 92%,#e3eb93 92%, #e3eb93 100%);}
.bj_gradient_chart_teal_base {background-image: linear-gradient(150deg, #bcefea 0%, #bcefea 8%,#fff 8%, #fff 92%,#bcefea 92%, #bcefea 100%);}
.bj_gradient_chart_sky_base {background-image: linear-gradient(150deg, #c0e8f7 0%, #c0e8f7 8%,#fff 8%, #fff 92%,#c0e8f7 92%, #c0e8f7 100%);}
.bj_gradient_chart_blue_base {background-image: linear-gradient(150deg, #c5dcf5 0%, #c5dcf5 8%,#fff 8%, #fff 92%,#c5dcf5 92%, #c5dcf5 100%);}
.bj_gradient_chart_purple_base {background-image: linear-gradient(150deg, #e9d3f4 0%, #e9d3f4 8%,#fff 8%, #fff 92%,#e9d3f4 92%, #e9d3f4 100%);}
.bj_gradient_chart_red_base {background-image: linear-gradient(150deg, #fac5cc 0%, #fac5cc 8%,#fff 8%, #fff 92%,#fac5cc 92%, #fac5cc 100%);}
.bj_gradient_chart_orange_base {background-image: linear-gradient(150deg, #ffcdb1 0%, #ffcdb1 8%,#fff 8%, #fff 92%,#ffcdb1 92%, #ffcdb1 100%);}
.bj_gradient_chart_amber_base {background-image: linear-gradient(150deg, #ffe2ad 0%, #ffe2ad 8%,#fff 8%, #fff 92%,#ffe2ad 92%, #ffe2ad 100%);}

.bj_title_line {background: linear-gradient(90deg, #FBBF24 0%, #FB923C 100%);}/*amber-400 --> orange-400*/

.bj_gradient_icon {background-image: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);}

.bj_gradient_btn {background-image: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);}

.bj_hero_person_expt_copy {background-image: linear-gradient(135deg, #ea580c 0%, #FBBF24 100%);}

.bj_entry {background-image: linear-gradient(135deg, #FDE68A 0%, #fb923c 45%, #fb923c 55%, #FDE68A 100%);}


/*header*/

header {
	position: fixed;
	width: 100%;
	z-index: 99;
	background: #fff;
	border-bottom: 1px solid #fff;
	box-shadow: 0 6px 0 0 rgba(255, 255, 255,0.25), 0 12px 0 0 rgba(255, 255, 255,0.25), 0 18px 0 0 rgba(255, 255, 255,0.25);
}

@media (min-width: 1024px) {

	header {
		border-bottom: 1px solid transparent;
		box-shadow: 0 6px 0 0 rgba(255, 255, 255,0.25), 0 12px 0 0 rgba(255, 255, 255,0.25), 0 18px 0 0 rgba(255, 255, 255,0.25);
	}
}

header h1 {
	height: 60px;
}

header .bj_logo {
	width: 140px;
	height: 42px;
}

@media (min-width: 1024px) {
	header h1 {
		height: auto;
		margin-left: 0.5rem;
	}

	header .bj_logo {
		width: 173px;
		height: 52px;
	}
}

@media (min-width: 1280px) {
	header h1 {
		margin-left: 1rem;
	}

	header .bj_logo {
		width: 200px;
		height: 60px;
	}
}

.bj_header_blog_link {/*採用ブログ用ヘッダーリンク*/
	position: relative;
	display: inline-block;
	z-index: 1;
}

.bj_header_blog_link::after {
	content: "";
	position: absolute;/*relative-->bj_header_blog_link*/
	bottom: 0;
	left: 32px;
	z-index: -1;
	height: 3px;
	width: calc(100% - 64px);
	background: #FDBA74;/*orange-3300*/
	transform: scale(1, 1);
	transform-origin: left top;
	transition: transform 0.3s;
}

/*breadcrumb*/

.bj_breadcrumb {
	padding:0.5rem 1rem;
	font-size: 75%;
}

.bj_breadcrumb .bj_breadcrumb_group {
	display: block;
}

.bj_breadcrumb .bj_breadcrumb_group li{
	display: inline;
	font-weight: 500;
}

.bj_breadcrumb .bj_breadcrumb_group li a {
	display: inline-block;
}

.bj_breadcrumb .bj_breadcrumb_group li:last-child {
	color: #3B82F6;/*blue-500*/
	font-weight: 700;
}

.bj_breadcrumb_itemlink[href]:hover {
	opacity: 0.5;
}

.bj_breadcrumb_group > * + * {
	margin-left: 0.25em;
}

.bj_breadcrumb_group > * + *::before {
	content: "/";
	margin-left: 0.5em;
	margin-right: 0.5em;
	opacity: 0.5;
	color: #3B82F6;/*blue-500*/
}

  @media (min-width: 1024px) {
	.bj_breadcrumb {
		padding: 0.5rem;
		font-size: 82.5%;
	  }

	  .bj_breadcrumb .bj_breadcrumb_group {
		display: flex;
		flex-wrap:wrap;
	  }

	  .bj_breadcrumb_group > * + * {
		margin-left: 0.5em;
	  }

	  .bj_breadcrumb_group > * + *::before {
		content: "/";
		margin-left: 0.75em;
		margin-right: 0.75em;

	  }
  }

/*Hero*/

//#hero {
//	padding-top: 60px;/*header height*/
//}


//@media (min-width: 1024px) {
//	#hero {
//		padding-top: 90px;/*header height*/
//	}
//}

/*pagetop*/

#bj_page_top {
	display: block;
    position: fixed;
	bottom:144px;
    right: 26px;
	width: 48px;
	height: 48px;
	background: #25348e;/*neutral-900*/
	border-radius: 24px;
	padding-top: 4px;
    opacity: 0; 
 
	cursor: pointer;
	z-index: 9;
  }

  #bj_page_top span {
	display: block;
	padding-top: 4px;
	font-size:0.625rem;
	text-align: center;
  }

  svg.arrow {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	margin-left: auto;
	margin-right: auto;
	height: 1.5rem;
	width: 1.5rem;
  }
  
  @media (min-width: 1024px) {
	#bj_page_top {
		padding-top: 0;
	}
	svg.arrow {
	  height: 2rem;
	  width: 2rem;
	}
  }

.blog_sheet hr {
	display: block;
	border-top: 5px double #C7D2FE;/*indigo-200*/
	border-right: none;
	border-bottom: none;
	border-left: none;
	margin: 2.5rem 1rem 0 1rem;
}

/*疑似blockquote*/
div.bq {
	position:relative;
	border:1px solid #A5B4FC;/*indigo-300*/
	border-radius:0.5rem;
	padding:1rem;
	background-color: #E0E7FF;/*indigo-100*/
	/*margin-top: 2.5rem;*/
	padding:2rem 1rem ;
}
div.bq:before{
	position:absolute;
	font-family:serif;
	content:'“';
	color:#A5B4FC;
	top:10px;
	left:16px;
	font-size: 2rem;
	font-weight: 900;
}
div.bq:after{
	position:absolute;
	font-family:serif;
	content:'„';
	color:#A5B4FC;
	right:16px;
	bottom:10px;
	font-size: 2rem;
	font-weight: 900;
}
div.bq p {
	margin: 0;
	font-style: oblique;
	font-weight: 500;
}

/*badge*/
.badge {
    display: inline-block;
	padding-top: 0.2rem;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	padding-bottom: 0.25rem;
	vertical-align: text-top;
    margin-right: 0.2rem;
    margin-bottom: 0.4rem;
    font-size:0.875rem;
}
.side .badge {
    display: inline-block;
	padding-top: 0.1rem;
	padding-right: 0.4rem;
	padding-left: 0.4rem;
	padding-bottom: 0.2rem;
	vertical-align: text-top;
    margin-right: 0.2rem;
    margin-bottom: 0.4rem;
    font-size:0.6875rem;
}
.badge-type {
    font-weight: 600;
    border-radius: 0;
    //color: #1D4ED8;/*blue-700*/
    border: 2px solid;
    background-color: #fff;
}
.badge-new {
    padding-top: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    padding-bottom: 0.25rem;
    border-radius: 999px;
    margin-right: 1rem;
    margin-bottom: 0;
    color: #fff;
    background-color: #e6326e;
    font-weight: 700;
    font-size: 0.875rem;
}

/*footer*/

footer .bj_totec_recruit_logo {
	width: 50vw;
	max-width: 240px !important;
}
