/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 30 2026 | 05:37:06 */
/* 共通 */

/* フォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Montserrat:wght@400;500;600;700&display=swap');

body,
p,
h1, h2, h3, h4, h5, h6,
ul, ol, li,
table, th, td,
input, textarea, select, button,
label,
a,
blockquote,
figcaption,
dl, dt, dd,
header, nav, section, article, aside, footer {
  font-family: "Noto Sans JP", sans-serif;
}
.zen-kaku {
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.en {
	font-family: "Montserrat", sans-serif;
}

/* ヘルパー */
.box-shadow {
	box-shadow: 0 2px 4px rgba(0,0,0,.05),0 4px 4px -4px rgba(0,0,0,.1);
}
.bg-green {
	background: linear-gradient(100deg, #2d9121 0%, #65be58 100%)!important;
}
@media (max-width: 959px) {
	.only-pc {
		display: none!important;
	}
}
@media (max-width: 599px) {
	.only-pc-tab {
		display: none!important;
	}
}
@media (min-width: 600px) {
	.only-sp {
		display: none!important;
	}
}
@media (min-width: 960px) {
	.only-sp-tab {
		display: none!important;
	}
}

/* 文字下波線 */
.nami .swl-marker.mark_yellow {
	position: relative;
	display: inline-block;
	padding-bottom: 0.22em;
	background: none;
}
.nami .swl-marker.mark_yellow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10px;
	pointer-events: none;

	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 7' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5 Q5 1.0 10 3.5 T20 3.5 T30 3.5 T40 3.5 T50 3.5 T60 3.5 T70 3.5 T80 3.5 T90 3.5 T100 3.5 T110 3.5 T120 3.5 T130 3.5 T140 3.5 T150 3.5 T160 3.5' fill='none' stroke='%23f4d957' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
		no-repeat center / 100% 100%;
}

/* ふきだし */
.fukidashi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: fit-content;
	margin-inline: auto;
	line-height: 1.5;
	letter-spacing: 0.08em;
}

/* 左右の斜め線 */
.fukidashi::before,
.fukidashi::after {
	width: 1px;
	height: 30px;
	background-color: var(--color_main);
	content: "";
}
/* 左側 */
.fukidashi::before {
	transform: rotate(-25deg);
}
/* 右側 */
.fukidashi::after {
	transform: rotate(25deg);
}
@media (max-width: 599px) {
	.fukidashi {
		gap: 16px;
		font-size: 20px;
	}
	.fukidashi::before,
	.fukidashi::after {
		height: 20px;
	}
}

/* メニュー */
.c-gnav>.menu-item>a .ttl {
	font-size: 16px;
	letter-spacing: .05em;
	font-weight: 500;
}
.c-gnav>.menu-item >.sub-menu {
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}
/* 左右に余白のある点線 */
.c-gnav > .menu-item > .sub-menu li:not(:last-of-type)::after {
	position: absolute;
	right: 12px;
	bottom: 0;
	left: 12px;
	border-bottom: 1px dotted #ccc;
	content: "";
	pointer-events: none;
}
.c-gnav>.menu-item >.sub-menu a {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 40px;
}
.c-gnav>.menu-item:hover>.sub-menu a::before {
	color: var(--color_main);
}

/* スマホメニュー */
/* 親メニューのみ */
.p-spMenu__nav > .c-spnav > li > a {
	position: relative;
}
.p-spMenu__nav > .c-spnav > li > a::before {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translatey(-50%);
	width: 5px;
	height: 60%;
	background: linear-gradient(
		to bottom,
		#fff 0%,
		#fff 82%,
		#f4d957 82%,
		#f4d957 100%
	);
	content: "";
}


/* スムーススクロール */
html {
	scroll-behavior: smooth;
}
#work,
#career,
#kyuyo,
#fukuri {
	scroll-margin-top: 78px;
}
@media (max-width: 599px) {
	#work,
	#career,
	#kyuyo,
	#fukuri {
		scroll-margin-top: 54px;
	}
}


/* ボタン */
/* ===================================
   カラー設定
=================================== */
.swell-block-button.green_.is-style-btn_line {
	--btn-color-start: #2d9121;
	--btn-color-end: #65be58;
}
.swell-block-button.blue_.is-style-btn_line {
	--btn-color-start: #338df4;
	--btn-color-end: #28b7ff;
}
.swell-block-button.red_.is-style-btn_line {
	--btn-color-start: #f74a4a;
	--btn-color-end: #f99548;
}

