@charset "utf-8";

/* *****共通設定***** */
body {
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	/*overflow-x: hidden;*/
}

html {
	font-size: 62.5% !important;
	overflow-x: hidden;
}

:root {
	--green: #0cb36b;
}

* {
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	color: #333;
	font-size: clamp(14px, 1.6rem, 16px);
}

strong {
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-weight: 900;
}

.alphabet {
	font-family: "Roboto", sans-serif;
	letter-spacing: 0.05em;
	font-weight: 900;
	color: #0cb36b;
}

.mincho-font {
	font-family: "Roboto", "Noto Serif JP", serif;
}

.colorRed {
	color: #ff0000;
}

@media screen and (min-width:400px) {
	.d-ss-none {
		display: none !important;
	}
}

main {
	display: block;
	color: #5B5B5B;
}

main .btn {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	font-size: 1.5rem;
}

.gray {
	color: #6c757d;
}

.card {
	border-color: #e0c7b2;
}

.img-thumbnail {
	width: 100%;
	padding: .25rem;
	background-color: transparent;
	border: none;
}

.high-light {
	/*background-color: #ffff00;*/
}

.midashi-10 {
	font-size: 10px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(10 + ((1vw - 3.2rem) * 0.625));
}

.midashi-12 {
	font-size: 12px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(12 + ((1vw - 3.2rem) * 0.625));
}

.midashi-14 {
	font-size: 14px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	/* before 16 */
	font-size: calc(14 + ((1vw - 3.2rem) * 0.625));
}

.midashi-16 {
	font-size: 16px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(16 + ((1vw - 3.2rem) * 0.625));
}

.midashi-18 {
	font-size: 18px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(18 + ((1vw - 3.2rem) * 0.625));
}

.midashi-20 {
	font-size: 20px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(20 + ((1vw - 3.2rem) * 0.625));
}

.midashi-22 {
	font-size: 22px;
	/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(22 + ((1vw - 3.2rem) * 0.625));
}


.daitoku-midashi h2,
h2.daitoku-midashi {
	color: #333;
	font-size: clamp(22px, 5vw, 36px);
	/* max-width: 960px; */
	margin-bottom: 40px;
	font-weight: bold;
}

.daitoku-midashi h2 span,
h2.daitoku-midashi span {
	display: block;
	/* text-align: center; */
	font-size: clamp(14px, 3vw, 18px);
	line-height: 2.8em;
	color: #0cb36b;
	text-transform: uppercase;
}



/*---------------------------------------------
大きいブロックの隙間調整
===============================================*/
section {
	padding-top: 80px;
	padding-bottom: 80px;
}

@media screen and (max-width:767.98px) {
	section {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	section.hero {}

	section.hero {
		height: calc(100vh - 81px);
	}

	section.index-top {
		padding-bottom: 0px;
	}
}

@media screen and (max-width:375px) {
	.max-375 {
		display: none;
	}

}



/*---------------------------------------------
文字サイズ/h1～6
===============================================*/
h1.service-midashi {
	font-size: 3.2rem;
	background: linear-gradient(#1EAB5E, #333333);
	padding: 1rem;
	color: #fff;

}

h1 {
	font-size: 2.8rem;
}

.h-midashi {
	/*	padding: 0.75rem;*/
	font-size: 250%;
	font-weight: bold;
	text-align: center;
	color: #333;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0;
	margin: 1rem auto 1rem auto;
}

.h-midashi:before {
	content: "";
	flex-grow: 1;
	height: 3px;
	/* 線の太さ  .text-line:before, */
	background: #333333;
	/* 線の色 */
}

.h-midashi:after {
	content: "";
	flex-grow: 1;
	height: 3px;
	/* 線の太さ  .text-line:before, */
	background: #f40000;
	/* 線の色 */
}

.h-midashi:before {
	margin-right: 5rem;
}

.h-midashi:after {
	margin-left: 5rem;
}

.midashi-sub {
	color: #4e454a;
}

.short-udline {
	display: inline-block;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 50px;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #333333;
}

.short-udline:before {
	display: inline-block;
	position: absolute;
	content: '';
	bottom: -10px;
	left: 50%;
	width: 50px;
	height: 3px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%);
	background-color: #256DBE;
}

.short-udlineGra {
	display: inline-block;
	position: relative;
	color: #333;
	padding-bottom: 13px;
	margin-bottom: 30px;
	font-weight: bold;

}

.short-udlineGra:before {
	display: inline-block;
	position: absolute;
	content: '';
	bottom: -10px;
	left: 50%;
	width: 100px;
	height: 5px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%);
	background: linear-gradient(90deg, #00629d, #ffffff);
}

.point-udlineRed {
	display: inline-block;
	position: relative;
	padding-bottom: 3px;
	margin-bottom: 30px;
	font-weight: bold;
}

.point-udlineRed:before {
	display: inline-block;
	position: absolute;
	content: '';
	bottom: -10px;
	left: 50%;
	width: 100%;
	height: 2px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%);
	background-color: #f40000;
}


