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

/* タイトルのスタイル */
.title01 {
	color: var(--colorTextMain);
	font-family: var(--font01);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	line-height: 1.5;
}
.title02 {
	color: var(--colorMain);
	font-family: var(--font02);
	letter-spacing: 0.08em;
	text-align: center;
}
.title03 {
	position: relative;
	color: var(--colorMain);
	font-family: var(--font01);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-align: center;
}
.title03::after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	content: "";
	border-top: 2px solid var(--colorMain);
}

/* リード文 */
.leadTitle {
	font-family: var(--font01);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-align: center;
}
.leadText {
	font-family: var(--font01);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

/* 本文テキスト */
.articleWrap p {
	font-family: var(--font01);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

/* mainVisual */
.mv {
	width: 100%;
	height: 100svh;
}
.mvWrap {
	width: 100%;
	height: 100%;
}
.mv_inner {
	width: 100%;
	height: 100%;
}
.mv_inner .logo {
	position: absolute;
}
.mv_inner .logo a {
	display: inline-block;
}
.mvContainer .areaText .titleJp {
	color: var(--colorMain);
	font-family: var(--font01);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	padding-bottom: 1em;
	margin-top: 0.75em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--colorMain);
}
.mvContainer .areaText .note {
	font-family: var(--font01);
	letter-spacing: 0.04em;
	line-height: 1.75;
}
.mvContainer .areaImage picture {
	display: block;
	width: 100%;
	height: 100%;
}
.mvContainer .areaImage picture img {
	width: 100%;
	height: auto;
}


/* contents */
.contentsbox {
	background-color: var(--colorBackGround);
}
#contentsCompany {background-image: url("../../images/index/imgCompany.jpg"); }
#contentsService {background-image: url("../../images/index/imgService.jpg"); }
#contentsContact {background-image: url("../../images/index/imgContact.jpg"); }

.contentsbox ul li {
	padding-left: 1em;
	text-indent: -1em;
}

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

/* お問合せの電話リンクボタン */
.businessHours {
	font-family: var(--font01);
	font-weight: 500;
	text-align: center;
}
.linkContact {
	width: fit-content;
	margin:  12px auto 0;
}
.linkContact a {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--colorMain);
	font-family: var(--font03);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
}
.linkContact a::before {
	content: "";
	display: inline-block;
	mask-image: url(../../images/index/iconTel.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	background-color: var(--colorMain);
}

/*===============================================
●画面の横幅が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;
	}
	.title03 {
		font-size: var(--size18px);
		padding-bottom: 36px;
	}
	.title03::after {
		width: 30px;
		top: 2.75em;
	}
	.contentsbox .inner header p {
		font-size: var(--size18px);
		margin-bottom: 28px;
	}

	/* メインビジュアル */
	.mv {
		height: calc(100svh - var(--headerHightSP));
	}

	/* リード文 */
	.leadTitle {
		font-size: 1.5rem; /* 24px */
	}
	.leadText {
		font-size: 1rem; /* 18px */
		margin-bottom: 40px;
	}
	
	/* リンク */
	a.btn {
		width: 90%;
		padding: 8px 0;
	}
	
	/* 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 {
		margin-top: 24px;
	}
	.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;
	}

	/* お問合せのリンクテキスト */
	.linkContact a {
		font-size: var(--size32px);
	}
	.linkContact a::before {
		width: 40px;
		height: 40px;
	}
}

