@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#container {
	padding-top: 0 !important;
}
.mainVisual {
	position: relative;
}
.mainVisual .more {
	position: absolute;
	left: 50%;
	bottom: 0;
	overflow: hidden;
	z-index: 2;
	transform: translateX(-50%);
}
.mainVisual .more a {
	width: 2rem;
	height: 3rem;
	position: relative;
	display: block;
}
.mainVisual .more a::after {
	content: '';
	width: 1px;
	height: 100%;
	position: absolute;
	left: 50%;
	bottom: 0;
	background: rgba(255,255,255,0.8);
	-webkit-animation: line 1.6s ease infinite;
	animation: line 1.6s ease infinite;
}
@keyframes line {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%) 
	}
	60% {
		-webkit-transform: translateY(0%);
		transform: translateY(0%)
	}
	100% {
		-webkit-transform:translateY(100%);
		transform:translateY(100%)
	}
}
.mainVisual .slideBox {
	position: relative;
	top: 14.4rem;
	margin: 0 auto;
	width: calc(100% - 34.6rem);
	height: calc(100% - 28.8rem);
	line-height: 0;
	z-index: 1;
	overflow: hidden;
}
.mainVisual .mvSlick,
.mainVisual .mvSlick div {
	width: 100%;
	height: 100%;
	overflow: hidden;
	line-height: 0;
}
.mainVisual .line {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: #fff;
	z-index: 5;
}
.mainVisual .line.active {
	width: 100%;
	transition: all 5.9s linear;
}
.mvSlick .slick-slide {
	opacity: 1 !important;
}
.mvSlick .slick-slide:not(.isActive) {
	z-index: 900;
}
.mvSlick .slide {
	position: relative;
	clip-path: inset(0 100% 0 0);
}
.mvSlick .slide.isActive {
	clip-path: inset(0 0 0 0);
	transition: var(--speed,0.5s);
}