.midashi-leftBar {
	padding: 0.5em 0.5em 0.25em 0.5em;
	/*上下 左右の余白*/
	color: #494949;
	/*文字色*/
	background: linear-gradient(#fff, #e0e0e0);
	border-bottom: solid 3px #333333;
}

.midashi-under {
	border-bottom: solid 2px #333333;
	position: relative;
	padding-bottom: 0.5rem;
	padding-top: 1.5rem;
}

.midashi-under:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 2px #CF6319;
	bottom: -2px;
	width: 30%;
	max-width: 100px;
}

/*蛍光マーカー風見出し*/
.midashi-keikou {
	padding-bottom: 3px;
	background: linear-gradient(transparent 70%, #a7d6ff 70%);
}

@media screen and (min-width:320px) and (max-width:767.98px) {
	.h-midashi {
		color: #333333;
		border-color: #333333;
		border-style: solid;
		border-width: 2px;
		border-left: none;
		border-right: none;
		background-color: #8FFBC0;
		/* #8FFBC0; */
		font-size: 4vw;
		font-weight: bold;
		padding: 2vw 4vw;
		position: relative;
		line-height: 1.3;
		clear: both;
	}

	.h-midashi:before,
	.h-midashi:after {
		content: "";
		flex-grow: 0;
		height: 0px;
		/* 線の太さ  .text-line:before, */
		background: #333333;
		/* 線の色 */
	}

	.h-midashi:before {
		margin-right: 0rem;
	}

	.h-midashi:after {
		margin-left: 0rem;
	}

	h1 {
		font-size: 2.2rem;
	}
}

/*---------------------------------------------
よく使う指示
===============================================*/
.flex-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
}


.max-960 {
	width: 90%;
	margin: 0 auto;
	max-width: 960px;
}

.max-1200 {
	max-width: 1200px;
}


/*---------------------------------------------*/
/* toppage main-bar
============================================== */
#Page-business .main-bar {
	background: url("../images/business-02.jpeg") no-repeat center;
	background-size: cover;
}

#Page-company .main-bar {
	background: url("../images/business-03.jpeg") no-repeat center;
	background-size: cover;
}

#Page-contact .main-bar {
	background: url("../images/banner.png") no-repeat center;
	background-size: cover;
}

#Page-works .main-bar {
	background: url("../images/index-business-06.jpg") no-repeat center;
	background-size: cover;
}

#Page-news-detail .main-bar {
	background: url("../images/main-bar-news-detail.jpeg") no-repeat center;
	background-size: cover;
}


.main-bar {
	width: 100%;
	height: 250px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-bar-img {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: 200px;
	position: relative;
}

.main-bar span,
.main-bar h2 {
	font-size: 140%;
	position: relative;
	margin: 0;
	text-align: center;
	font-weight: bold;
	z-index: 5;
	display: block;
}

.main-bar h2 {
	color: #ffffff;
	line-height: 1.8em;
}

.main-bar span {
	color: #0cb36b;
	font-size: 80%;
	text-transform: uppercase;
}

.main-bar::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* background-color: rgba(0,0,0,0.2); */
	background-color: rgba(39, 64, 87, 0.25);
}

