@charset "utf-8";
/* index.css */
/*===============================================
●共通
===============================================*/
/* メールフォーム、プライバシーポリシーを開くと背後が動かないように設定 */
body.contactOpen {
	height: 100%;
	overflow: hidden;
}

/* タイトルのスタイル */
.title01 {
	font-family: var(--font01);
	font-weight: bold;
	color: var(--colorTextMain);
	letter-spacing: 0.15em;
	line-height: 1.18;
}
.title02 {
	display: block;
	padding-bottom: 2.5em;
	font-family: var(--font03);
	font-weight: bold;
	letter-spacing: 0.1em;
	position: relative;
	color: var(--colorMain);
	font-weight: 800;
}
.title03 {
	margin-top: 80px;
	display: block;
	color: var(--colorTextMain);
	font-family: var(--font02);
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.15em;
	position: relative;
}
.title03::after {
	display: block;
	content: "";
	height: 2px;
	background-color: #FFCD37;
	position: absolute;
}

/* mainVisual */
.mv {
	position: relative;
	width: 100%;
}
.mvWrap {
	width: 100%;
	height: 100%;
}
.mv_inner {
	width: 100%;
	height: 100%;
}
.mv_inner .mainVIsualSubTextContainer .areaText {
	font-family: var(--font01);
	font-weight: 700;
	line-height: 2.25;
}


/* contents */
.contentsbox {
	background-color:var(--colorBackGround);
}
#contents01 {background-image: url("../../images/index/companyImg.jpg"); }
#contents02 {background-image: url("../../images/index/serviceImgMain.jpg"); }
#contents03 {background-image: url("../../images/index/recruitImg.jpg"); }
#contents04 {background-image: url("../../images/index/contactImg.jpg"); }
#contents05 {background-image: url("../../images/index/img04.jpg"); }
.contentsbox .inner header { text-align: center;}
.contentsbox .inner header p {
	text-align: center;
	font-family: var(--font01);
	letter-spacing: 0.05em;
	position: relative;
}
.contentsbox p {
	font-size: var(--size16px);
	letter-spacing: 0.02em;
	line-height: 1.8;
}
.contentsbox ul li {
	padding-left: 1em;
	text-indent: -1em;
}
.contentsbox .messageBox p {
	font-family: var(--font02);
}
.contentsbox .messageBox ul {
	padding-left: 1em;
	font-family: var(--font02);
	margin-bottom: 36px;
}
.contentsbox .messageBox ul li {
	list-style: disc;
	line-height: 1.8;
}
.colorText {
	color: var(--colorMain);
	font-weight: bold;
}
.president {
	display: flex;
	justify-content: flex-end;
	gap: 24px;
}
.presidentImgSign{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 5px;
}
.serviceText {
	font-family: var(--font02);
}
.subText {
	font-family: var(--font02) !important;
	font-weight: bold;
	line-height: 36px;
}
.recruitLink {
	margin-top: 40px;
}
.contactTel .telNo {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font03);
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
.contactTel .telNo img {
	margin-right: 16px;
}
.contactTel .telNo a {
	color: var(--colorMain);
}

/* タイトルに背景色がついたリスト */
.contentsbox dl dt {
	font-size: var(--size16px);
	font-weight: bold;
	color: var(--colorMain);
	background-color: #FFFAEB;
	line-height: 1.8;
	letter-spacing: 0.1rem;
}
.contentsbox dl dd {
	font-size: var(--size16px);
	font-family: var(--font01);
	color: var(--colorTextSub);
	line-height: 1.8;
	letter-spacing: 0.1em;
}
.contentsbox dl table th {
	font-weight: bold;
	line-height: 2;
}
.contentsbox dl table td {line-height: 2;}
.contentsbox header .company {
	padding-bottom: 0;
}

/* グーグルマップ */
.googleMap iframe {
	width: 100%;
	height: 100%;
}

/* 事業案内 */
.serviceTopImgWrap .serviceTopImg img,
.serviceFoodImgWrap .serviceFoodImg img {
	width: 100%;
	height: auto;
}