.mvSlick .slide .photo  {
	will-change: transform;
    backface-visibility: hidden;
}
.mvSlick .slide.slide02 .photo {
	width: calc(100% + 10rem);
	margin-left: -5rem;
    transform: translateX(-5rem) translateZ(0);
}
.mvSlick .slide.slide03 .photo {
	width: 102%;
	margin-left: -1%;
	height: calc(100% + 10rem);
	margin-top: -5rem;
    transform: translateY(5rem) translateZ(0);
}
.mvSlick .slide.slide01.active .photo {
    animation: imgzoom 7s linear forwards;
}
.mvSlick .slide.slide02.active .photo {
    animation: toright 7s linear forwards;
}
.mvSlick .slide.slide03.active .photo {
    animation: totop 7s linear forwards;
}
@keyframes imgzoom {
	0% {
		transform: scale(1) translateZ(0);
	}
	100% {
		transform: scale(1.1) translateZ(0);
	}
}
@keyframes toright {
	0% {
		transform: translateX(-5rem);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes totop {
	0% {
		transform: translateY(5rem);
	}
	100% {
		transform: translateX(0);
	}
}

.mainVisual .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mainVisual .photo::before {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 63.2rem;
	background: url(../img/index/fv_img01_bg.png) no-repeat;
	background-size: 100% 100%;
	content: "";
	z-index: 2;
	pointer-events: none;
}
.mainVisual .slide02 .photo::before {
	width: 74.8rem;
	background-image: url(../img/index/fv_img02_bg.png);
}
.mainVisual .slide03 .photo::before {
	width: 53.8rem;
	background-image: url(../img/index/fv_img03_bg.png);
}
.mainVisual .slideBg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.mainVisual .slideBg .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 1s;
}
.mainVisual .slideBg .bg.active {
	opacity: 1;
	visibility: visible;
}
.mainVisual .slideBg .bg01 {
	background-color: #958879;
}
.mainVisual .slideBg .bg02 {
	background-color: #97AA8F;
}
.mainVisual .slideBg .bg03 {
	background-color: #9BB3C1;
}
.mainVisual .slideTxt {
	position: absolute;
	left: 10.1rem;
	top: calc(50% - 13rem);
	color: #fff;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	width: 44rem;
	pointer-events: none;
}
.mainVisual .slideTxt.active {
	opacity: 1;
	visibility: visible;
	transition: all 1s 0.5s;
}
.mainVisual .slideTxt .slideEn {
	position: relative;
	overflow: hidden;
}
.mainVisual .slideTxt .slideEn .en:not(:first-child){
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.mainVisual .slideTxt .slideEn .en {
	transform: translateY(105%);
}
.mainVisual .slideTxt .slideEn .en.active {
	animation: up01 0.5s forwards;
}
.mainVisual .slideTxt .slideEn .en.activePrev {
	animation: up02 0.5s forwards;
}
@keyframes up01 {
	0% {
		transform: translateY(105%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes up02 {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
.mainVisual .slideTxt .slideJp {
	position: relative;
}
.mainVisual .slideTxt .slideEn {
	position: relative;
	margin: 0 -0.3rem 2.3rem;
}
.mainVisual .slideTxt .en {
	line-height: 1;
	font-weight: 100;
	font-size: 7rem;
}
.mainVisual .slideTxt .slideNum {
	margin: 0 0 2rem;
	position: relative;
	height: 1.3rem;
	overflow: hidden;
}
.mainVisual .slideTxt .slideNum .en {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.mainVisual .slideTxt .num {
	display: block;
	font-weight: 400;
	font-size: max(10px,1.2rem);
	letter-spacing: 0.05em;
}
.mainVisual .slideTxt .slideNum .en {
	transform: translateY(100%);
}
.mainVisual .slideTxt .slideNum .en.active {
	animation: up01 0.5s forwards;
}
.mainVisual .slideTxt .slideNum .en.activePrev {
	animation: up02 0.5s forwards;
}
.mainVisual .slideTxt .txt {
	font-size: max(10px,1.4rem);
	line-height: 2.14;
	letter-spacing: 0.1em;
}
.mainVisual .slideTxt .textImg {
	margin-top: 3.5rem;
	width: 12.5rem;
}
.mainVisual .slideTxt .textBox02 .textImg {
	margin-top: 3.3rem;
	width: 21.6rem;
}
.mainVisual .slideTxt .ttl {
	margin-top: 3.8rem;
	font-weight: 600;
	font-size: max(10px,1.6rem);
	letter-spacing: 0.06em;
}
.mainVisual .slideTxt .textBox {
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
}
.mainVisual .slideTxt .textBox:not(.textBox01) {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.mainVisual .slideTxt .textBox.active {
	opacity: 1;
	visibility: visible;
}
.mainVisual .slideList {
	position: absolute;
	right: 0;
	width: 17.3rem;
	top: 50%;
	font-size: max(10px,1.2rem);
	transform: translateY(-45%);
}
.mainVisual .slideList li {
	padding-left: 1.8rem;
	position: relative;
	cursor: pointer;
	opacity: 0.54;
	color: #fff;
	transition: .3s;
	margin: 0.8rem 0;
}
.mainVisual .slideList .current {
	position: absolute;
	left: 0;
	top: 1.7rem;
	width: 1rem;
	height: 1px;
	background-color: #fff;
	transition: .3s;
	opacity: 0.69;
}
.mainVisual .slideList li.on {
	opacity: 1;
}
#main .support {
	padding: 18.8rem 0 18.4rem;
}
#main .support .imgBox {
	margin: 0 -6.3rem 0 2.2rem;
	align-items: center;
}
#main .support .pho {
	width: 45rem;
	height: 45rem;
	padding-bottom: 0;
}
#main .support .textBox {
	width: 40.1rem;
	margin-top: 0.2rem;
}
#main .support .ttl {
	/* margin-bottom: 3.8rem;
	line-height: 2.3;
	letter-spacing: 0.04em; */
	font-weight: 400;
	line-height: 2.625;
	letter-spacing: 0.06em;
	font-weight: 400;
}
#main .support .en {
	color: #000;
	opacity: 0.55;
	line-height: 1.84;
	font-size: max(10px,1.3rem);
	letter-spacing: 0.03em;
}
#main .service {
	margin: 0 2rem;
}
#main .service > div {
	width: calc(50% - 0.1rem);
}
#main .service a {
	position: relative;
	display: block;
}
#main .service .ttl {
	position: absolute;
	right: 2.2rem;
	top: 1.9rem;
	text-align: right;
	color: #fff;
	z-index: 2;
}
#main .service .ttl .en {
	display: block;
	font-size: 4.5rem;
	font-weight: 100;
	line-height: 1.1;
	overflow: hidden;
}
#main .service .ttl .jp {
	margin: 0.2rem 0.2rem 0;
	display: block;
	opacity: 0.9;
	font-weight: 400;
	letter-spacing: 0.04em;
	font-size: max(10px,1.4rem);
	overflow: hidden;
}
#main .service .logo {
	width: 31.1rem;
	position: absolute;
	left: 2.5rem;
	bottom: 2rem;
	z-index: 2;
}
#main .service .logo01 {
	width: 19.1rem;
	left: 9.2rem;
	bottom: auto;
	top: 14.5rem;
	display: flex;
	align-items: flex-start;
}
#main .service .logo01 span {
	margin: -0.1rem 0 0 4.1rem;
	flex-shrink: 0;
	display: block;
	color: #fff;
	line-height: 1.93;
	letter-spacing: 0.06em;
	font-size: max(10px,1.4rem);
}
#main .service .pho {
	overflow: hidden;
	position: relative;
}
#main .service .pho img {
	width: 100%;
	transition: all 0.7s ease-out;
}
#main .service .lBox .pho::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 27.9rem;
	background: url(../img/index/service_photo01_bg.png) no-repeat center center;
	background-size: 100% 100%;
	content: "";
	z-index: 1;
}
#main .service .rBox .pho::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../img/index/service_photo02_bg.png) no-repeat center center;
	background-size: 100% 100%;
	content: "";
	z-index: 1;
}
#main .service .rBox .link:nth-child(2) .pho::before {
	height: 13.4rem;
	background-image: url(../img/index/service_photo03_bg.png);
}
#main .company {
	padding-top: 17.8rem;
}
#main .company .imgBox {
	margin: 0 -0.3rem 11.8rem 0.2rem;
}
#main .company .ttl {
	margin-bottom: 1.8rem;
	line-height: 2.125;
	letter-spacing: 0.08em;
	font-weight: 400;
	color: #222;
}
#main .company .enTxt {
	color: #222;
	opacity: 0.75;
	line-height: 1.75;
	font-size: max(10px,1.2rem);
	letter-spacing: 0.03em;
}
#main .company .linkList {
	width: 43.5rem;
	margin-top: -2.1rem;
}
#main .company .linkList li:not(:last-child) {
	border-bottom: 1px solid rgba(82,82,82,0.29);
}
#main .company .linkList a {
	position: relative;
	padding: 2.5rem 0 2.3rem;
	display: block;
	color: #242424;
}
#main .company .linkList a::before,
#main .company .linkList a::after {
	position: absolute;
	right: 0;
	top: 50%;
	background: url(../img/common/icon03.png) no-repeat;
	background-size: 100% 100%;
	width: 2.6rem;
	height: 2.6rem;
	transform: translateY(-50%);
	content: "";
	transition: .3s;
}
#main .company .linkList a::after {
	background-image: url(../img/common/icon03_on.png);
	opacity: 0;
}
#main .company .linkList .jp {
	margin-bottom: 0.5rem;
	display: block;
	font-size: max(10px,1.7rem);
	letter-spacing: 0.1em;
}
#main .company .linkList .en {
	display: block;
	font-size: max(10px,1.1rem);
	letter-spacing: 0.04em;
	opacity: 0.6;
}
#main .company .phoList ul {
	display: flex;
}
#main .company .phoList li {
	width: 48rem;
	flex-shrink: 0;
}
#main .company .phoList .pho {
	height: 32rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#main .news {
	padding: 13.2rem 0 13.9rem;
	background-color: #EAEAEA;
}
#main .news .newsInfo {
	margin: 0 0 7.7rem 0.2rem;
	min-height: 18rem;
	position: relative;
}
#main .news .headLine01 {
	width: fit-content;
	color: #1A1311;
}
#main .news .newsUl {
	margin: 0 -0.2rem 4rem 0.2rem;
}
#main .news .newsUl li {
	width: calc(50% - 1.4rem);
	position: relative;
}
#main .news .newsUl li::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #8B837D;
	box-sizing: border-box;
	content: "";
	transition: .3s;
	z-index: 1;
	cursor: default;
	pointer-events: none;
	opacity: 0;
}
#main .news .newsUl a {
	height: 14.9rem;
	position: relative;
	padding: 2.3rem 2.3rem;
	display: block;
	background-color: #fff;
}
#main .news .newsUl a::before,
#main .news .newsUl a::after {
	position: absolute;
	left: 2.3rem;
	top: 6.7rem;
	background: url(../img/common/icon03.png) no-repeat;
	background-size: 100% 100%;
	width: 2.6rem;
	height: 2.6rem;
	content: "";
	transition: .3s;
}
#main .news .newsUl a::after {
	background-image: url(../img/common/icon03_on.png);
	opacity: 0;
}
#main .news .newsUl .ttl .en {
	margin-bottom: 0.4rem;
	display: block;
	font-size: max(10px,2.5rem);
	letter-spacing: 0.02em;
	font-weight: 300;
}
#main .news .newsUl .ttl .jp {
	display: block;
	font-size: max(10px,1.5rem);
	letter-spacing: 0.08em;
	font-weight: 400;
}
#main .news .newsUl .pho {
	width: 10.3rem;
	position: absolute;
	right: 2rem;
	bottom: 2.3rem;
}
#main .news  .pho img {
	width: 100%;
}
#main .news .btmLink {
	margin: 0 -0.2rem 0 0.2rem;
}
#main .news .btmLink a {
	display: flex;
	background-color: rgba(5,5,5,0.84);
}
#main .news .btmLink .textImg {
	width: 18.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-shrink: 0;
}
#main .news .btmLink .textImg img {
	width: 11.2rem;
}
@media all and (min-width: 1000px) {
	.content {
		width: 94.4rem;
	}
	/* body:not(.pad) .mainVisual .photo a:hover {
		opacity: 0.5;
	} */
	body:not(.pad) .mainVisual .slideList li:hover {
		opacity: 1;
	}
	body:not(.pad) #main .service a:hover .pho img {
		transform: scale(1.1);
	}
	#main .service .rBox {
		 display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	body:not(.pad) #main .company .linkList a:hover::after {
		opacity: 1;
	}
	body:not(.pad) #main .company .linkList a:hover::before {
		opacity: 0;
	}
	body:not(.pad) #main .news .newsUl li:hover:before {
		opacity: 1;
	}
	#main .news .headLine01 .en {
		letter-spacing: 0.02em;
	}
	#main .news .headLine01 .jp {
		margin-top: 1rem;
		letter-spacing: 0.12em;
		font-size: max(10px,1.6rem);
	}
	#main .news .comNewsList {
		width: 58.6rem;
		margin: -2rem -0.2rem 0 0;
	}
	#main .news .comLink {
		position: absolute;
		left: 0;
		bottom: 2.6rem;
	}
	body:not(.pad) #main .news .newsUl a:hover::after {
		opacity: 1;
	}
	body:not(.pad) #main .news .newsUl a:hover::before {
		opacity: 0;
	}
	body:not(.pad) #main .news .btmLink a:hover {
		opacity: 0.5;
	}
}
@media all and (max-width: 999px) {
	.content {
		margin: 0 2.4rem;
	}
	.mainVisual .more {
		left: auto;
		right: 1.2rem;
		transform: none;
	}
	.mainVisual .more a {
		height: 2.4rem;
	}
	.mainVisual .slideBox {
		width: calc(100% - 8.8rem);
		height: calc(100% - 12.2rem);
		top: 7.5rem;
	}
	.mainVisual .photo::before {
		width: 100% !important;
		background-image: url(../img/index/fv_img01_bg_sp.png);
	}
	.mainVisual .slide02 .before::before {
		background-image: url(../img/index/fv_img02_bg_sp.png);
	}
	.mainVisual .slide03 .before::before {
		background-image: url(../img/index/fv_img03_bg_sp.png);
	}
	.mainVisual .slideTxt {
		left: 2.4rem;
		top: auto;
		bottom: 10.4rem;
		width: 29rem;
	}
	.mainVisual .slideTxt .slideEn {
		margin-bottom: 2.1rem;
	}
	.mainVisual .slideTxt .en {
		font-size: 4.4rem;
		letter-spacing: -0.01em;
	}
	.mainVisual .slideTxt .slideNum {
		margin-bottom: 1.8rem;
	}
	.mainVisual .slideTxt .en .num {
		font-size: 1rem;
		letter-spacing: 0;
	}
	.mainVisual .slideTxt .txt {
		font-size: 1.1rem;
		line-height: 2;
		letter-spacing: 0.07em;
	}
	.mainVisual .slideTxt .textImg {
		margin-top: 1.5rem;
		width: 10rem;
	}
	.mainVisual .slideTxt .textBox02 .textImg {
		margin-top: 1.2rem;
		width: 18.6rem;
	}
	.mainVisual .slideTxt .ttl {
		margin-top: 1.4rem;
		font-size: 1.6rem;
	}
	.mainVisual .slideList {
		right: 1.4rem;
		width: auto;
		font-size: 1.1rem;
		transform: translateY(-43.4%);
		width: 3.1rem;
	}
	.mainVisual .slideList li {
		padding-left: 1.4rem;
		writing-mode: vertical-rl;
		margin: 1.7rem 0;
	}
	.mainVisual .slideList li::before {
		width: 1.1rem;
	}
	.mainVisual .slideList li.on::before {
		opacity: 0.55;
	}
	#main .support {
		padding: 12.7rem 2rem 10.6rem;
	}
	#main .support .imgBox {
		margin: 0;
		display: block;
	}
	#main .support .pho {
		margin-right: 0.2rem;
		width: auto;
		height: 0;
		padding-bottom: 99.4%;
	}
	#main .support .textBox {
		width: auto;
		margin-top: 4.2rem;
		text-align: center;
	}
	#main .support .ttl {
		/* margin-bottom: 1.9rem;
		line-height: 2; */
		line-height: 2.28;
		font-size: 1.4rem;
		margin: 0 -2rem;
	}
	#main .support .en {
		color: #1A1311;
		line-height: 1.72;
		font-size: 1.1rem;
	}
	#main .service {
		margin: 0 2.4rem;
		display: block;
	}
	#main .service > div {
		width: auto;
	}
	#main .service .link {
		margin-bottom: 0.2rem;
	}
	#main .service .ttl {
		right: 1.1rem;
		top: 1rem;
	}
	#main .service .ttl .en {
		font-size: 2.8rem;
		font-weight: 300;
	}
	#main .service .ttl .jp {
		margin: 0.3rem 0.1rem 0;
		opacity: 1;
		font-weight: 500;
		letter-spacing: 0.02em;
		font-size: 1rem;
	}
	#main .service .rBox .ttl {
		top: 0.6rem;
		right: 1rem;
	}
	#main .service .rBox .ttl .en {
		font-size: 2.4rem;
	}
	#main .service .logo {
		width: 20rem;
		left: 1.1rem;
		bottom: 1rem;
	}
	#main .service .logo01 {
		width: auto;
		left: 2.1rem;
		bottom: auto;
		top: 6rem;
		display: block;
	}
	#main .service .logo01 img {
		width: 10.2rem;
	}
	#main .service .logo01 span {
		margin: 1.4rem 0 0;
		line-height: 1.72;
		letter-spacing: 0.04em;
		font-size: 1.1rem;
	}
	#main .service .lBox .pho::before {
		height: 17.8rem;
		background-image: url(../img/index/service_photo01_bg_sp.png);
	}
	#main .service .rBox .pho::before {
		background-image: url(../img/index/service_photo02_bg_sp.png);
	}
	#main .service .rBox .link:nth-child(2) .pho::before {
		height: 8.3rem;
		background-image: url(../img/index/service_photo03_bg_sp.png);
	}
	#main .company {
		padding-top: 11.1rem;
	}
	#main .company .imgBox {
		margin: 0 0 7.8rem;
		display: block;
	}
	#main .company .ttl {
		margin-bottom: 1.2rem;
		line-height: 2;
		font-weight: 500;
		color: #1A1311;
	}
	#main .company .enTxt {
		color: #1A1311;
		opacity: 0.55;
		line-height: 1.8;
		font-size: 1rem;
	}
	#main .company .linkList {
		width: auto;
		margin-top: 1.5rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#main .company .linkList li {
		width: calc(50% - 1.2rem);
		border-bottom: 1px solid rgba(26,19,17,0.19) !important;
	}
	#main .company .linkList a {
		padding: 3.3rem 0 1.1rem;
		color: #1A1311;
	}
	#main .company .linkList a::before {
		top: 3.3rem;
		right: 0.1rem;
		width: 2rem;
		height: 2rem;
		transform: none;
	}
	#main .company .linkList .jp {
		margin-bottom: 0.5rem;
		font-size: 1.2rem;
		letter-spacing: 0.08em;
	}
	#main .company .linkList .en {
		font-size: 1rem;
		letter-spacing: 0.02em;
		opacity: 0.4;
	}
	#main .company .phoList li {
		width: 30rem;
	}
	#main .company .phoList .pho {
		height: 20rem;
	}
	#main .news {
		padding: 8.5rem 0 8rem;
	}
	#main .news .newsInfo {
		margin: 0 0 7.3rem;
		min-height: inherit;
		display: block;
	}
	#main .news .headLine01 {
		margin-bottom: 3.6rem;
	}
	#main .news .comLink {
		position: absolute;
		right: 0;
		top: 0;
	}
	#main .news .newsUl {
		margin: 0 0 2rem;
		display: block;
	}
	#main .news .newsUl li {
		margin-bottom: 0.8rem;
		width: auto;
	}
	#main .news .newsUl a {
		height: 9rem;
		padding: 1.5rem 10rem 1.3rem 1.5rem;
	}
	#main .news .newsUl a::before {
		left: 1.5rem;
		top: 4.6rem;
		width: 2rem;
		height: 2rem;
	}
	#main .news .newsUl .ttl .en {
		margin-bottom: 0.4rem;
		font-size: 1.6rem;
		letter-spacing: 0;
	}
	#main .news .newsUl .ttl .jp {
		font-size: 1.3rem;
		letter-spacing: 0.04em;
	}
	#main .news .newsUl .pho {
		right: 1.5rem;
		bottom: 1.5rem;
		width: 6rem;
	}
	#main .news .btmLink {
		margin: 0;
	}
	#main .news .btmLink a {
		display: block;
	}
	#main .news .btmLink .textImg {
		padding: 2.4rem;
		width: auto;
	}
	#main .news .btmLink .textImg img {
		width: 9.8rem;
	}
}