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

/* タイトルのスタイル */
.title01 {
	font-family: var(--font01);
	color: var(--colorMain);
	letter-spacing: 0.15em;
	line-height: 1.18;
}
.title02 {
	display: block;
	padding-bottom: 1em;
	font-family: var(--font02);
	letter-spacing: 0.1em;
	position: relative;
}
.title02:after {
	display: block;
	content: "";
	height: 1px;
	background-color: #707070;
	position: absolute;
}
.title03 {
	display: block;
	color: var(--colorMain);
	font-family: var(--font01);
	text-align: center;
	letter-spacing: 0.15em;
	position: relative;
}
.title03::after {
	display: block;
	content: "";
	height: 1px;
	background-color: var(--colorMain);
	position: absolute;
}

/* mainVisual */
.mv {
	width: 100%;
}
.mvWrap {
	width: 100%;
	height: 100%;
}
.mv_inner {
	width: 100%;
	height: 100%;
}
.mv_inner .logo {
	position: absolute;
}
.mv_inner .mv_txt {
	width: 100%;
	position: absolute;
	font-family: var(--font01);
	color: var(--colorTextSub);
	text-align: right;
	letter-spacing: 0.3em;
	text-shadow: 0px 0px 7px rgba(35,21,0,0.4);
}
.mv_inner .mv_txt span {
	display: block;
	font-family: var(--font02);
	line-height: 1.03em;
	letter-spacing: 0.1em;
}

/* contents */
.contentsbox {
	background-color: var(--colorBackGround);
}
#contents01 {background-image: url("../../images/index/img01.jpg"); }
#contents02 {background-image: url("../../images/index/img02.jpg"); }
#contents03 {background-image: url("../../images/index/img03.jpg"); }
#contents04 {background-image: url("../../images/index/img04.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: 2;
}
.contentsbox ul li {
	padding-left: 1em;
	text-indent: -1em;
}

/* タイトルに背景色がついたリスト */
.contentsbox dl dt {
	font-size: var(--size16px);
	font-weight: bold;
	color: var(--colorMain);
	line-height: 1.5;
	background-color: #EEF2EF;
}
.contentsbox dl dd {
	font-size: var(--size16px);
	line-height: 2;
}
.contentsbox dl table th {
	font-weight: bold;
	line-height: 2;
}
.contentsbox dl table td {line-height: 2;}

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

/* 画像の並び */
.contentsbox .imgListBox {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.contentsbox .imgListBox .imgListItem a img {
	width: 100%;
	height: auto;
}

/* 採用情報で使っているテーブル */
.contentsbox .recruitTable {
	font-size: var(--size16px);
}
.contentsbox .recruitTable th,
.contentsbox .recruitTable td {
	line-height: 2.27;
	letter-spacing: 0.02em;
}
.contentsbox .recruitTable th {
	width: 65px; /*文字数によって変えてください*/
}
.contentsbox .recruitTable td {
	width: calc(100% - 65px); /*thの文字数によって変えてください*/
	padding-left: 1em;
	text-indent: -1em;
}

/* トピックス */
#TopicsList li {
	width: 100%;
	border-bottom: 1px solid #ccc;
	padding-left: 0;
	text-indent: 0;
	line-height: 1.7;
}
#TopicsList li time,
#TopicsList li span {
	font-size: var(--size16px);
}
#TopicsList li time {
	display: block;
	color: var(--colorMain);
}
#TopicsList li span {
	display: block;
}

/* お問合せとプライバシーポリシー共通ボタン */
a.formBtn {
	position: relative;
	display: block;
	background-color: #D21010;
	padding: 1em 0;
	text-align: center;
	color: var(--colorTextSub);
	font-weight: bold;
	line-height: 1;
}
a.formBtn i {
	font-size: 0.5em;
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translate(0, -50%);
}
a.formBtn i.left {
	left: 1em;
	right: 100%;
}