@media screen and (max-width: 767.98px) {
	.main-bar {
		height: 150px !important;
	}

	.main-bar-img {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		height: 150px;
		position: relative;
	}

}

/*************************************************************************************
ここからChatGPT
*************************************************************************************/
:root {
	--brand: #0cb36b;
	/* メイングリーン */
	--brand-2: #18a9e6;
	/* 補助ブルー */
	--ink: #101828;
	/* 本文色 */
	--muted: #667085;
	/* 説明文 */
	--bg: #ffffff;
	--chip: #e8fff4;
	--radius: 18px;
	--container: 1120px;
	--shadow-lg: 0 20px 40px rgba(16, 24, 40, .08);
	--shadow-md: 0 8px 20px rgba(16, 24, 40, .08);
	--line: #06C755;
	/* LINEブランド色 */
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
	line-height: 1.75;
	letter-spacing: .02em
}

a {
	color: inherit;
	text-decoration: none
}

.container {
	width: min(100%, var(--container));
	margin-inline: auto;
	padding-inline: 16px
}

/* Utilities */
.py-20 {
	padding-block: 20px
}

/* .py-32 {
	padding-block: 32px
} */

.py-48 {
	padding-block: 48px
}

.my-16 {
	margin-block: 16px
}

.my-24 {
	margin-block: 24px
}

.mt-8 {
	margin-top: 8px
}

.mt-16 {
	margin-top: 16px
}

.center {
	text-align: center
}

/*---------------------------------------------------------------------
 Hero（背景をフルブリード）
 --------------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: clip;
	border-bottom: 1px solid #eef2f4
}

/* 画像は100vwで全面、差し替えは --hero-bg で */
.hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 100vw;
	height: 100%;
	z-index: -1;
	background: var(--hero-bg, linear-gradient(180deg, #e9f9f1 0%, #dff4ff 100%));
	background-image: url("../images/hero-02.png");
	background-size: cover;
	background-position: center;
}

.hero__wrap {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	min-height: 420px;
	/* padding-block: 32px; */
}

.hero__bubble {
	justify-self: end;
	max-width: 450px;
	background: linear-gradient(135deg, #2cd18d, var(--brand));
	color: #ccc;
	/* border-radius: 32px; */
	padding: 32px;
	position: relative;
	box-shadow: var(--shadow-lg)
}

.hero__bubble:after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 32px;
	background: radial-gradient(90% 70% at 20% 10%, rgba(255, 255, 255, .25), transparent 60%)
}

.hero__title {
	font-weight: 900;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.4;
	letter-spacing: .02em;
	color: #fff;
}

.hero__lead {
	opacity: .98;
	margin-top: 10px;
	font-size: clamp(12px, 2vw, 1.6rem);
}

.hero__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	color: #0a3d2f;
	font-weight: 800
}

/* ---------------------------------------------------------------------
Lead
--------------------------------------------------------------------- */
.lead h2 {
	font-size: clamp(18px, 2.2vw, 24px);
	font-weight: 800;
	text-align: center;
	line-height: 1.8em;
}

.lead p {
	color: var(--muted);
	max-width: 900px;
	margin: 12px auto 0
}


/*---------------------------------------------------------------------
 Business
 --------------------------------------------------------------------- */
.sec-head {
	color: #0b5b39;
	font-weight: 900;
	letter-spacing: .06em
}

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

.card {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: #f9fafb
}


.card__img {
	background: #f3f4f6;
	aspect-ratio: 16/9;
	height: 250px;
	width: 100%;
}

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

