@charset "utf-8";

/*===============================================
page -> index.css
===============================================*/

/* メインビジュアル
---------------------------------------- */
.mv {
	max-width: 1940px;
	margin: 0 auto;
	position: relative;
}

.mv_inner .logo {
	position: absolute;
}

.mv_txt {
	position: absolute;
}

.mv_txt span {
	color: #fff;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	line-height: 1;
}

/* 各セクション共通
---------------------------------------- */
.indexBg {
	aspect-ratio: 1366 / 350;
	width: 100%;
	position: relative;
}

.sectionEnTitle {
	position: absolute;
}

.indexBg01 {
	background: url(../../images/index/index_img01.jpg) no-repeat right/cover;
}

.indexBg02 {
	background: url(../../images/index/index_img02.jpg) no-repeat right/cover;
}

.indexBg03 {
	background: url(../../images/index/index_img03.jpg) no-repeat right/cover;
}

.indexBg04 {
	background: url(../../images/index/index_img04.jpg) no-repeat right/cover;
}

.contentsText {
	letter-spacing: 0.02em;
	line-height: 1.875;
}

.contentsTextCenter {
	letter-spacing: 0.02em;
	line-height: 1.875;
	text-align: center;
}

/* 理事長挨拶
---------------------------------------- */
.greetingText {
	letter-spacing: 0.02em;
	line-height: 1.875;
	text-indent: 1em;
}

.presidentName01 {
	text-align: right;
	margin-top: 1.4em;
}

.presidentName02 {
	text-align: right;
}

.presidentName02 > span {
	margin-left: 1.8em;
}

.purposeListWrapper {
	text-align: center;
}

.purposeList {
	display: inline-block;
}

.purposeList > li {
	letter-spacing: 0.02em;
	line-height: 2.125;
	text-align: left;
}

.purposeList > li:before {
	content: "■";
}

/* クリーンレーザー工法とは
---------------------------------------- */
.featureList {
	display: flex;
}

.featureList > li > p {
	text-align: center;
}

.youtubeAbout {
	position: relative;
}

.youtubeAbout * {
	position: absolute;
	top: 0;
	left: 0;
}

.btnWrapper {
	display: flex;
	justify-content: center;
	margin-top: 3.75em;
}

/* 協会について
---------------------------------------- */
.associationList > dt {
	background: #eff5fc;
	color: #4070b0;
	font-family: "Noto Sans JP", sans-serif;
	padding: 0.5em 1.9em;
	font-weight: bold;
}

.associationList > dd {
	line-height: 1.875;
}

.memberList {
	border: #ecf6fe 20px solid;
}

.memberList > dt {
	font-weight: bold;
	color: #4070b0;
	display: flex;
	align-items: center;
}

.memberList > dt:before {
	content: "■";
	margin-right: 1em;
	font-size: 0.65em;
}

.memberList > dd {
	font-weight: bold;
}

.aboutTitle {
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.02em;
}

.sdgsList > li {
	display: flex;
}

.sdgsItemImg {
	flex-shrink: 0;
}

.sdgsList > li > p {
	line-height: 1.66;
}

/* お問合せ
---------------------------------------- */
.contactBox {
	border: #ecf6fe 20px solid;
}

