@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------------------
HOMEPAGE
-------------------------------------------------------------- */
#home body {
	background-color: #000;
	color: #fff;
}

#home ul {
	margin: 0;
}
 
#home ul li {
	padding-left: 0;
	position: static;
}

#home ul li::before {
	content: none;
}

#home ul li + li {
	margin-top: 0;
}

#home h2 {
	border-bottom: none;
	padding-bottom: 0;
	margin-top: 0;
}

#home p {
	margin-bottom: 0;
}

#home #headerArea h1 {
	z-index: 10;
}

#home #btnFixedArea p.off a img {
	border-color: #000;
	background-color: #fff;
}

#home #btnFixedArea p.on a img {
	border-color: #fff;
	background-color: #000;
}

#mainVisual {
	position: relative;
	min-height: 100dvh;
	/* min-height: 100vh; */
	margin-top: -120px;
}

#mainVisual #op {
	background-color: #000;
	position: relative;
	min-height: 100dvh;
	z-index: 9999;
	display: grid;
	align-items: center;
	justify-items: center;
	position: absolute;
	right: 0;
	left: 0;
	opacity: 1;
}

#mainVisual #op figure {
	opacity: 0;
}

#mainVisual #op figure img {
	width: 300px;
}

#mainVisual video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

#mainVisualArea {
	width: 1280px;
	margin: 0 auto;
	padding: 120px 40px 60px;
	min-height: 100dvh;
	display: grid;
	align-content: end;
}

#mainVisualArea p {
	position: relative;
}

#mainVisualArea p img {
	width: 950px;
}

#homeCont001 {
	background: url("../images/home/bgCont001Pctb.webp") no-repeat center bottom / cover;
}

#homeLead {
	position: relative;
	min-height: 940px;
	overflow: hidden;
}

#homeLead::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("../images/home/bgHomeLeadPctb.svg") no-repeat center top 20px / 2000px 920px;
	opacity: 0;
	transition: opacity 1.5s ease;
}

#homeLead.bg::before {
	opacity: 1;
}

#homeLead .contBox {
	padding-bottom: 0;
	position: relative;
}

#homeLead .sent {
	font-size: 2.5rem;
	line-height: 2.4;
	width: 700px;
}

#homeLead .sent h2 {
	font-size: 5.5rem;
	line-height: 1.5;
	margin-bottom: 30px;
}

#homeLead .sent h2, 
#homeLead .sent p {
	opacity: 0;
}

#homeWorks {
	padding: 80px 0;
}

#homeWorks h2 {
	width: 1280px;
	margin: 0 auto 30px;
	padding: 30px 40px 0;
	font-size: 3.6rem;
	line-height: 1.5;
}

#homeWorks h2 span {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-size: 8.0rem;
	color: #505050;
	line-height: 1.2;
}

#homeWorks .swiper {
	visibility: hidden;
}

#homeWorks .swiper-wrapper {
	transition-timing-function: linear;
}

#homeWorks .swiper-wrapper figure {
	margin-bottom: 0;
}

#homeWorks .swiper-wrapper a {
	/* background-color: rgba(242, 242, 242, 0.2); */
	display: grid;
	align-items: center;
	justify-items: center;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

/* 
#homeWorks .swiper-wrapper a:hover {
	background-color: rgba(242, 242, 242, 0.22);
}
 */

#homeWorks .swiper1 {
	margin-bottom: 20px;
}

#homeWorks p.btnView {
	width: 1280px;
	margin: 30px auto 0;
	padding: 0 40px;
}

#homeWorks p.btnView a {
	margin-left: auto;
	border: none;
}

#homeCont002 .content {
	position: sticky;
	top: 0;
	height: 100vh;
	opacity: 0;
	transition: opacity 0.2s linear;
	/* transition: opacity 0.6s ease-out; */
	z-index: 1;
}

#homeCont002 .content.is-active {
	/* opacity: 1; */
	z-index: 10;
}

#homeCont002 .visualBox {
	position: relative;
	height: 100%;
}

#homeCont002 .visualBox::before {
	content: '';
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	background-repeat: no-repeat;
	background-size: cover;
}

#homeCont002 .content .visualBox .contBox {
	height: 100%;
	position: relative;
	z-index: 5;
	display: grid;
	align-items: center;
}

#homeCont002 .visualBox .contBox .sentL, 
#homeCont002 .visualBox .contBox .sentR {
	font-size: 2.2rem;
}

#homeCont002 .visualBox .contBox .sentL {
	width: 520px;
}

#homeCont002 .visualBox .contBox .sentR {
	width: 520px;
	margin-left: auto;
}

#homeCont002 h2 {
	font-size: 3.8rem;
	line-height: 1.5;
	margin-bottom: 30px;
}