/* お問合せ */
#contactForm .contactTable {
	width: 100%;
}
#contactForm .contactTable th {
	font-size: var(--size16px);
	font-weight: bold;
}
#contactForm .contactTable td {
	word-break: break-all;
}
#contactForm .contactTable input,
#contactForm .contactTable select,
#contactForm .contactTable textarea {
	border: 1px solid var(--colorBackGround);
	border-radius: 0;
	color: #000;
}
#contactForm .contactTable select {
	background-color: var(--colorBackGround);
}
#contactForm .contactTable textarea {
	line-height: 1.2;
}
#contactForm .contactTable input::placeholder {
	color: #D6D6D6;
}
#contactForm .contactTable input::-ms-input-placeholder {
	color: #D6D6D6;
}
#contactForm .contactTable input:-ms-input-placeholder {
	color: #D6D6D6;
}
#contactForm .contactTable input:focus,
#contactForm .contactTable select:focus,
#contactForm .contactTable textarea:focus {
	outline: 1px solid #1782B1;
}
#contactForm .contactTable .zipcode {
	font-size: var(--size18px);
	font-weight: bold;
	margin-right: 16px;
}
#contactForm .contactTable #PostalCode {
	display: inline-block;
}
#contactForm .contactTable #Address {
	margin-top: 16px;
}
#contactForm .contactTable .font14 {
	font-size: var(--size14px);
}
#contactForm .requiredIcon,
#contactForm .error {
	color: var(--colorTextCaution);
}
#contactForm .error {
	display: block;
}
#contactForm .requiredIcon {
	padding-left: 0.5em;
}
#contactForm .contactTable label.error {
	font-size: var(--size14px);
	font-weight: bold;
	margin: 0.5em 0;
}
#contactForm .contactTable input.error {
	background-color: #FFC8C8 !important;
	border: 1px solid #FF6B6B;
}
#contactForm .contactTable input.error:focus {
	outline: none;
}
#contactForm .contactTable .noHyphen {
	margin-right: 1em;
}

/* 入力内容の確認 */
#confirmTable tbody td {
	border-bottom: 1px solid #DFDFDF;
}
#confirmTable.contactTable td span {
	font-weight: bold;
}
#contactForm a.prevBtn {
	display: block;
	font-weight: bold;
	color: var(--colorTextSub);
	background-color: #AAA38A;
	text-align: center;
	padding: 1em 0;
	line-height: 1;
}
#contactForm a.prevBtn i {
	font-size: 0.5em;
	text-align: center;
	margin-right: 12.5%;
	transform: rotate(180deg);
}

/* 問合せ完了 */
#contactForm.contactResult h2 {
	font-weight: bold;
	margin-bottom: 1em;
}

/* ダイアログ再定義 */
.ui-dialog {
	position: fixed!important;
	top: 0!important;
	left: 0!important;
	max-width: 100%!important;
	width: 100%!important;
	height: 100vh!important;
	background-color: #F5F5F5;
	background-image: none;
	overflow-y: scroll;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-radius: 0!important;
}
.ui-dialog .ui-dialog-titlebar {
	border: none!important;
	background: #F5F5F5!important;
	color: var(--colorMain);
	padding: 0 1em;
	margin-bottom: 1.56em;
	text-align: center;
	line-height: 1.6;
}
.ui-dialog .ui-dialog-title {
	width: 100%;
}
.ui-dialog-content {
	overflow-x: hidden!important;
}
.ui-dialog .ui-widget-content {
	background: #F5F5F5;
	height: auto!important;
}
.ui-state-default .ui-icon {
	background: none;
}
.ui-dialog .ui-dialog-titlebar-close {
	top: 0;
	margin: 0;
	background: url("../../images/common/mailClose.svg") no-repeat center top / cover;
	border: none;
}
.ui-button-icon-only .ui-button-text {
	padding: 0;
}
.ui-resizable-n,
.ui-resizable-e,
.ui-resizable-s,
.ui-dialog .ui-resizable-se,
.ui-resizable-sw,
.ui-resizable-ne,
.ui-resizable-nw {
	height: 0!important;
}

