@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main {
	margin-top: -10rem;
}
.mainVisual {
	position: relative;
	background: url(../img/index/main_img01.jpg) no-repeat left top / 100% 100%;
	min-height: 78rem;
	overflow-x: clip;
}
.mainVisual .bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	bottom: 0;
	width: calc(50% + 5.4rem);
}
.mainVisual .bg img {
	width: 100%;
}
.mainVisual .imgtext {
	position: absolute;
	z-index: 2;
	top: 13.3rem;
	left: 5rem;
	width: 55.2rem;
}
.mainVisual .photo {
	position: absolute;
	z-index: 3;
	top: 16.6rem;
	left: calc(50% - 45rem);
	width: 85rem;
}
.mainVisual .photo img {
	width: 100%;
}
.mainVisual .title {
	width: 100%;
	max-width: 127rem;
	position: absolute;
	z-index: 3;
	bottom: 2.3rem;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	text-align: right;
	font-weight: 500;
	font-size: 4.2rem;
	letter-spacing: 0.3em;
}
.mainVisual .sub {
	display: block;
	transition-delay: .3s;
}
.mainVisual .title .jp {
	margin-right: 2.3rem;
}
.mainVisual .title .en {
	display: block;
	text-align: center;
	font-weight: 900;
	font-size: 11.4rem;
	font-style: italic;
	letter-spacing: 0.03em;
	line-height: 1.25;
}
@media all and (min-width: 897px) {
	.mainVisual .bg {
		background: url(../img/index/main_bg02.png) no-repeat left bottom / 100% 100%;
	}
	.mainVisual .bg01 {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1;
		width: calc(50% + 5.4rem);
		height: 68.375vw;
		min-height:93.4rem;
		background: url(../img/index/main_bg01.png) no-repeat left bottom / 100% 100%;
	}
}
@media all and (min-width: 1367px) {
	.mainVisual {
		height: 57.101vw;
	}
	.mainVisual .photo {
		top: 12.152vw;
		left: 17%;
		width: 62.225vw;
	}
}
@media all and (max-width: 896px) {
	.fixedBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 8;
	}
	.fixedBtn li {
		width: 50%;
		text-align: center;
	}
	.fixedBtn a {
		padding: 1.3rem 0.5rem 1.2rem;
		color: #fff;
		font-weight: 500;
		font-size: 1.6rem;
		letter-spacing: 0.2em;
		background-color: #89A2E8;
		display: block;
	}
	.fixedBtn .li01 a {
		padding-left: 1.2rem;
		letter-spacing: 0.15em;
		background-color: #BCA2E8;
	}
	.fixedBtn .li01 a span {
		padding-left: 3rem;
		background: url(../img/common/icon01.png) no-repeat left top calc(50% + 0.1rem) / 2.2rem;
	}
	#main {
		margin-top: -6rem;
	}
	.mainVisual {
		background-image: url(../img/index/main_img01_sp.jpg);
		height: 179.2vw;
		min-height: 67.2rem;
	}
	.mainVisual .bg {
		top: 6rem;
		width: 100%;
	}
	.mainVisual .imgtext {
		top: 9.9rem;
		left: 50%;
		transform: translateX(-48.8%);
		width: 32.7rem;
	}
	.mainVisual .photo {
		top: 63.733vw;
		left: calc(50% - 40.267vw);
		width: 113.333vw;
	}
	.mainVisual .title {
		max-width: 37.5rem;
		bottom: 7.3rem;
		font-size: 2.1rem;
	}
	.mainVisual .title .jp {
		margin-right: 2.5rem;
	}
	.mainVisual .title .en {
		font-size: 5.5rem;
		letter-spacing: 0.025em;
		line-height: 1.1;
	}
}
/* concept */
#main .concept {
	padding: 20.5rem 0 54.7rem;
	position: relative;
	overflow-x: clip;
	background: linear-gradient(to bottom, #fff 62%, #F5F5F5 100%);
}
#main .concept .content {
	position: relative;
	z-index: 2;
	max-width: 100.5rem;
}
#main .concept .photo01 {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 63rem;
	pointer-events: none;
}
#main .concept .photo01 img {
	width: 100%;
}
#main .concept .photo02 {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	pointer-events: none;
}
#main .concept .photo02 img {
	width: 100%;
}
#main .concept .textBox {
	max-width: 65rem;
}
#main .concept .title {
	margin-bottom: 3.5rem;
	font-size: 2.6rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.75;
}
#main .concept .title .big {
	margin-top: 2.3rem;
	display: block;
	font-weight: 600;
	font-size: 4rem;
	line-height: 1.57;
	letter-spacing: 0.05em;
}
#main .concept .text {
	margin-bottom: 8.2rem;
	text-align: justify;
	line-height: 2.125;
	letter-spacing: 0.05em;
}
#main .concept .comBtn a {
	font-weight: 300;
}
@media all and (min-width: 1281px) {
	#main .concept {
		padding: 15.007vw 0 40.044vw;
	}
}
@media all and (max-width: 896px) {
	#main .concept {
		position: static;
		padding: 0;
	}
	#main .concept .photo01 {
		position: static;
		margin: 0 0 3.5rem auto;
		width: 81%;
		pointer-events: visible;
	}
	#main .concept .photo02 {
		margin-top: -13.7rem;
		position: static;
		pointer-events: visible;
	}
	#main .concept .textBox {
		position: relative;
		z-index: 3;
		max-width: 100%;
	}
	#main .concept .title {
		margin: 0 0 3.2rem 0.5rem;
		font-size: 1.8rem;
		line-height: 1.26;
	}
	#main .concept .title .big {
		margin-top: 1.3rem;
		font-size: 2.3rem;
		line-height: 1.58;
		letter-spacing: 0.02em;
	}
	#main .concept .text {
		margin: 0 1rem 5.3rem; 
		line-height: 2;
		letter-spacing: 0;
	}
}
/* business */
#main .business {
	position: relative;
	background-color: #F5F5F5;
}
#main .business .topBox {
	margin-bottom: 16.5rem;
	padding-bottom: 5rem;
	position: relative;
}
#main .business .topBox::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.65);
	width: calc(50% + 46.8rem);
	height: 65%;
}
#main .business .content {
	margin-top: -6.7rem;
	max-width: 91rem;
}
#main .business .headLine02 {
	position: relative;
	z-index: 2;
}
#main .business .text {
	position: relative;
	z-index: 3;
	letter-spacing: 0.05em;
	line-height: 2.125;
}
#main .business .businessUl {
	gap: 7.7rem 3rem;
	margin: 0 auto;
	max-width: 83.5rem;
}
#main .business .businessUl li {
	width: 42%;
}
#main .business .businessUl a {
	margin-bottom: 3.2rem;
	display: block;
	background-color: #fff;
	border-radius: 1.5rem 1.5rem 0 0;
	overflow: hidden;
}
#main .business .businessUl a:hover {
	opacity: 0.5;
}
#main .business .businessUl h3 {
	padding: 3.2rem 7rem 3.8rem 3.2rem;
	color: #073296;
	font-weight: 500;
	font-size: 3.2rem;
	letter-spacing: 0.2em;
	background: url(../img/common/icon08.png) no-repeat right 1.7rem top 3.2rem / 5rem;
}
#main .business .businessUl h3 .en {
	margin-top: 0.7rem;
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: 0.075em;
	font-family: "Roboto", sans-serif;
}
#main .business .businessUl .photo img {
	width: 100%;
}
#main .business .businessUl .info {
	letter-spacing: 0.05em;
	line-height: 1.875;
}
#main .business .businessUl .li01 .jp {
	letter-spacing: 0.05em;
}
#main .business .businessUl .li02 .jp {
	letter-spacing: 0.1em;
}
#main .business .businessUl .info01 {
	letter-spacing: 0.01em;
}
@media all and (max-width: 896px) {
	#main .business {
		padding:9.5rem 0;
	}
	#main .business .topBox {
		margin-bottom: 6rem;
		padding-bottom: 4.7rem;
	}
	#main .business .topBox::after {
		width: calc(100% - 2rem);
		height: 80%;
	}
	#main .business .content {
		margin: 0 3rem;
	}
	#main .business .text {
		letter-spacing: 0.02em;
		line-height: 2;
		text-align: justify;
	}
	#main .business .businessUl {
		max-width: 100%;
		display: block;
	}
	#main .business .businessUl li {
		margin: 0 auto 5.8rem;
		width: 92.5%;
	}
	#main .business .businessUl li:last-child {
		margin-bottom: 0;
	}
	#main .business .businessUl a {
		margin-bottom: 3.2rem;
		border-radius: 1rem 1rem 0 0;
	}
	#main .business .businessUl h3 {
		padding: 1.7rem 6.5rem 1.2rem 2rem;
		font-size: 2.4rem;
		letter-spacing: 0.1em !important;
		background-size: 3.65rem auto;
		background-position: right 2.4rem top 3.2rem;
	}
	#main .business .businessUl h3 .en {
		margin-top: 0.5rem;
		font-size: 1.3rem;
	}
	#main .business .businessUl .info {
		margin-left: 0.7rem;
		line-height: 1.78;
	}
	#main .business .businessUl .info01 {
		letter-spacing: 0.05em;
	}
}
/* company */
#main .company {
	padding-bottom: 1px;
	position: relative;
	z-index: 3;
	background-color: #F5F5F5;
}
#main .company .bg {
	position: absolute;
	top: -0.5rem;
	left: 0;
	width: 100%;
	bottom: 0;
	z-index: 1;
}
#main .company .bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right top;
}
#main .company .sub {
	padding-top: 22rem;
	position: relative;
}
#main .company .sub::before {
	position: absolute;
	z-index: -2;
	top: -18rem;
	left: -15rem;
	width: 49.7rem;
	height: 59.3rem;
	content: "";
	pointer-events: none;
	background: url(../img/index/company_line01.png) no-repeat left bottom / 100%;
}
#main .company .sub::after {
	position: absolute;
	z-index: 1;
	top: -3.7rem;
	left: 12.3rem;
	width: 28.5rem;
	height: 38.4rem;
	content: "";
	pointer-events: none;
	background: url(../img/index/company_line02.png) no-repeat left bottom / 100%;
}
#main .company .headLine02 {
	margin-bottom: 7rem;
	padding-top: 2.5rem;
	background-position: right 29.3rem top;
}
#main .company .headLine02 .en {
	margin-top: 6rem;
	color: #fff;
}
#main .company .imgBox {
	position: relative;
	z-index: 3;
	margin: 0 0 20.3rem auto;
	width: calc(50% + 45.5rem);
}
#main .company .imgBox .textBox {
	width: 48rem;
}
#main .company .imgBox .textBox .text {
	margin: 0 0 8rem 2.2rem;
	width: 39rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2.125;
	color: #fff;
}
#main .company .imgBox .photoBox {
	margin-top: 12rem;
	width: calc(100% - 53.5rem);
}
#main .company .imgBox .photoBox img {
	width: 100%;
}
#main .company .comBtn {
	margin: 0 0 0 4.3rem;
}
#main .company .comBtn a {
	padding-bottom: 1.9rem;
	border: 0;
}
#main .company .comBtn a::before {
	right: 4.3rem;
}
#main .company .comNetBox {
	margin-bottom: -11.5rem;
}
@media all and (min-width: 1281px) {
	#main .company .imgBox {
		margin-bottom: 14.861vw;
	}
	#main .company .sub {
		padding-top: 16.105vw;
	}
	#main .company .sub::before {
		top: -13.177vw;
		left: -10.981vw;
		width: 36.384vw;
		height: 43.411vw;
	}
	#main .company .sub::after {
		top: -2.709vw;
		left: 9.004vw;
		width: 20.864vw;
		height: 28.111vw;
	}
}
@media all and (max-width: 896px) {
	#main .company {
		padding: 0 2rem 1px;
	}
	#main .company .bg {
		top: 0.4rem;
		clip-path: polygon(0 12%, 100% 0%, 100% 100%, 0% 100%);
	}
	#main .company .bg img {
		object-position: left bottom;
	}
	#main .company .sub {
		padding-top: 0;
	}
	#main .company .sub::before {
		top: -25rem;
        left: -8.8rem;
        width: 24.5rem;
        height: 45.3rem;
	}
	#main .company .sub::after {
		top: -9.1rem;
        left: 0.6rem;
        width: 14.3rem;
        height: 19.2rem;
		background-image: url(../img/index/company_line02_sp.png);
	}
	#main .company .headLine02 {
		margin-bottom: 1.3rem;
		padding-top: 2.5rem;
		background-position: left 13rem top 3rem;
	}
	#main .company .imgBox {
		margin: 0 1rem 4.8rem;
		width: auto;
	}
	#main .company .imgBox .textBox {
		width: auto;
	}
	#main .company .imgBox .textBox .text {
		margin: 0 1rem 3.3rem 0.2rem;
		width: auto;
		text-align: justify;
		font-weight: 300;
		letter-spacing: 0;
		line-height: 2;
	}
	#main .company .imgBox .photoBox {
		margin: 0 auto;
		width: 95.8%;
	}
	#main .company .comBtn {
		margin: 0 auto 13.8rem;
		position: relative;
		z-index: 10;
	}
	#main .company .comBtn a {
		padding-bottom: 1.6rem;
		font-weight: 300;
		border: 0;
	}
	#main .company .comBtn a::before {
		right: 3.7rem;
	}
	#main .company .comNetBox {
		margin-bottom: -6.2rem;
	}
}
@media all and (min-width: 630px) and (max-width: 896px) {
	#main .company .bg {
		clip-path: polygon(0 9%, 100% 0%, 100% 100%, 0% 100%);
	}
}
/* safety */
#main .safety {
	padding-top: 29.9rem;
	position: relative;
	z-index: 1;
	background-color: #EBF6F9;
}
#main .safety::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	z-index: -1;
	width: 34rem;
	height: 66rem;
	background: url(../img/index/safety_bg01.png) no-repeat left top / 100%;
	pointer-events: none;
}
#main .safety::after {
	position: absolute;
	top: 15.6%;
	right: 0;
	content: "";
	z-index: -1;
	width: 54.7rem;
	height: 85.5rem;
	background: url(../img/index/safety_bg02.png) no-repeat right top / 100%;
	pointer-events: none;
}
#main .safety .content {
	padding: 0 1rem;
	max-width: 117.7rem;
}
#main .safety .imgBox {
	margin-bottom: 15rem;
	padding-left: 11.3rem;
	align-items: center;
}
#main .safety .headLine02 {
	padding: 0 11rem 0 0.5rem;
	margin-bottom: 5.5rem;
	background-position: right bottom 2.3rem;
}
#main .safety .textBox {
	width: calc(100% - 56.5rem);
}
#main .safety .textBox .text {
	margin-bottom: 7.7rem;
	text-align: justify;
	letter-spacing: 0.05em;
	line-height: 2.125;
}
#main .safety .photoUl {
	width: 50.2rem;
}
#main .safety .photoUl li {
	width: 35rem;
}
#main .safety .photoUl .li01 {
	margin: 0 0 -4rem auto;
	width: 32.6rem;
}
#main .safety .comBtn {
	margin-left: 0;
}
#main .safety .comBtn a {
	font-weight: 300;
	background-color: transparent;
}
#main .safety .subPhotolUl li {
	width: 25.6%;
}
#main .safety .subPhotolUl .li01 {
	width: 24.4%;
}
#main .safety .subPhotolUl img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media all and (max-width: 896px) {
	#container {
		padding-bottom: 4.9rem;
	}
	#main .safety {
		padding-top: 15.5rem;
	}
	#main .safety::before {
		width: 16rem;
		height: 36rem;
		background-size: 100% 100%;
	}
	#main .safety::after {
		top: 30.9%;
		width: 27.4rem;
		height: 60.7rem;
		background-image: url(../img/index/safety_bg02_sp.png);
	}
	#main .safety .content {
		padding: 0 1rem;
	}
	#main .safety .imgBox {
		margin-bottom: 10rem;
		padding-left: 0;
		display: block;
	}
	#main .safety .headLine02 {
		padding: 0 7.5rem 0 0;
		margin-bottom: 2.2rem;
		background-position: right bottom 1.7rem;
	}
	#main .safety .textBox {
		width: auto;
	}
	#main .safety .textBox .text {
		margin-bottom: 4.5rem;
		letter-spacing: 0;
		line-height: 2;
	}
	#main .safety .photoUl {
		margin: 0 auto 6.2rem;
		width: auto;
	}
	#main .safety .photoUl li {
		width: 73% !important;
	}
	#main .safety .photoUl .li01 {
		margin-bottom: -5.2rem;
	}
	#main .safety .photoUl img {
		width: 100%;
	}
	#main .safety .comBtn {
		margin: 0 auto;
	}
	#main .safety .subPhotolUl li {
		width: 50% !important;
	}
}