/*===============================================
●画面の横幅が768px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 768px){

	body {
		padding-top: var(--headerHightSP);
	}
	
	/* 共通 */
	.title01 {
		font-size: var(--size24px);
		padding-bottom: 0.5em;
	}
	.title01.singleTitle {
		margin-bottom: 0.83em;
	}
	.title02 {	
		font-size: var(--size16px);
		padding-bottom: 1em;
	}
	.title02:after {
		width: 50px;
		bottom: 0.5em;
		left: calc(50% - 25px);
	}
	.title03 {
		font-size: var(--size18px);
		padding-bottom: 36px;
	}
	.title03::after {
		width: 30px;
		bottom: 1.2em;
		left: calc(50% - 15px);
	}
	.contentsbox .inner header p {
		font-size: var(--size18px);
		margin-bottom: 28px;
	}
	
	/* リンク */
	a.btn {
		width: 90%;
		padding: 8px 0;
	}
	
	/* mainVisual */
	.mv {
		height: calc(100svh - var(--headerHightSP));
	}
	.mvWrap {
		background-image: url("../../images/index/mainVisual_sp.webp");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	.mv_inner .mainVisualMainText {
		position: absolute;
		width: 72%;
		top: 52%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}
	.mv_inner .mainVIsualSubTextContainer {
		position: absolute;
		width: 32%;
		left: 4%;
		bottom: 0;
	}

	/* リード文 */
	#lead {
		width: fit-content;
		margin: 64px auto;
	}
	#lead .leadText {
		font-family: var(--font01);
		font-weight: 700;
		line-height: 2;
		text-align: center;
	}

	/* contents */
	.contentsHeader {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 140% auto;
		padding-top: 35%;
	}
	.contentsbox {
		line-height: 2.26;
	}
	.contentsbox .inner {
		padding: 32px 16px 72px;
	}

	/* タイトルに背景色がついたリスト */
	.contentsbox dl dt {
		margin-bottom: 16px;
		padding: 8px 16px;
	}
	.contentsbox dl dd {
		padding: 0 16px;
	}
	.contentsbox dl dd:not(:last-child) {
		margin-bottom: 16px;
	}
	.contentsbox dl table th {
		display: block;
		width: 100%;
	}
	.contentsbox dl table td {
		display: block;
	}
	.contentsbox dl table tr:not(:last-child) td {padding-bottom: 16px;}

	/* グーグルマップ */
	.googleMap {
		height: 240px;
	}

	/* 事業案内 */
	.serviceTopImgWrap {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 40px;
	}
	.serviceTopImgWrap .serviceTopImg {
		width: calc((100% - 16px) / 2);
	}
	.serviceFoodImgWrap {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 24px;
	}
	.serviceFoodImgWrap .serviceFoodImg {
		width: calc((100% - 16px) / 2);
	}

	/* お問合せ */
	.contactTel .telNo {
		font-size: var(--size24px);
	}
	.contactTel .telNo img {
		width: 24px;
		height: 24px;
	}
}

/*===============================================
●画面の横幅が769px以上(PCのみ)
===============================================*/
@media screen and (min-width: 769px){
	
	/*共通*/
	.title01 {
		font-size: var(--size40px); /* 40px */
		margin-bottom: 16px;
	}
	.title02 {	
		font-size: var(--size16px); /* 16px */
	}
	.title02:after {
		width: 50px;
		bottom: 1rem;
		left: calc(50% - 25px);
	}
	.title03 {
		font-size: var(--size24px);
		padding-bottom: 48px;
	}
	.title03::after {
		width: 30px;
		top: 4rem;
		left: calc(50% - 15px);
	}
	
	/* メインビジュアル */
	.mvWrap {
		position: relative;
		height: 100vh;
		background-image: url("../../images/index/mainVisual_pc.webp");
		background-repeat: no-repeat;
		background-position: 80% 80%;
		background-size: cover;
	}
	.mv_inner {
		height: 100vh;
	}
	.mv_inner .logo {
		position: absolute;
		width: 224px;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--colorBackGround);
		border-bottom-right-radius: 32px;
		box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	}
	.mv_inner .logo .logoImage {
		width: 140px;
		height: 40px;
	}
	.mv_inner .mainVisualMainText {
		position: absolute;
		width: 35%;
		top: 50%;
		left: 4.8%;
		transform: translateY(-50%);
	}
	.mv_inner .mainVIsualSubTextContainer {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 86%;
		max-width: 1200px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.mv_inner .mainVIsualSubTextContainer .areaImage {
		width: 26%;
	}
	.mv_inner .mainVIsualSubTextContainer .areaText {
		flex: 1;
		margin-bottom: 32px;
	}

	
	/* contents */
	.contentsHeader {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		padding-top: 24rem;
	}
	.contentsbox {
		max-width: 960px;
		line-height: 2.26;
		margin: 0 auto;
	}
	.contentsbox .inner header {
		margin-bottom: 92px;
	}
	.contentsbox .inner header p {
		font-size: 1.375rem; /* 22px */
		line-height: 1.8;
	}
	/* タイトルに背景色がついたリスト */
	.contentsbox dl dt {
		margin-bottom: 32px;
		padding: 8px 32px;
	}
	.contentsbox dl dd {
		padding: 0 24px;
	}
	.contentsbox dl dd:not(:last-child) {
		margin-bottom: 30px;
	}
	.contentsbox dl table tr:not(:last-child) td {padding-bottom: 24px;}
	.contentsbox dl table th {
		width: 15%;
		min-width: 150px;
	}

	.contentsbox #road .title03, .contentsbox #creation .title03{
		margin-top: 56px;
	}

	/* グーグルマップ */
	.googleMap {
		height: 512px;
	}

	/* 代表挨拶 */
	.contentsbox .message {
		margin-top: 104px;
	}

	/* 事業案内 */
	.serviceTopImgWrap {
		display: flex;
		gap: 24px;
	}
	.serviceTopImgWrap .serviceTopImg {
		width: calc((100% - 24px) / 4);
	}
	.serviceFoodImgWrap {
		margin-top: 40px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 28px 24px;
		margin-top: 40px;
	}
	.serviceFoodImgWrap .serviceFoodImg {
		width: calc((100% - 24px * 3) / 4);
	}

	/* お問合せ */
	.contactTel .telNo {
		font-size: var(--size48px);
	}
	.contactTel .telNo img {
		width: 40px;
		height: 40px;
	}
}