/*===============================================
●画面の横幅が769px以上(PCのみ)
===============================================*/
@media screen and (min-width: 769px){
	
	/*共通*/
	.title01 {
		font-size: var(--size40px);
		margin-bottom: 16px;
	}
	.title02 {	
		font-size: var(--sizr16px);
		margin-bottom: 56px;
	}
	.title03 {
		font-size: var(--size24px);
		padding-bottom: 64px;
	}
	.title03::after {
		width: 30px;
		top: 2.5em;
	}

	/* メインビジュアル */
	.mv {
		height: 100svh;
	}

	/* リード文 */
	.leadTitle {
		font-size: 1.5rem; /* 24px */
	}
	.leadText {
		font-size: 1.125rem; /* 18px */
		margin-bottom: 56px;
	}

	/* 本文テキスト */
	.articleWrap p {
		font-size: var(--size18px);
	}
	
	/* contents */
	.contentsHeader {
		background-repeat: no-repeat;
		background-position: top center;
		background-size: contain;
		padding-top: 18rem;
	}
	.contentsbox {
		max-width: 1100px;
		line-height: 2.26;
		margin: 0 auto;
	}
	.contentsbox .inner header {
		margin-bottom: 120px;
	}
	/* 事業内容 */
	#contentsCompany .inner header {
		margin-bottom: 24px;
	}

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

	/* タイトルに背景色がついたリスト */
	.contentsbox dl {
		margin-top: 40px;
	}
	.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;
	}

	/* お問合せのリンクテキスト */
	.linkContact a {
		font-size: var(--size40px);
	}
	.linkContact a::before {
		width: 40px;
		height: 40px;
	}
}

/*===============================================
●画面の横幅が 589px(Sp)
===============================================*/
@media screen and (max-width: 589px) {

	/* メインビジュアル */
	.mv_inner {
		padding: 32px 10%;
	}
	.mvContainer {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	.mvContainer .areaText .titleEn {
		width: 80%;
	}
	.mvContainer .areaText .titleJp {
		font-size: clamp(16px, 4vw, 26px); /* 18px ～ 28px 可変*/
	}
	.mvContainer .areaText .note {
		font-size: clamp(12px, 3vw, 16px); /* 900px 以上で 16px ～ 24px 可変*/
	}
}
/*===============================================
●画面の横幅が 590～899px(Tab)
===============================================*/
@media screen and (min-width: 590px) and (max-width: 899px) {

	/* メインビジュアル */
	.mv_inner {
		padding: 40px 2.6%;
	}
	.mvContainer {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.mvContainer .areaText {
		flex: unset;
		padding-left: 2.6%;
		margin-right: auto;
	}
	.mvContainer .areaText .areaTextInner {
		width: 70%;
	}
	.mvContainer .areaText .titleJp {
		font-size: clamp(22px, 3.7vw, 32px); /* 22px ～ 32px 可変*/
	}
	.mvContainer .areaText .note {
		font-size: clamp(12px, 2vw, 16px); /* 900px 以上で 16px ～ 24px 可変*/
	}
	.areaImage {
		margin-top: 8%;
	}
}

/*===============================================
●画面の横幅が 900px(Pc)
===============================================*/
@media screen and (min-width: 900px) {

	/* メインビジュアル */
	.mv_inner {
		padding: 40px 2.6%;
	}
	.mvContainer {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.mvContainer .areaText {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
	}
	.mvContainer .areaText .areaTextInner {
		width: 82%;
		margin: 0 auto;
	}
	.mvContainer .areaText .titleEn {
		width: 100%;
	}
	.mvContainer .areaText .titleEn img {
		width: 100%;
	}
	.mvContainer .areaText .titleJp {
		font-size: clamp(18px, 2vw, 32px); /* 900px 以上で 18px ～ 48px 可変*/
	}
	.mvContainer .areaText .note {
		font-size: clamp(10px, 1.1vw, 16px); /* 900px 以上で 16px ～ 24px 可変*/
	}
	.mvContainer .areaImage {
		width: 51%;
	}
}

/*===============================================
●画面の横幅が 900px(Pc)
===============================================*/
@media screen and (min-width: 1537px) {
	.mvContainer .areaText .titleJp {
		font-size: clamp(18px, 2vw, 52px); /* 900px 以上で 18px ～ 48px 可変*/
	}
	.mvContainer .areaText .note {
		font-size: clamp(12px, 1.3vw, 24px); /* 900px 以上で 16px ～ 24px 可変*/
	}
}