/* ===================================
   共通スタイル
=================================== */
.swell-block-button:is(.green_, .blue_, .red_).is-style-btn_line a {
	--btn-gradient: linear-gradient(
		100deg,
		var(--btn-color-start) 0%,
		var(--btn-color-end) 100%
	);
	position: relative;
	z-index: 0;
	color: var(--btn-color-start) !important;
	-webkit-text-fill-color: var(--btn-color-start);
	border: 2px solid transparent;
	background:
		linear-gradient(#fff, #fff) padding-box,
		var(--btn-gradient) border-box !important;
	transition: .3s;
}
/* ボタン内の文字 */
.swell-block-button:is(.green_, .blue_, .red_).is-style-btn_line a *  {
	position: relative;
	z-index: 1;
	color: inherit !important;
	-webkit-text-fill-color: inherit;
}

/* SWELLの擬似要素対策 */
.swell-block-button:is(.green_, .blue_, .red_).is-style-btn_line a::before {
	z-index: -1 !important;
}

@media (hover: hover) {
	.swell-block-button:is(.green_, .blue_, .red_).is-style-btn_line a:hover {
		color: #fff !important;
		-webkit-text-fill-color: #fff;
		
		border-color: #fff;

		background:
			var(--btn-gradient) padding-box,
			var(--btn-gradient) border-box !important;
	}
}

/* ヘッダーお問い合わせボタン */
#body_wrap .contact-btn {
	display: flex;
	align-items: center;
	gap: 20px;
}
#body_wrap .contact-btn a {
	--btn-gradient: linear-gradient(
		100deg,
		#2d9121 0%,
		#65be58 100%
	);

	color: #fff;
	border-radius: 40px;
    padding: 15px 30px;
    color: #fff;
    transition: .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
	border: 2px solid transparent;

	background:
		var(--btn-gradient) padding-box,
		var(--btn-gradient) border-box;

	transition: color .3s;
}

@media (hover: hover) {
	#body_wrap .contact-btn a:hover {
		color: #2d9121;

		background:
			linear-gradient(#fff, #fff) padding-box,
			var(--btn-gradient) border-box;
	}
}
.contact-btn a .en,
.contact-btn a .jp {
	line-height: 1;
}
.contact-btn a .en {
	font-size: 16px;
	font-weight: bold;
	letter-spacing: .3em;
}
.contact-btn a .jp {
	font-size: 10px;
	letter-spacing: .2em;
}

/* スマホメニューお問い合わせボタン */
#body_wrap .contact-btn.sp {
	justify-content: center;
}
#body_wrap .contact-btn.sp a {
	border-color: #fff;
}
#sp_menu .c-spnav {
    width: fit-content;
    margin: 0 auto;
}


/* タイトル */
/* ===================================
   セクション見出し
=================================== */
/* 大きな英字装飾 */
.section-bg-text {
	position: absolute;
	z-index: -1;
	color: rgba(45, 145, 33, 0.07);
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: 0.03em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	transform: skewY(-5deg);
	font-size: 70px!important;
    top: -40px;
    left: 20px;
}
@media (max-width: 1450px) {
	.section-bg-text {
		left: 5px!important;
	}
}
@media (max-width: 959px) {
	.section-bg-text {
		top: -20px;
		font-size: 50px!important;
	}
}
@media (max-width: 599px) {
	.section-bg-text {
		top: -30px;
	}
}
/* 「募集職種」 */
.section-title > * {
	position: relative;
	display: inline-block;
	margin: 0;
	color: #2d9121;
	font-size: 40px;
	padding-bottom: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.08em;
}
@media (max-width: 599px) {
	.section-title > * {
		font-size: 26px;
		padding-bottom: 10px;
	}
}
/* タイトル下のライン */
.section-title >*::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(
		to right,
		#2d9121 0%,
		#2d9121 82%,
		#f4d957 82%,
		#f4d957 100%
	);
}
@media (max-width: 599px) {
	.section-title >*::after {
		height: 3px;
	}
}
.section-lead-text {
	font-size: 18px;
	letter-spacing: .05em;
}

