@charset "UTF-8";


/* mainvisual
------------------------------------------------- */
.mainvisual {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 2;
}

.mainvisual .con {
	color: #fff;
    position: relative;
	z-index: 3
}
.mainvisual .con a {
	color: #fff;
}
.mainvisual .con h2 {
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.05em;
}
.mainvisual .con p {
	padding-top: 1em;
	letter-spacing: 0.05em;
}
.mainvisual .main-slider {
    width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.mainvisual .main-slider .swiper-slide {
    width: 100%;
    height: 100vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.mainvisual .main-slider .swiper-slide a {
	display: block;
    width: 100%;
    height: 100vh;
}
.mainvisual .main-slider .main1 {
	background-image: url("../img/top/mainvisual1.jpg");
}
.mainvisual .main-slider .main2 {
	background-image: url("../img/top/mainvisual2.jpg");
}
.mainvisual .main-slider .main3 {
	background-image: url("../img/top/mainvisual3.jpg");
}
.mainvisual .main-slider .main4 {
	background-image: url("../img/top/mainvisual4.jpg");
}
.mainvisual .scroll {
	width: 2.78125em;
	height: 6.1875em;
	background: url("../img/top/mainvisual_scroll.png") center top no-repeat;
	background-size: 100% auto;
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -1.390625em;
	z-index: 5;
	overflow: hidden;
}
.mainvisual .scroll span {
	width: 1px;
	height: 4.3125em;
	position: absolute;
	left: 50%;
	bottom: 0;
	overflow: hidden;
}
.mainvisual .scroll span::before {
	content: '';
	width: 1px;
	height: 100%;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	animation: topScroll 2s cubic-bezier(0.79, 0, 0.15, 1) infinite;
}
@media only screen and (max-width:750px){
.mainvisual,
.mainvisual .main-slider,
.mainvisual .main-slider .swiper-slide {
	height: calc(100vh - 15.733vw);
}
.mainvisual .main-slider .main1 {
	background-image: url("../img/top/mainvisual1_sp.jpg");
}
.mainvisual .main-slider .main2 {
	background-image: url("../img/top/mainvisual2_sp.jpg");
}
.mainvisual .main-slider .main3 {
	background-image: url("../img/top/mainvisual3_sp.jpg");
}
.mainvisual .main-slider .main4 {
	background-image: url("../img/top/mainvisual4_sp.jpg");
}
.mainvisual .con h2 {
	font-size: 11.644vw;
}
.mainvisual .con p {
	font-size: 3.613vw;
	padding-top: 1em;
}
.mainvisual .scroll {
	width: 12.266vw;
	height: 26.66vw;
	margin-left: -6.133vw;
}
.mainvisual .scroll span {
	width: 2px;
	height: 19vw;
	margin-left: -1px;
}
.mainvisual .scroll span::before {
	width: 2px;
}
}


/* philosophy
------------------------------------------------- */
.philosophy {
	padding: 4.5em 0;
	text-align: center;
}
.philosophy h4 {
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.06em;
	padding-bottom: 2em;
}
.philosophy .copy2 {
	color: #8f8f8f;
	line-height: 1.65;
	padding-top: 2em;
}
.philosophy .photo {
	width: 100%;
	height: 18.5em;
	background: url("../img/top/philosophy_photo.jpg") center center no-repeat;
	background-size: cover;
	margin-top: 3.5em;
}
@media only screen and (max-width:750px){
.philosophy {
	padding: 18.5vw 0 12.5vw;
}
.philosophy h4 {
	font-size: 5vw;
	line-height: 1.55;
}
.philosophy .copy1 {
	font-size: 3.61vw;
}
.philosophy .copy2 {
	font-size: 3vw;
	line-height: 1.6;
	padding-top: 2em;
}
.philosophy .photo {
	height: 40.933vw;
	background: url("../img/top/philosophy_photo.jpg") center center no-repeat;
	background-size: cover;
	margin-top: 3em;
}
}


/* movie
------------------------------------------------- */
.movie {
	padding: 0 0 4em;
}
@media only screen and (max-width:750px){
.movie {
	padding: 0 0 22.5vw;
}
}


/* business
------------------------------------------------- */
#business {
	padding-bottom: 1em;
}
@media only screen and (max-width:750px){
#business {
	padding-bottom: 8vw;
}
}