/* プライバシーポリシー */
.privacyPolicy article {
	margin-bottom: 2em;
	word-break: break-word;
}
.privacyPolicy header {text-align: left;}
.privacyPolicy header h4 {
	font-size: var(--size18px);
	font-weight: bold;
	margin-bottom: 1em;
	line-height: 1.5;
}
.privacyPolicy p,
.privacyPolicy ul li {
	line-height: 1.5;
	font-size: var(--size16px);
}
.privacyPolicy ul li {
	padding-left: 1em;
	text-indent: -1em;
}
.privacyPolicy .margin10 {
	margin-bottom: 1em;
}
.privacyPolicy .googlePolicy h4 {
	font-size: var(--size16px);
	font-weight: bold;
	margin-bottom: 0.5em;
}
.privacyPolicy .googlePolicy a {
	display: block;
	font-size: var(--size16px);
	text-decoration: underline;
	transition: all ease 0.3s;
}
.privacyPolicy .googlePolicy a:hover {
	text-decoration: none;
	opacity: 1;
}
.privacyPolicy .scrollBox {
	font-size: var(--size12px);
	padding: 1em;
	margin: 0 1em;
}

/*===============================================
●画面の横幅が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(--size20px);
		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;
		top: 2.75em;
		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: url("../../images/index/mainImgSP.jpg") no-repeat center / cover;
		position: relative;
	}

	/* SPで外枠をつくるときは、このクラスにつけてください */
	.mvSpBorder {
		height: 100%;
		border: 16px solid var(--colorBackGround);
	}
	.mv_inner .logo {
		width: 50%;
		max-width: 150px;
	}
	.mv_inner .mv_txt {
		width: auto;
		right: 32px;
		bottom: 32px;
	}
	.mv_inner .mv_txt h1 {
		font-size: var(--size16px);
		font-size: clamp(var(--size16px), 4vw, var(--size20px));
		line-height: 1.5;
	}
	.mv_inner .mv_txt span {
		font-size: var(--size48px);
		font-size: clamp(var(--size16px), 14vw, var(--size48px));
	}
	
	/* 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;}

	/* model41の事業内容で使われているレイアウトのスタイル */
	.contentsbox .articleWrap section:not(:last-child) {
		margin-bottom: 4rem;
	}

	/* 採用情報のテーブル */
	.contentsbox .recruitTable th {
		min-width: 62px;
	}
	.contentsbox .recruitTable td {
		padding-left: 1em;
		text-indent: -1em;
	}
	
	/* imgListBox */
	.contentsbox .imgListBox {
		gap: 16px;
	}
	.contentsbox .imgListBox .imgListItem {
		width: 100%;
	}

	/* トピックス */
	#TopicsList li {
		padding-bottom: 1rem;
	}
	#TopicsList li:not(:last-child) {
		margin-bottom: 1rem;
	}
	#TopicsList li time {
		margin-bottom: 4px;
	}

	/* 問合せとプライバシーポリシー共通ボタン */
	a.formBtn {
		font-size: var(--size16px);
		margin-bottom: 24px;
	}

	/* お問合せ */
	#contactForm .inner {
		padding: 0;
	}
	#contactForm .contactTable {
		margin-bottom: 4rem;
	}
	#contactForm .contactTable th,
	#contactForm .contactTable td {
		display: block;
		width: 100%;
	}
	#contactForm .contactTable th {
		padding: 0.5em 0;
	}
	#contactForm .contactTable td {
		padding-bottom: 1.5em;
	}
	#contactForm .contactTable input,
	#contactForm .contactTable select,
	#contactForm .contactTable textarea {
		font-size: var(--size16px);
		padding: 12px 16px 12px 12px;
	}
	#contactForm .contactTable #TelNo,
	#contactForm .contactTable .widthHalf {
		width: 100%;
	}
	#contactForm .contactTable #TelNo {
		margin-bottom: 0.5em;
	}
	#contactForm .contactTable #PostalCode-error {
		top: 2.6em;
	}
	#contactForm .contactTable .noHyphen.telcaution {
		display: block;
		font-size: 0.93em;
		margin: 0.5em 0 0 0;
	}

	/* 問合せ確認 */
	#contactForm #confirmTable.contactTable {
		margin-bottom: 3.5em;
	}
	#contactForm #confirmTable.contactTable tr:not(:first-child) th {
		padding: 1em 0 1em;
	}
	#contactForm #confirmTable.contactTable tr:first-child th {
		padding: 0 0 1em;
	}
	#confirmTable.contactTable td {
		font-size: var(--size16px);
		line-height: 1.6;
		padding-bottom: 1em;
	}
	#confirmTable.contactTable td span {
		margin-right: 0.5em;
	}
	#contactForm .btnBox {
		display: flex;
		flex-direction: column;
	}
	#contactForm a.prevBtn {
		position: relative;
		font-size: var(--size16px);
		margin-bottom: 24px;
		order: 1;
	}
	#contactForm a.formBtn {
		margin-bottom: 24px;
		order: 0;
	}
	#contactForm a.prevBtn i {
		position: absolute;
		top: 50%;
		transform: translateY(-50%) rotate(180deg);
		left: 24px;
		margin-top: 1px;
	}

	/* 問合せ完了 */
	#contactForm.contactResult .inner {
		padding-top: 16px;
	}
	#contactForm.contactResult h2 {
		font-size: var(--size20px);
	}
	#contactForm.contactResult p {
		font-size: var(--size16px);
		line-height: 1.7;
		margin-bottom: 72px;
	}

	/* ダイアログ再定義 */
	.ui-dialog {
		padding: 32px 16px;
	}
	.ui-dialog .ui-dialog-titlebar {
		font-size: var(--size18px);
	}
	.ui-dialog .ui-dialog-titlebar-close {
		width: 25px;
		height: 42px;
		right: 0.5em;
	}
	.privacyPolicy .scrollBox {margin: 0;}
}