/* CTA */
.cta .top-content {
	position: relative;
	margin-bottom: 150px!important;
}
@media (max-width: 599px) {
.cta .top-content {
		position: relative;
		margin-bottom: 40px!important;
	}	
}
.cta .top-content .title-en {
	margin-left: -10px;
	margin-bottom: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 150px;
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.04em;
	text-transform: uppercase;

	/* 上部は薄いグリーン、下部に向かって白く透過 */
	background: linear-gradient(
		180deg,
		rgba(214, 235, 207, 0.9) 0%,
		rgba(229, 242, 224, 0.65) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
@media (max-width: 599px) {
	.cta .top-content .title-en {
		font-size: 80px;
	}
}
.cta .top-content .title {
	font-size: 40px;
	letter-spacing: .05em;
	line-height: 1.4;
}
@media (max-width: 599px) {
	.cta .top-content .title {
		font-size: 26px;
	}
}
.cta .top-content .text {
	font-size: 20px;
}
@media (max-width: 700px) {
	.cta .top-content .text {
		font-size: 15px;
	}
}
.cta .top-content .img {
	position: absolute;
}
@media (min-width: 1100px) {
	.cta .top-content .img {
		right: -300px;
		top: -60px;
		width: 850px;
	}
}
@media (min-width: 900px) and (max-width: 1099px) {
	.cta .top-content .img {
		top: -40px;
		right: -30vw;
		width: 70vw;
	}
}
@media (min-width: 600px) and (max-width: 899px) {
	.cta .top-content .img {
		top: auto;
		bottom: -120px;
		right: -35vw;
		width: 65vw;
	}
}
@media (max-width: 599px) {
	.cta .top-content .img {
		position: relative;
		width: 120%;
		right: -10%;
	}
}
.cta .bottom-content .swell-block-columns__inner {
	align-items: stretch;
}
.cta .bottom-content .item {
	display: flex;
	position: relative;
}
.cta .bottom-content .item * {
	color: #fff;
}
.cta .bottom-content .item > * {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	border-radius: 20px;
}
.cta .bottom-content .item.entry > * {
	background-image: url(https://www.nouhibus.co.jp/recruitment/wp-content/uploads/2026/07/bg-blue-1.webp);
}
.cta .bottom-content .item.career > * {
	background-image: url(https://www.nouhibus.co.jp/recruitment/wp-content/uploads/2026/07/bg-green-1.webp);
}
.cta .bottom-content .item.info > * {
	background-image: url(https://www.nouhibus.co.jp/recruitment/wp-content/uploads/2026/07/bg-orange-1.webp);
}
.cta .bottom-content .item h2 {
	letter-spacing: .1em;
}
@media (max-width: 599px) {
	.cta .bottom-content .item h2 {
		font-size: 24px;
	}
}
.cta .bottom-content .item .text-en {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 2;
	margin: 0;
    font-family: "Montserrat", sans-serif;

	color: rgba(255, 255, 255, .2);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;

	writing-mode: vertical-rl;
	text-orientation: mixed;
}
.cta .bottom-content .item .swell-block-button {
	margin-bottom: 15px;
}
.cta .bottom-content .item .swell-block-button a {
	width: 100%;
	padding: 15px 20px;
	font-size: 17px;
	font-weight: 700;
}
@media (max-width: 599px) {
	.cta .bottom-content .item .swell-block-button a {
		font-size: 16px;
	}
}
.cta .bottom-content .item .mynavi-btn-wrap {
	text-align: center;
}
.cta .bottom-content .item .mynavi-btn-wrap a {
	transition: .3s;
}
@media (hover: hover) {
	.cta .bottom-content .item .mynavi-btn-wrap a:hover {
		opacity: .7;
	}
}

/* フッター */
.w-beforeFooter {
	margin-bottom: 0;
}
.footer {
	padding-bottom: 20px!important;
}
.footer .logo {
	width: 240px;
}
.footer .lead-text {
	font-size: 14px;
}
.footer .logo a {
	transition: .3s;
}
.footer .logo a:hover {
	opacity: .6;
}
.footer .lead-text {
	letter-spacing: .05em;
}
.footer hr {
	border-color: rgba(255, 255, 255, .3);
	background-color: transparent!important;
}
@media (max-width: 599px) {
	.footer .top-content .swell-block-button {
		text-align: left;
	}	
}
.footer .top-content .swell-block-button a {
	-webkit-text-fill-color: currentColor!important;
	background: transparent!important;
	color: #fff!important;
	border-color: #fff!important;
}
.footer .top-content .swell-block-button a:hover {
	background: #fff!important;
	color: var(--color_main)!important;
}
@media (max-width: 599px) {
	.footer .top-content .item.youtube > * {
		flex-direction: column;
	}
	.footer .top-content .item.youtube figure {
		width: 100%;
		height: 100%;
	}
}
.footer .bottom-content .item:not(:last-of-type) {
	border-right: 1px solid rgba(255, 255, 255, .3);
}
@media (max-width: 599px) {
	.footer .bottom-content .item:not(:last-of-type) {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .3);
		padding-bottom: 15px;
	}
}
.footer .bottom-content .company-name-en {
	margin-left: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(214, 235, 207, 0.9) 0%, rgba(229, 242, 224, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@media (max-width: 599px) {
	.footer .bottom-content .company-name-en {
		font-size: 60px;
	}
}
.footer .bottom-content .item p:not(.title) {
	margin-bottom: 0;
}
.footer .bottom-content .menu-link a {
	font-size: 14px;
	transition: .3s;
}
.footer .bottom-content .menu-link a:hover {
	opacity: .6;
}
#footer {
	background: var(--color_main);
	color: #fff;
}