/* company
------------------------------------------------- */
.company {
	padding: 3.875em 0 4.5em;
}
.company ul {
	padding-bottom: 3.375em;
}
.company ul li {
	width: 48.18%;
}
.company ul li a {
	display: block;
	width: 100%;
	height: 11.5em;
	position: relative;
	overflow: hidden;
}
.company ul li a::before {
	content: '';
	width: 100%;
	height: 100%;
	background: url("../img/top/company_photo.jpg") center center no-repeat;
	background-size: cover;
	transition: 0.4s;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.company ul li a h4 {
	color: #fff;
	font-weight: 400;
	position: absolute;
	left: 2.3em;
	top: 5em;
	z-index: 2;
}
.company ul li a h4 span {
	display: block;
	letter-spacing: 0.05em;
	line-height: 1.2;
}
.company ul li:nth-child(2) a::before {
	background-image: url("../img/top/sustainability_photo.jpg");
}
.company ul li:nth-child(2) a h4 {
	color: #333;
}
.company .recruit {
	width: 100%;
	height: 26.5625em;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	position: relative;
}
.company .recruit .con {
    position: relative;
	z-index: 3
}
.company .recruit .con h4 {
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.05em;
}
.company .recruit .con p {
	padding: 1.5em 0 2.5em;
	line-height: 1.8;
}
.company .recruit .con .btnst1 a {
	margin: 0 auto;
}
.company .recruit .recruit-slider {
    width: 100%;
	height: 26.5625em;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.company .recruit .recruit-slider .swiper-slide {
    width: 100%;
    height: 26.5625em;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.company .recruit .recruit-slider .main1 {
	background-image: url("../img/top/recruit_photo1.jpg");
}
.company .recruit .recruit-slider .main2 {
	background-image: url("../img/top/recruit_photo2.jpg");
}
.company .recruit .recruit-slider .main3 {
	background-image: url("../img/top/recruit_photo3.jpg");
}
@media only screen and (min-width:751px){
.company ul li a:hover::before {
	transform: scale(1.1, 1.1);
}
}
@media only screen and (max-width:750px){
.company {
	padding: 18.5vw 0 15vw;
}
.company .inner {
	width: 100%;
}
.company ul {
	padding-bottom: 0;
}
.company ul li {
	width: 100%;
	margin-bottom: 7vw;
}
.company ul li a {
	height: 49vw;
}
.company ul li a::before {
	background-image: url("../img/top/company_photo_sp.jpg");
}
.company ul li a h4 {
	font-size: 3.289vw;
	left: 7.7vw;
	top: 18.5vw;
}
.company ul li a h4 span {
	font-size: 7.33vw;
	letter-spacing: 0.05em;
	line-height: 1.2;
}
.company ul li:nth-child(2) a::before {
	background-image: url("../img/top/sustainability_photo_sp.jpg");
}
.company .recruit {
	height: 95.733vw;
}
.company .recruit .con h4 {
	font-size: 8.056vw;
}
.company .recruit .con p {
	font-size: 3.706vw;
	padding: 1.4em 0 3.5em;
	line-height: 1.85;
}
.company .recruit .recruit-slider {
	height: 95.733vw;
}
.company .recruit .recruit-slider .swiper-slide {
    height: 95.733vw;
}
}


/* news
------------------------------------------------- */
.news {
	padding-bottom: 3.125em;
}
.news .news-slider .swiper-slide a {
	display: block;
}
.news .news-slider .swiper-slide a img {
	width: 100%;
	height: 12.15em;
	object-fit: cover;
	transition: 0.4s;
}
.news .news-slider .swiper-slide a .date {
	padding: 0.7em 0;
	margin-bottom: 0.4em;
	position: relative;
}
.news .news-slider .swiper-slide a .date::before {
	content: '';
	width: 2.27em;
	height: 1px;
	background-color: #8f8f8f;
	position: absolute;
	left: 0;
	bottom: 0;
}
.news .news-slider .swiper-slide a h4 {
	font-weight: 400;
}
@media only screen and (min-width:751px){
.news .news-slider .swiper-wrapper {
	width: 100%;
	display: flex;
}
.news .news-slider .swiper-slide {
	width: 31.36%;
	margin-right: 2.96%;
}
.news .news-slider .swiper-slide:nth-child(3) {
	margin-right: 0;
}
.news .news-slider .swiper-slide a:hover img {
	opacity: 0.7;
}
.news .news-slider .swiper-slide a:hover h4 {
	text-decoration: underline;
}
}
@media only screen and (max-width:750px){
.news {
	padding-bottom: 19.5vw;
}
.news .inner {
	width: 100%;
}
.news .news-slider {
	width: 100%;
}
.news .news-slider .swiper-slide {
	width: 72.4vw !important;
	margin-right: 7.33vw;
}
.news .news-slider .swiper-slide:nth-child(1) {
	margin-left: 7.33vw;
}
.news .news-slider .swiper-slide a img {
	height: 40.8vw;
}
.news .news-slider .swiper-slide a .date {
	font-size: 3vw; 
	padding: 0.75em 0;
}
.news .news-slider .swiper-slide a h4 {
	font-size: 3.33vw; 
}
}