#homeCont002 h2 span.num {
	font-family: "Roboto", sans-serif;
	font-size: 11.8rem;
	font-weight: 300;
	line-height: 1;
}

#homeCont002 h2 span {
	font-size: 2.0rem;
}

#homeCont002 ul.typeList {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0 0 -20px;
}

#homeCont002 ul.typeList li {
	border-radius: 4px;
	min-width: 140px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	padding: 5px 5px;
	margin: 20px 0 0 20px;
}

#homeCont002 p.btnView a {
	border: none;
}

#homeService001 {
	background-color: var(--bgColorSv001);
}

#homeService001 .visualBox::before {
	background-image: url("../images/home/bgHomeService001.webp");
	background-position: left top;
	left: 50%;
}

#homeService001 ul.typeList li {
	background-color: #bbc8c9;
	color: #1e484c;
}

#homeService002 {
	background-color:  var(--bgColorSv002);
}

#homeService002 .visualBox::before {
	background-image: url("../images/home/bgHomeService002.webp");
	background-position: right top;
	right: 50%;
}

#homeService002 ul.typeList li {
	background-color: #cbc5c4;
	color: #513e39;
}

#homeService003 {
	background-color:  var(--bgColorSv003);
}

#homeService003 .visualBox::before {
	background-image: url("../images/home/bgHomeService003.webp");
	background-position: left top;
	left: 50%;
}

#homeService003 ul.typeList li {
	background-color: #c5cac3;
	color: #3d4d37;
}

#homeService004 {
	background-color:  var(--bgColorSv004);
}

#homeService004 .visualBox::before {
	background-image: url("../images/home/bgHomeService004.webp");
	background-position: right top;
	right: 50%;
}

#homeService004 ul.typeList li {
	background-color: #c9c4c8;
	color: #4a3a46;
}

#homeService005 {
	background-color:  var(--bgColorSv005);
}

#homeService005 .visualBox::before {
	background-image: url("../images/home/bgHomeService005.webp");
	background-position: left top;
	left: 50%;
}

#homeService005 ul.typeList li {
	background-color: #b6c2cb;
	color: #0a3352;
}

#homeService006 {
	background-color:  var(--bgColorSv006);
}

#homeService006 .visualBox::before {
	background-image: url("../images/home/bgHomeService006.webp");
	background-position: right top;
	right: 50%;
}

#homeService006 ul.typeList li {
	background-color: #c4b2b2;
	color: #3c0000;
}

#homeService007 {
	background-color:  var(--bgColorSv007);
}

#homeService007 .visualBox::before {
	background-image: url("../images/home/bgHomeService007.webp");
	background-position: left top;
	left: 50%;
}

#homeService007 ul.typeList li {
	background-color: #c0c1c1;
	color: #2d3132;
}

#homeService008 {
	background-color:  var(--bgColorSv008);
}

#homeService008 .visualBox::before {
	background-image: url("../images/home/bgHomeService008.webp");
	background-position: right top;
	right: 50%;
}

#homeService008 ul.typeList li {
	background-color: #c1b2c1;
	color: #320032;
}

#homeCont003 {
	background-color: #fff;
	color: #000;
}

#homeNews .contBox {
	padding: 80px 40px 160px;
}

#homeNews h2 {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-size: 8.0rem;
	line-height: 1.5;
	margin-bottom: 10px;
}

#homeNews p.btnView a {
	margin-left: auto;
}