.card__icon {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	/* bottom: 56px; */
	width: 64px;
	height: 64px;
	top: -32px;
	margin-bottom: -32px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: var(--brand);
	color: #fff;
	box-shadow: 0 10px 20px rgba(12, 179, 107, .25);
}

.card__icon img {
	width: 70%;
}

.card__body {
	padding: 16px 18px 22px
}

.ttl-ja {
	font-weight: 800;
	font-size: 20px;
	text-align: center
}

.ttl-en {
	color: #11a36a;
	font-weight: 700;
	text-align: center;
	margin-top: 4px
}

/*---------------------------------------------------------------------
 Footer（スクショ忠実寄せ）
 --------------------------------------------------------------------- */
footer {
	background: #ccc;
	color: #ffffff;
	/* margin-top: 40px; */
	position: relative
}

.ft {
	/* display: grid;
	grid-template-columns: 1.2fr 1fr 1.6fr; */
	display: flex;
	gap: 24px;
	/* padding-block: 24px; */
	justify-content: space-between;
	align-items: center;
}

.ft .logo {
	display: flex;
	align-items: center;
	gap: 14px
}

.ft .logo__mark {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #0a7e4d;
	color: #fff;
	font-weight: 900;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35)
}

.ft .company strong {
	font-size: 20px;
	letter-spacing: .04em
}

.ft .company small {
	display: block;
	opacity: .95
}

.ft .menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	white-space: nowrap
}

.ft .menu li {
	position: relative
}

.ft .menu li+li::before {
	content: "|";
	color: rgba(255, 255, 255, .85);
	margin-right: 18px
}

.ft .menu a {
	color: #ffffff;
	font-weight: 700
}

.ft .contact-btn {
	background: #fff;
	color: #0c3b2c;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
}

.ft .right {
	display: grid;
	justify-items: end;
	gap: 10px
}

.ft .tel-line {
	display: flex;
	align-items: center;
	gap: 12px
}

.ft .tel-line .icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .2)
}

.ft .tel-main {
	/* font-size: 32px; */
	font-weight: 900;
	letter-spacing: .04em
}

.ft .tel-main a {
	font-size: clamp(22px, 10vw, 40px);
}

.ft .tel-sub {
	opacity: .95
}

.ft small.copy {
	display: block;
	text-align: center;
	padding: 10px 0 16px;
	opacity: .95
}

.topbtn {
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand), #37d48b);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 10px 20px rgba(12, 179, 107, .35)
}

@media (max-width: 960px) {
	.hero__wrap {
		min-height: 360px;
		padding: 20px;
		position: absolute;
		bottom: 92px;
	}

	.biz {
		grid-template-columns: 1fr
	}

	.ft {
		grid-template-columns: 1fr;
		gap: 16px;
		text-align: left
	}

	.ft .right {
		justify-items: start
	}
}







/* =======================================================================
 index.html CTAセクション
======================================================================= */
:root {
	--bg-start: #0b7f55;
	/* 深いグリーン */
	--bg-end: #2ea16b;
	/* 明るいグリーン */
	--card: #ffffff;
	--text: #0b2540;
	--btn-start: #114e3a;
	--btn-end: #0d3c2d;
	--btn-hover: #17624a;
	--shadow: 0 10px 24px rgba(0, 0, 0, .15);
	/* --radius-xl: 18px;
      --radius-2xl: 28px; */
	--maxw: 960px;

}

.custom-cta-section {
	background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
	color: #fff;
	padding: clamp(40px, 6vw, 96px) 16px;
	position: relative;
	overflow: hidden;
}

.custom-cta-section::before {
	content: "";
	position: absolute;
	inset: -12vw -2vw auto -2vw;
	height: 20vw;
	background: rgba(255, 255, 255, .06);
	transform: skewY(-4deg);
	pointer-events: none;
}

.custom-cta-inner {
	/* max-width: var(--maxw); */
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}

.custom-cta-title {
	font-size: clamp(22px, 3.5vw, 36px);
	font-weight: 800;
	letter-spacing: .04em;
	margin: 0 0 12px;
	display: inline-flex;
	align-items: center;
	color: #fff;
	gap: 12px;
}