/*===============================================
●画面の横幅が769px以上(PCのみ)
===============================================*/
@media screen and (min-width: 769px){
	
	/*共通*/
	.title01 {
		font-size: 2.75rem; /* 44px */
		margin-bottom: 40px;
	}
	.title02 {	
		font-size: 1.75rem; /* 28px */
		padding-bottom: 24px;
	}
	.title02:after {
		width: 50px;
		bottom: 1rem;
		left: calc(50% - 25px);
	}
	.title03 {
		font-size: var(--size18px);
		padding-bottom: 36px;
	}
	.title03::after {
		width: 30px;
		top: 2em;
		left: calc(50% - 15px);
	}
	
	/* メインビジュアル */
	.mvWrap {
		height: 100vh;
		background: url("../../images/index/mainImg.jpg") no-repeat center / cover;
		position: relative;
	}
	.mv_inner {
		height: 100vh;
		border: 32px solid var(--colorBackGround);
		padding: 32px;
	}
	.mv_inner .mv_txt {
		right: 72px;
		bottom: 72px;
		color: var(--colorTextSub);
	}
	.mv_inner .mv_txt h1 {
		font-size: var(--size24px);
		margin-bottom: 16px;
	}
	.mv_inner .mv_txt span {
		display: inline-block;
		font-family: var(--font02);
		font-size: 6.875rem; /* 110px */
		line-height: 1.03;
		letter-spacing: 0.07em;
	}
	
	/* contents */
	.contentsHeader {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		padding-top: 24rem;
	}
	.contentsbox {
		max-width: 1100px;
		line-height: 2.26;
		margin: 0 auto;
	}
	.contentsbox .inner header {
		margin-bottom: 64px;
	}
	.contentsbox .inner header p {
		font-size: 1.375rem; /* 22px */
		line-height: 1.5;
	}

	/* model41の事業内容で使われているレイアウトのスタイル */
	.contentsbox .articleWrap section:not(:last-child) {
		margin-bottom: 96px;
	}

	/* タイトルに背景色がついたリスト */
	.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 .imgListBox {
		gap: 24px;
	}
	.contentsbox .imgListBox .imgListItem {
		width: calc((100% - (24px * 3)) / 4);
	}
	.contentsbox .imgListBox .imgListItem a img {
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}

	/* トピックス */
	#TopicsList li {
		display: flex;
		padding-bottom: 32px;
	}
	#TopicsList li:not(:first-child) {
		padding-top: 32px;
	}
	#TopicsList li time {
		width: 11%;
		min-width: 100px;
		margin-right: 32px;
	}
	#TopicsList li > span {
		width: calc(100% - 100px);
	}

	/* お問合せ*/
	#contactForm .inner {
		max-width: 797px;
	}
	#contactForm .contactTable {
		margin-bottom: 104px;
	}
	#contactForm .contactTable th {
		width: 190px;
		padding: 0.9em;
	}
	#contactForm .contactTable td {
		width: calc(100% - 190px);
	}
	#contactForm .contactTable tr:first-child th,
	#contactForm .contactTable tr:first-child td {
		padding: 0 0 24px 0;
	}
	#contactForm .contactTable tr:not(:first-child) th,
	#contactForm .contactTable tr:not(:first-child) td {
		padding: 24px 0;
	}
	#contactForm .contactTable tr:last-child th,
	#contactForm .contactTable tr:last-child td {
		padding: 24px 0;
	}
	#contactForm .contactTable input,
	#contactForm .contactTable select,
	#contactForm .contactTable textarea {
		font-size: var(--size20px);
		padding: 16px 20px 16px 16px;
	}
	#contactForm .contactTable .widthHalf {
		width: 50%;
	}
	#contactForm .contactTable #PostalCode-error {
		top: 3.8em;
	}
	#contactForm a.formBtn {
		width: calc(100% - 190px);
		font-size: var(--size18px);
		margin-left: auto;
	}

	/* 入力内容の確認 */
	#confirmTable.contactTable {
		margin-bottom: 104px;
	}
	#contactForm #confirmTable.contactTable th,
	#contactForm #confirmTable.contactTable td {
		padding: 24px 0;
	}
	#confirmTable tbody th {
		border-bottom: 1px solid #DFDFDF;
	}
	#confirmTable.contactTable td {
		font-size: var(--size18px);
		line-height: 1.8;
	}
	#confirmTable.contactTable td span {
		margin-right: 0.75em;
	}
	#contactForm .btnBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#contactForm a#confirmSend {
		width: 64%;
		max-width: 496px;
		margin-left: unset;
	}
	#contactForm a.prevBtn {
		width: 27.8%;
		max-width: 216px;
		font-size: var(--size18px);
		padding-right: 16px;
	}

	/* 問合せ完了 */
	#contactForm.contactResult .inner {
		padding-top: 5em;
	}
	#contactForm.contactResult h2 {
		font-size: var(--size24px);
	}
	#contactForm.contactResult p {
		font-size: var(--size18px);
		line-height: 2;
		margin-bottom: 10em;
	}
	#contactForm.contactResult a.formBtn {
		margin: 0 auto;
	}

	/* プライバシーポリシー */
	.privacyPolicy a.formBtn {
		max-width: 500px;
		font-size: var(--size18px);
		margin: 80px auto 160px;
	}


	/* ダイアログ再定義 */
	.ui-dialog {
		padding: 4.13em 1em 0;
	}
	.ui-dialog .ui-dialog-titlebar {
		font-size: var(--24px);
		margin-bottom: 64px;
	}
	.ui-dialog .ui-dialog-titlebar-close {
		width: 45px;
		height: 76px;
		right: 1.875em;
	}
}