/*__________ TAB-SP __________*/
@media screen and (max-width: 959px) {

	#homeLead .sent {
		font-size: 1.6rem;
		line-height: 2;
	}

	#homeLead .sent h2 {
		font-size: 2.4rem;
		margin-bottom: 20px;
	}

	#homeWorks p.btnView {
		padding: 0 20px;
	}

	#homeWorks h2{
		font-size: 2.4rem;
		padding: 0 20px;
	}

	#homeWorks h2 span {
		font-size: 6.0rem;
	}

	#homeCont002 h2 {
		font-size: 3.0rem;
	}

	#homeCont002 h2 span.num {
		font-size: 8.8rem;
	}

	#homeCont002 h2 span {
		font-size: 1.6rem;
	}

	#homeCont002 ul.typeList {
		margin: 10px 0 0 -10px;
	}

	#homeCont002 ul.typeList li {
		min-width: 120px;
		font-size: 1.4rem;
		margin: 10px 0 0 10px;
	}

	#homeCont002 .visualBox .contBox {
		padding: 20px 20px;
	}

	#homeCont002 .visualBox .contBox .sentL, 
	#homeCont002 .visualBox .contBox .sentR {
		font-size: 1.6rem;
	}

	#homeCont002 .visualBox::before {
		width: 100%;
		/* opacity: 0.4; */
	}

	#homeCont002 .visualBox::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		mix-blend-mode: multiply;
		z-index: 2;
		opacity: 0.94;
	}

	#homeService001 .visualBox::after, 
	#homeService003 .visualBox::after, 
	#homeService005 .visualBox::after, 
	#homeService007 .visualBox::after {
		left: 50%;
		right: 0;
	}

	#homeService002 .visualBox::after, 
	#homeService004 .visualBox::after, 
	#homeService006 .visualBox::after, 
	#homeService008 .visualBox::after {
		left: 0;
		right: 50%;
	}

	#homeService001 .visualBox::after {
		background-color:  var(--bgColorSv001);
	}

	#homeService002 .visualBox::after {
		background-color:  var(--bgColorSv002);
	}

	#homeService003 .visualBox::after {
		background-color:  var(--bgColorSv003);
	}

	#homeService004 .visualBox::after {
		background-color:  var(--bgColorSv004);
	}

	#homeService005 .visualBox::after {
		background-color:  var(--bgColorSv005);
	}

	#homeService006 .visualBox::after {
		background-color:  var(--bgColorSv006);
	}

	#homeService007 .visualBox::after {
		background-color:  var(--bgColorSv007);
	}

	#homeService008 .visualBox::after {
		background-color: var(--bgColorSv008);
	}

	#homeCont002 .visualBox .contBox .sentL, 
	#homeCont002 .visualBox .contBox .sentR {
		width: auto;
	}

	#homeService001, 
	#homeService002, 
	#homeService003, 
	#homeService004, 
	#homeService005, 
	#homeService006, 
	#homeService007, 
	#homeService008 {
		background-color: #fff;
	}

	#homeService001 .visualBox::before, 
	#homeService002 .visualBox::before, 
	#homeService003 .visualBox::before, 
	#homeService004 .visualBox::before, 
	#homeService005 .visualBox::before, 
	#homeService006 .visualBox::before, 
	#homeService007 .visualBox::before, 
	#homeService008 .visualBox::before {
		background-position: center top;
	}

	#homeService001 .visualBox::before, 
	#homeService001 .visualBox::after, 
	#homeService003 .visualBox::before, 
	#homeService003 .visualBox::after, 
	#homeService005 .visualBox::before, 
	#homeService005 .visualBox::after, 
	#homeService007 .visualBox::before, 
	#homeService007 .visualBox::after {
		left: 0;
	}

	#homeService004 .visualBox::before, 
	#homeService004 .visualBox::after, 
	#homeService002 .visualBox::before, 
	#homeService002 .visualBox::after, 
	#homeService006 .visualBox::before, 
	#homeService006 .visualBox::after, 
	#homeService008 .visualBox::before, 
	#homeService008 .visualBox::after {
		right: 0;
	}

	#homeNews h2 {
		font-size: 6.0rem;
	}

}


/*__________ TAB __________*/
@media screen and (max-width: 959px) and (min-width: 768px) {

	#mainVisualArea {
		width: 768px;
		padding: 120px 20px 40px;
	}

	#mainVisualArea p img {
		width: 480px;
	}

	#homeWorks p.btnView {
		width: 768px;
	}

	#homeLead {
		min-height: 572px;
	}

	#homeLead::before{
		background-size: 1200px 552px;
	}

	#homeNews .contBox {
		padding: 60px 20px 100px;
	}

	#homeWorks h2{
		width: 768px;
	}

}


/*__________ SP __________*/
@media screen and (max-width: 767px) {

	#mainVisual {
		margin-top: -70px;
	}

	#mainVisual #op figure img {
		width: 220px;
	}

	#mainVisualArea {
		width: auto;
		min-width: 320px;
		max-width: 520px;
		padding: 70px 20px 40px;
	}

	#mainVisualArea p img {
		width: 100%;
	}

	#homeWorks p.btnView {
		width: auto;
		min-width: 320px;
		max-width: 520px;
	}

	#homeCont001 {
		background-image: url("../images/home/bgCont001Sp.webp");
	}

	#homeLead {
		min-height: 386px;
		padding-bottom: 294px;
	}

	#homeLead::before {
		background: url("../images/home/bgHomeLeadSp.svg") no-repeat right -90px bottom / 370px 386px;
	}

	#homeLead .sent {
		width: auto;
	}

	#homeLead .sent h2 {
		margin-bottom: 20px;
	}

	#homeWorks {
		padding: 5px 0 60px;
	}

	#homeWorks h2{
		width: auto;
		min-width: 320px;
		max-width: 520px;
	}

	#homeWorks .swiper1 {
		margin-bottom: 10px;
	}

	#homeNews .contBox {
		padding: 60px 20px;
	}

}