.custom-cta-subtext {
	/* font-size: 15px; */
	font-size: clamp(16px, 5vw, 20px);
	color: #fff;
	margin-bottom: clamp(24px, 3vw, 40px);
	opacity: 0.9;
}

/* ===== ボックス群 ===== */
.custom-cta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 2.5vw, 28px);
}

@media (max-width: 900px) {
	.custom-cta-grid {
		grid-template-columns: 1fr;
		max-width: 680px;
		margin-inline: auto;
	}
}

.custom-cta-card {
	background: var(--card);
	color: var(--text);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow);
	padding: clamp(18px, 2.4vw, 26px);
	display: grid;
	place-items: center;
	gap: 16px;
	min-height: 170px;
}

.custom-cta-icon {
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	display: grid;
	place-items: center;
	background: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 18px rgba(0, 0, 0, .08);
	border: 2px solid #0CB36B;
}

.custom-cta-icon svg path {
	color: #0CB36B;
}

.custom-cta-icon svg {
	width: 28px;
	height: 28px;
}

.custom-cta-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: min(320px, 90%);
	border: 0;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--brand), var(--brand-2));
	color: #fff;
	text-decoration: none;
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 700;
	padding: 16px 22px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .1);
	transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}

.custom-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px rgba(0, 0, 0, .28);
	background: linear-gradient(180deg, var(--btn-hover), var(--btn-end));
}

.custom-cta-btn:active {
	transform: translateY(0);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.custom-cta-caption {
	font-size: 13px;
	opacity: .7;
}


/* =======================================================================
 company.html
======================================================================= */

.aisatsu {
	display: flex;
	justify-content: space-around;
}

.aisatsu-text {
	width: 66%;
	text-align: left;
	/* 本文は左寄せのまま */
}

.aisatsu-img {
	width: 30%;
}

.aisatsu-text .aisatsu-sign {
	display: block;
	text-align: right;
	/* この右寄せが効くようになる */
	margin-top: 0.5em;
	font-weight: bold;
	font-size: 2.5rem;
	font-family: serif;
}

@media (max-width: 960px) {
	.aisatsu {
		display: flex;
		justify-content: space-around;
		flex-direction: column-reverse;
	}

	.aisatsu-text {
		width: 100%;
		text-align: left;
	}

	.aisatsu-img {
		width: 100%;
	}
}

/*会社概要のテーブルの指示*/

.table_design01 {
	border-collapse: collapse;
	width: 100%;
}

.table_design01 th,
.table_design01 td {
	border: 2px solid #fff;
	background-color: #eaf8f2;
	padding: 1em;
}

.table_design01 th {
	background-color: #0cb36b;
	color: #fff;
	font-weight: bold;
	text-align: center;
	width: 35vw;
	min-width: 4em;
	max-width: 180px;
}

.Google-map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 40%;
}

.Google-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* =======================================================================
 business.html
======================================================================= */

.businessbox .sabbox h2 {
	font-size: clamp(2.5rem, 2.5vw, 3.5rem);
	border-bottom: 3px solid #0cb36b;
	padding: 0.25em 0;
	margin: 0.5em 0;
}

.businessbox .sabbox h3 {
	color: var(--green);
	padding-bottom: 30px;
}

.businessbox {
	display: flex;
	flex-direction: column;
	gap: 120px;
	/* 各ブロックの間隔 */
	margin: 0 auto;
}

.businessbox .sabbox {
	display: flex;
	align-items: center;
	gap: 40px;
}

.businessbox .sabbox .text {
	flex: 1;
}

.businessbox .sabbox .image {
	flex: 1;
}

.businessbox .sabbox img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* PC */
@media (min-width: 768px) {
	.businessbox .sabbox.text-first {
		flex-direction: row;
		/* テキスト → 画像 */
	}

	.businessbox .sabbox.image-first {
		flex-direction: row-reverse;
		/* 画像 → テキスト */
	}
}