.contactContainer {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.contactNumber {
	color: #4070b0;
	font-weight: bold;
	letter-spacing: 0.02em;
}

.iconMail {
	margin-right: 0.7em;
}

.tel > span {
	font-size: 0.56em;
}

.iconTel,
.iconFax {
	margin-right: 0.5em;
	display: inline-flex;
}

.iconMail > svg,
.iconTel > svg,
.iconFax > svg {
	fill: #4070b0;
}

.iconMail > svg {
	width: 1.27em;
	height: 0.83em;
	transition: fill 0.3s;
}

.iconTel > svg {
	width: 1.18em;
	height: 1.625em;
}

.iconFax > svg {
	width: 1.68em;
	height: 1.56em;
}

.contactText {
	letter-spacing: 0.02em;
	font-weight: 500;
}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media not all and (min-width: 769px) {
	/* 共通
	---------------------------------------- */

	a.btn {
		width: 90%;
		padding: 1em 0;
	}

	.headingLv1 {
		margin-bottom: 0.5em;
	}

	/* 各セクション共通
	---------------------------------------- */
	.sectionContents {
		padding-bottom: 6.5em;
	}

	.sectionContents:first-of-type {
		margin-top: 5em;
	}

	.indexBg {
		height: 150px;
	}

	.sectionEnTitle {
		font-size: 3em;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.container {
		padding: 2.5em 0 0;
	}

	.containerText {
		margin-top: 3.5em;
	}

	/* メインビジュアル
	---------------------------------------- */
	.mv {
		background: url(../../images/index/mainimage_sp.jpg) no-repeat center bottom/ cover;
	}

	.mv_inner {
		height: 100vh;
		min-height: -webkit-fill-available;
		padding: 70px 1em 0;
		position: relative;
		border: 15px solid #fff;
	}

	.mv_inner .logo {
		display: none;
	}

	.mv_txt {
		top: 12%;
		left: 4%;
	}

	.mvLead01 {
		font-size: 3.93em;
		letter-spacing: 0.1em;
	}

	.mvLead02 {
		font-size: 2.625em;
		letter-spacing: 0.005em;
	}

	.mvLead03 {
		letter-spacing: 0.123em;
	}

	/* 理事長挨拶
	---------------------------------------- */
	.greetingWrapper {
		margin-top: 2em;
	}

	.purposeListWrapper {
		margin-top: 1.7em;
	}

	/* クリーンレーザー工法とは
	---------------------------------------- */
	.featureList {
		gap: 1.5em 5%;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.featureList > li {
		width: calc(50% - 5% / 2);
	}

	.featureImg > img {
		width: 100%;
	}

	.featureList > li > p {
		font-size: 0.875em;
		margin-top: 1.14em;
		line-height: 1.57;
	}

	.aboutTextWrapper {
		margin-top: 3em;
	}

	.aboutWrapper {
		margin-top: 5em;
	}

	.principleImg {
		margin-top: 1em;
		text-align: center;
	}

	.featureList {
		justify-content: space-between;
	}

	.productArea + .productArea {
		margin-top: 4.4em;
	}

	.productImg > img {
		width: 100%;
	}

	.contentsTextWrapper {
		margin-top: 1.25em;
	}

	.youtubeAbout {
		padding-top: calc(240 / 425 * 100%);
		width: 100%;
		margin-top: 1em;
	}

	.youtubeAbout > * {
		width: 100%;
		height: 100%;
	}

	.btnWrapper {
		margin-top: 3.75em;
	}

	/* 協会について
	---------------------------------------- */
	.associationWrapper {
		margin-top: 3em;
	}

	.associationList > dd {
		padding: 1.2em 1.9em;
	}

	.memberList {
		flex-wrap: wrap;
		padding: 1.8em 3% 1.8em 10.4%;
	}

	.memberList > dt {
		font-size: 1.2em;
	}

	.memberList > dt:not(:first-of-type) {
		margin-top: 1em;
	}

	.memberList > dt:before {
		margin-right: 1em;
	}

	.memberList > dd {
		font-size: 1.2em;
		align-self: center;
		padding: 0.5em;
	}

	.memberBlock > li {
		letter-spacing: 0.68em;
	}

	.sdgsTextWrapper {
		margin-top: 1.875em;
	}

	.sdgsImg {
		margin-top: 3.75em;
	}

	.sdgsListWrapper {
		margin-top: 3.5em;
	}

	.sdgsList {
		gap: 1.85em 1.875em;
	}

	.sdgsList > li:not(:first-child) {
		margin-top: 2em;
	}

	.sdgsList > li > p {
		margin-left: 1em;
		font-size: 1.125em;
	}

	/* お問合せ
	---------------------------------------- */
	.contactWrapper {
		margin-top: 3em;
	}

	.contactBtnWrapper {
		margin-top: 1.5em;
		display: flex;
		justify-content: center;
	}

	.contactBox {
		padding: 2.875em 5% 2em;
		text-align: center;
		margin-top: 1.2em;
	}

	.contactTel {
		margin-top: 1.18em;
		margin: 1.5em auto 0;
	}

	.contactContainer {
		justify-content: center;
	}

	.contactContainer + .contactContainer {
		margin-top: 1em;
	}

	.contactNumber {
		font-size: 1.5em;
	}

	.contactText {
		font-size: 1.125em;
	}

	.contactText + .contactText {
		margin-top: 1.2em;
	}
}

/*=====================================s==========
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 769px) {
	/* 各セクション共通
	---------------------------------------- */
	.sectionContents:not(:last-of-type) {
		padding-bottom: 9.5em;
	}

	.indexBg {
		margin-bottom: -3.9em;
		height: 350px;
	}

	.sectionEnTitle {
		font-size: 5em;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
	}

	.container {
		padding: 2.5em 0 0;
	}

	.headerMenu {
		position: relative;
		padding: 1em 0 2.5em;
		height: auto;
	}

	.mainMenu > ul {
		justify-content: center;
	}

	.containerText {
		margin-top: 3.5em;
	}

	/* メインビジュアル
	---------------------------------------- */
	.mv {
		background: url(../../images/index/mainimage.jpg) no-repeat center center / cover;
	}

	.mvTextWrapper {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 0.5em;
	}

	.mv_inner {
		height: 100vh;
		border: 30px solid #fff;
		position: relative;
	}

	.mv_inner .logo {
		top: 27px;
		left: 30px;
	}

	.logo > a {
		transition: 0.3s opacity;
	}

	.mv_txt {
		right: 15px;
		bottom: -8px;
	}

	.mvLead01 {
		font-size: min(9vw, 7.93em);
		letter-spacing: 0.06em;
	}

	.mvLead02 {
		font-size: min(6vw, 5.31em);
		letter-spacing: 0.085em;
	}

	/* 理事長挨拶
	---------------------------------------- */
	.greetingWrapper {
		margin-top: 5em;
	}

	.purposeListWrapper {
		margin-top: 1.7em;
	}

	/* クリーンレーザー工法
	---------------------------------------- */
	.aboutTextWrapper {
		margin-top: 5em;
	}

	.aboutWrapper {
		margin-top: 9.5em;
	}

	.principleWrapper {
		display: flex;
		justify-content: space-between;
	}

	.principleText,
	.principleImg {
		width: calc(425 / 900 * 100%);
	}

	.featureList {
		justify-content: space-between;
	}

	.featureList > li {
		width: calc(135 / 900 * 100%);
	}

	.featureList > li > p {
		font-size: 0.875em;
		margin-top: 2.14em;
		line-height: 1.57;
	}

	.productWrapper {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
	}

	.productArea + .productArea {
		margin-top: 4.4em;
	}

	.productText,
	.productImg {
		width: calc(425 / 900 * 100%);
	}

	.contentsTextWrapper {
		margin-top: 1.25em;
	}

	.youtubeAbout {
		padding-top: calc(240 / 900 * 100%);
		width: calc(425 / 900 * 100%);
	}

	.youtubeAbout > * {
		width: 100%;
		height: 100%;
	}

	.btnWrapper {
		margin-top: 3.75em;
	}

	/* 協会について
	---------------------------------------- */
	.associationWrapper {
		margin-top: 5em;
	}

	.associationList > dd {
		padding: 1.8em 1.9em;
	}

	.memberList {
		display: flex;
		flex-wrap: wrap;
		padding: 2.8em 3% 3.75em 9.4%;
	}

	.memberList > dt {
		width: 7em;
		font-size: 1.5em;
	}

	.memberList > dt:before {
		margin-right: 1em;
	}

	.memberList > dt:not(:first-of-type) {
		margin-top: 0.3em;
	}

	.memberList > dd {
		width: calc(100% - 7em);
		font-size: 1.5em;
		align-self: center;
		padding: 0.5em;
	}

	.memberBlock > li {
		letter-spacing: 0.68em;
	}

	.sdgsTextWrapper {
		margin-top: 1.875em;
	}

	.sdgsImg {
		margin-top: 3.75em;
	}

	.sdgsListWrapper {
		margin-top: 3.5em;
	}

	.sdgsList {
		display: flex;
		flex-wrap: wrap;
		margin: -1.5% -1%;
	}

	.sdgsList > li {
		width: 50%;
		padding: 1.5% 1%;
	}

	.sdgsList > li > p {
		margin-left: 1em;
		font-size: 1.125em;
	}

	/* お問合せ
	---------------------------------------- */
	.contactWrapper {
		margin-top: 5em;
	}

	.contactBtnWrapper {
		margin-top: 1.5em;
		display: flex;
		justify-content: center;
	}

	.contactBox {
		padding: 3.875em 1.5em 3em;
		text-align: center;
		margin-top: 1.5em;
	}

	.contactTel {
		max-width: 600px;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 1.18em;
		margin: 0.5em auto;
	}

	.contactTel > * + * {
		margin-left: 8.4%;
	}

	.contactNumber {
		font-size: 2em;
		pointer-events: none;
	}

	.btnContact:hover .iconMail > svg {
		fill: #fff;
	}

	.contactText {
		font-size: 1.125em;
	}

	.contactText + .contactText {
		margin-top: 1.2em;
	}
}