/* スマホ */
@media (max-width: 767px) {
	.businessbox .sabbox {
		flex-direction: column;
		/* 全部縦並びに */
	}

}


section#Management-Philosophy {
	background: linear-gradient(135deg, white 0%, white 40%, #79e0b4 75%, #0cb36b 100%);
}

#Management-Philosophy h3 {
	margin-bottom: 30px;
	font-weight: 600;
	font-size: 2rem;
}

#Page-company p {
	line-height: 2.8rem;
}






/* =======================================================================
 works.html
======================================================================= */

/* セクション */
.works-block {
	width: 100%;
	padding: 100px 0;
}

.works-block.bg-alt {
	background: #eaf8f2;
}

/* 背景だけ全幅で広がる */
.works-title {
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 24px;
}

/* スライダー + サムネイル */
.works-case {
	--thumb-h: 82px;
}

.works-main img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	object-fit: cover;
}

.works-thumbs {
	margin-top: 14px;
}

.works-thumbs .slick-slide {
	padding: 0 6px;
}

.works-thumbs img {
	width: 100%;
	height: var(--thumb-h);
	object-fit: cover;
	display: block;
	border-radius: 10px;
	opacity: .6;
	transition: opacity .2s, transform .2s;
}

.works-thumbs .slick-current img,
.works-thumbs .slick-slide:focus img {
	opacity: 1;
}

.works-thumbs .slick-current img {
	outline: 2px solid #20a85b;
	transform: scale(0.98);
}

/* 矢印ボタン（背景と矢印を重ねる） */
.works-main .slick-prev,
.works-main .slick-next {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	/* 白の薄い丸背景 */
	border: none;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* slickデフォルトの矢印は消す */
.works-main .slick-prev:before,
.works-main .slick-next:before {
	content: '';
}

/* カスタム矢印 */
.works-main .slick-prev::after,
.works-main .slick-next::after {
	font-size: 20px;
	color: #20a85b;
	/* 緑色 */
	line-height: 1;
}

.works-main .slick-prev::after {
	content: '←';
}

.works-main .slick-next::after {
	content: '→';
}

/* ホバー時 */
.works-main .slick-prev:hover,
.works-main .slick-next:hover {
	background: rgba(255, 255, 255, 0.9);
}

.works-main .slick-prev:hover::after,
.works-main .slick-next:hover::after {
	color: #333;
}

.works-lead {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 24px;
	line-height: 1.8;
	color: #444;
}

/* レスポンシブ */
@media (max-width: 767.98px) {
	.works-block {
		padding: 40px 0;
	}

	.works-case {
		--thumb-h: 64px;
	}

	.works-thumbs .slick-slide {
		padding: 0 4px;
	}
}


/* =========================
  Company：スマホ時の右余白を全消し
========================= */
@media (max-width: 767.98px) {

	/* 横並びを解除（flex → block） */
	#Page-company .flex-box,
	#Page-company .lead,
	#Page-company .lead-row,
	#Page-company .businessbox .sabbox {
		display: block !important;
		justify-content: initial !important;
		align-items: initial !important;
		gap: 0 !important;
	}

	/* 幅を100%に固定（90%などのユーティリティを無効化） */
	#Page-company .max-960,
	#Page-company .container,
	#Page-company .container>*,
	#Page-company section>.container,
	#Page-company .lead-text,
	#Page-company .lead-left,
	#Page-company .lead-right {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box !important;
	}

	/* Bootstrap風のcol/floatが混在しても全解除 */
	#Page-company [class*="col-"],
	#Page-company .row>[class*="col"] {
		float: none !important;
		width: 100% !important;
	}

	/* 代表あいさつの左右カラムもリセット */
	#Page-company .aisatsu {
		display: block !important;
	}

	#Page-company .aisatsu-text,
	#Page-company .aisatsu-img {
		width: 100% !important;
	}
}