@charset "UTF-8";
/* CSS Document */
/* mainArea */
.mainArea {
	height: calc(var(--vh) * 100);
	position: relative;
}
.swiper-container {
	width: 100%;
}
.swiper-slide {
	height: calc(var(--vh) * 100);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.slide01 {
	background-image: url("../img/top/main01.webp");
}
.slide02 {
	background-image: url("../img/top/main02.webp");
}
.slide03 {
	background-image: url("../img/top/main03.webp");
}
.slide04 {
	background-image: url("../img/top/main04.webp");
}
.swiper-container .swiper-pagination {
	position: relative!important;
	bottom: -16px!important;
	left: 50%!important;
	transform: translate(-50%, -50%)!important;
	z-index: 50!important;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-pagination-bullet {
	border-radius: 0!important;
	width: 60px;
	height: 3px;
}
.swiper-container .swiper-pagination-bullet-active {
	background: #777!important;
}
.mainArea .m_inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
.mainArea .m_inner .inner {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.mainArea .m_inner .inner:after {
	content: "MIYAMA PAPER MANUFACTURE INDUSTRY CO., LTD.";
	position: absolute;
	bottom: 30px;
	left: 0;
	font-size: 13px;
	color: #fff;
	width: 100%;
	text-align: center;
}
.mainArea .m_inner .inner p {
	font-size: 25px;
	text-align: center;
	letter-spacing: 0.2em;
	text-shadow: #fff 2px 0px 2px, #fff -2px 0px 2px, #fff 0px -2px 2px, #fff -2px 0px 2px, #fff 2px 2px 2px, #fff -2px 2px 2px, #fff 2px -2px 2px, #fff -2px -2px 2px, #fff 1px 2px 2px, #fff -1px 2px 2px, #fff 1px -2px 2px, #fff -1px -2px 2px, #fff 2px 1px 2px, #fff -2px 1px 2px, #fff 2px -1px 2px, #fff -2px -1px 2px, #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}
.mainArea .m_inner .inner p span {
	font-size: 32px;
}

/* 共通 */
/* h2 */
.newsArea .inner h2,
.visionArea .inner .desc .item h2,
.fscArea .inner .desc01 .item h2,
.productArea .desc .inner h2,
.videoArea .inner h2,
.recruitArea .inner .desc h2 {
	font-size: 28px;
	line-height: 1;
}

/* btn */
.btn {
	width: 220px;
	position: relative;
}
.btn:before {
	content: "";
	position: absolute;
	top: 20px;
	left: 0;
	width: 30px;
	height: 1px;
	background-color: #000;
	z-index: 1;
}
.btn:after {
	content: "";
	position: absolute;
	top: 20px;
	right: 0;
	width: 30px;
	height: 1px;
	background-color: #000;
}
.btn02 {
	width: 220px;
	height: 44px;
	position: relative;
	display: block;
	border: 1px solid #000;
	padding: 10px 30px;
	text-align: center;
	transition: ease .2s;
	background: rgba(255,255,255,.8);
}
.btn02 span {
	position: relative;
	z-index: 3;
	color: #000;
}
.btn02:hover span {
	color: #fff;
}
.bgcenterx:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: rgba(0,0,0,.8);
	width: 100%;
	height: 100%;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: top;
}
.bgcenterx:hover:before{
	transform: scale(1, 1);
}

/* newsArea */
.newsArea {
	margin-top: 120px;
	background-image: url("../img/top/news_bg.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.newsArea .inner {
	padding: 40px 20px;
}
.newsArea .inner .news_bg {
	max-width: 1100px;
	margin: 0 auto;
	padding: 30px 20px;
	background-color: rgba(255,255,255,.8);
	border-radius: 10px;
	text-align: center;
}
.newsArea .inner .news_bg .news {
	max-width: 900px;
	margin: 0 auto;
	padding-top: 16px;
}
.newsArea .inner .news_bg .news li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 12px 0;
}
.newsArea .inner .news_bg .news li span {
	display: block;
}
.newsArea .inner .news_bg .news li .date {
	width: 120px;
	background-color: #30417e;
	color: #fff;
	padding: 10px 0;
}
.newsArea .inner .news_bg .news li .ttl {
	width: 780px;
	margin-left: 20px;
	background-color: #fff;
	padding: 10px 16px;
	text-align: left;
}
.newsArea .inner .news_bg .btnArea {
	display: flex;
	justify-content: center;
	padding-top: 16px;
}

/* visionArea */
.visionArea {
	margin: 100px 0;
	height: 375px;
	background-image: url("../img/top/content_bg.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.visionArea .inner {
	padding: 0 20px;
	position: relative;
}
.visionArea .inner .desc {
	width: 890px;
	height: 402px;
	position: absolute;
	top: 72px;
	left: 50%;
	transform: translateX(-50%);
	background-image: url("../img/top/vision_img.webp");
	background-repeat: no-repeat;
	background-position: center center;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 170px;
	border-radius: 10px;
}
.visionArea .inner .desc .item {
	text-align: center;
}
.visionArea .inner .desc .item .btnArea {
	padding-top: 120px;
}

/* fscArea */
.fscArea {
	margin: 200px 0 100px;
	height: 375px;
	background-image: url("../img/top/fsc_bg.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.fscArea .inner {
	padding: 0 20px;
	position: relative;
}
.fscArea .inner {
	padding: 0 20px;
	position: relative;
}
.fscArea .inner .desc01 {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 0;
	display: flex;
	justify-content: flex-end;
	position: relative;
}
.fscArea .inner .desc01:before {
	content: url("../img/top/mark.svg");
	position: absolute;
	top: 36px;
	left: 0;
	width: 68px;
}
.fscArea .inner .desc01 .item {
	width: 700px;
}
.fscArea .inner .desc01 .item h2 span.rmark {
	position: relative;
	bottom: 15px;
	font-size: 13px;
}
.fscArea .inner .desc01 .item p {
	padding-top: 16px;
}
.fscArea .inner .desc02 {
	width: 1100px;
	height: 306px;
	position: absolute;
	top: 168px;
	left: 50%;
	transform: translateX(-50%);
	background-image: url("../img/top/fsc_img.webp");
	background-repeat: no-repeat;
	background-position: center center;
}
.fscArea .inner .desc02 .btnArea {
	height: 306px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* productArea */
.productArea {
	margin: 200px 0 0;
	height: 490px;
	background-image: url("../img/top/product_bg.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
.productArea:before {
	content: url("../img/top/product_img.webp");
	position: absolute;
	top: 55px;
	right: 0;
	display: block;
}
.productArea .desc {
	width: 100%;
	height: 490px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.productArea .desc .inner {
	width: 100%;
	padding: 0 20px;
	color: #fff;
	position: relative;
	z-index: 2;
}
.productArea .desc .inner h2 {
	text-shadow: #1f2b53 2px 0px 2px, #1f2b53 -2px 0px 2px, #1f2b53 0px -2px 2px, #1f2b53 -2px 0px 2px, #1f2b53 2px 2px 2px, #1f2b53 -2px 2px 2px, #1f2b53 2px -2px 2px, #1f2b53 -2px -2px 2px, #1f2b53 1px 2px 2px, #1f2b53 -1px 2px 2px, #1f2b53 1px -2px 2px, #1f2b53 -1px -2px 2px, #1f2b53 2px 1px 2px, #1f2b53 -2px 1px 2px, #1f2b53 2px -1px 2px, #1f2b53 -2px -1px 2px, #1f2b53 1px 1px 2px, #1f2b53 -1px 1px 2px, #1f2b53 1px -1px 2px, #1f2b53 -1px -1px 2px;
}
.productArea .desc .inner p {
	padding-top: 16px;
	text-shadow: #1f2b53 2px 0px 2px, #1f2b53 -2px 0px 2px, #1f2b53 0px -2px 2px, #1f2b53 -2px 0px 2px, #1f2b53 2px 2px 2px, #1f2b53 -2px 2px 2px, #1f2b53 2px -2px 2px, #1f2b53 -2px -2px 2px, #1f2b53 1px 2px 2px, #1f2b53 -1px 2px 2px, #1f2b53 1px -2px 2px, #1f2b53 -1px -2px 2px, #1f2b53 2px 1px 2px, #1f2b53 -2px 1px 2px, #1f2b53 2px -1px 2px, #1f2b53 -2px -1px 2px, #1f2b53 1px 1px 2px, #1f2b53 -1px 1px 2px, #1f2b53 1px -1px 2px, #1f2b53 -1px -1px 2px;
}
.productArea .desc .inner .btnArea {
	padding-top: 26px;
}

/* contentArea */
.contentArea {
	display: flex;
	justify-content: center;
	align-items: center;
}
.contentArea li {
	width: calc(50%);
	height: 370px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.contentArea .companyArea {
	background-image: url("../img/top/company_bg.webp");
}
.contentArea .factoryArea {
	background-image: url("../img/top/factory_bg.webp");
}

/* videoArea */
.videoArea .inner {
	padding: 80px 20px;
	text-align: center;
}
.videoArea .inner h2 {
	padding-bottom: 26px;
}
.videoArea .inner .video {
	width: 900px;
	margin: 0 auto;
	height: 500px;
	background-color: #eee;
	display: flex;
	justify-content: center;
	align-items: center;
}
.videoArea .inner video {
	max-width: 900px;
	width: 100%;
  height: 100%;
}
.videoArea .inner .btnArea {
	padding-top: 26px;
	display: flex;
	justify-content: center;
}

/* recruitArea */
.recruitArea {
	background-image: url("../img/top/content_bg.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.recruitArea .inner {
	padding: 80px 20px;
}
.recruitArea .inner .desc {
	max-width: 890px;
	margin: 0 auto;
	padding: 30px 20px;
	background-color: rgba(31,43,83,.92);
	border-radius: 10px;
	text-align: center;
	color: #fff;
}
.recruitArea .inner .desc p {
	padding-top: 16px;
}
.recruitArea .inner .desc .btnArea {
	padding-top: 16px;
	display: flex;
	justify-content: center;
}

@media screen and (max-width: 1300px) {
/* newsArea */
	.newsArea .inner .news_bg .news {
		max-width: 800px;
	}	
	.newsArea .inner .news_bg .news li .date {
    width: 100px;
	}
	.newsArea .inner .news_bg .news li .ttl {
		width: 680px;
	}	
	
/* productArea */
	.productArea:before {
		right: -100px;
	}
	.productArea .desc .inner {
    padding: 0 60px;
	}
}


@media screen and (max-width: 1000px) {
/* mainArea */
	.swiper-pagination-bullet {
		width: 40px;
	}
	.mainArea .m_inner .inner p {
		font-size: 22px;
	}
	.mainArea .m_inner .inner p span {
		font-size: 28px;
	}
	
/* 共通 */
/* h2 */
	.newsArea .inner h2,
	.visionArea .inner .desc .item h2,
	.fscArea .inner .desc01 .item h2,
	.productArea .desc .inner h2,
	.videoArea .inner h2,
	.recruitArea .inner .desc h2 {
		font-size: 22px;
	}
	
/* newsArea */
	.newsArea {
		margin-top: 60px;
	}
	.newsArea .inner {
		padding: 40px 6vw;
	}
	.newsArea .inner .news_bg .news {
		max-width: 630px;
		padding-top: 10px;
	}	
	.newsArea .inner .news_bg .news li .ttl {
		width: 520px;
		margin-left: 10px;
	}	
	
/* visionArea */
	.visionArea {
		margin: 60px 0;
		height: 375px;
		background-image: url("../img/top/content_bg.webp");
	}
	.visionArea .inner {
		padding: 0 6vw;
	}
	.visionArea .inner .desc {
		width: 640px;
		height: 382px;
		top: 60px;
		border-radius: 6px;
		padding: 0 30px;
	}
	.visionArea .inner .desc .item .btnArea {
		padding-top: 100px;
	}
	
/* fscArea */
	.fscArea {
		margin: 120px 0 0;
	}
	.fscArea .inner {
		padding: 0 8vw;
	}
	.fscArea .inner {
		padding: 0 6vw;
	}
	.fscArea .inner .desc01 {
		max-width: 100%;
		width: 100%;
		display: block;
	}
	.fscArea .inner .desc01 .item h2 {
		padding-left: 50px;
	}	
	.fscArea .inner .desc01:before {
		top: 22px;
		width: 40px;
	}
	.fscArea .inner .desc01 .item {
		width: 100%;
	}
	.fscArea .inner .desc01 .item p {
		padding-top: 26px;
	}
	.fscArea .inner .desc02 {
		width: 1100px;
		height: 280px;
		top: 186px;
	}
	.fscArea .inner .desc02 .btnArea {
		height: 280px;
	}
	
/* productArea */
	.productArea {
		height: 380px;
		margin: 150px 0 0;
	}
	.productArea:before {
		content: url("../img/top/product_img_sp.webp");
		position: absolute;
		top: 0;
		right: 0;
		display: block;
	}
	.productArea .desc {
		height: 380px;
	}
	.productArea .desc .inner {
		padding: 0 8vw;
	}
	
/* videoArea */
	.videoArea .inner {
		padding: 60px 6vw;
	}
	.videoArea .inner .video {
		width: 100%;
		height: 400px;
	}
	.videoArea .inner .btnArea {
		padding-top: 26px;
	}
	
/* recruitArea */
	.recruitArea .inner {
		padding: 60px 6vw;
	}
	.recruitArea .inner .desc {
		max-width: 100%;
		width: 100%;
		padding: 30px;
	}
}

@media screen and (max-width: 767px) {
/* mainArea */
	.slide01 {
		background-image: url("../img/top/main01_sp.webp");
	}
	.slide02 {
		background-image: url("../img/top/main02_sp.webp");
	}
	.slide03 {
		background-image: url("../img/top/main03_sp.webp");
	}
	
/* newsArea */
	.newsArea .inner .news_bg {
		max-width: 100%;
		width: 100%;
		padding: 30px 30px;
		border-radius: 6px;
	}
	.newsArea .inner .news_bg .news {
		max-width: 100%;
		width: 100%;
	}
	.newsArea .inner .news_bg .news li {
		display: block;
		padding: 6px 0;
	}
	.newsArea .inner .news_bg .news li .date {
		width: 100%;
		text-align: left;
		padding: 10px 16px;
		line-height: 1.2;
	}
	.newsArea .inner .news_bg .news li .ttl {
		width: 100%;
		margin-left: 0;
		line-height: 1.2;
	}
	
/* visionArea */
	.visionArea {
		margin: 50px 0;
		height: 300px;
	}
	.visionArea .inner .desc {
		width: 600px;
		height: 300px;
		top: 30px;
		background-image: url(../img/top/vision_img_sp.webp);
		background-size: cover;
		background-position: top center;
		justify-content: center;
	}
	.visionArea .inner .desc .item h2 {
		padding-top: 36px;
		color: #fff;
		text-shadow: 1px 1px 4px #444;
	}
	.visionArea .inner .desc .item .btnArea {
		padding-top: 20px;
	}
	
/* fscArea */
	.fscArea {
		margin: 80px 0 0;
	}
	.fscArea .inner .desc02 {
		width: 100%;
		height: 260px;
		top: 186px;
		background-image: url(../img/top/fsc_img_sp.webp);
	}
	.fscArea .inner .desc02 .btnArea {
		height: 260px;
	}
	
/* productArea */
	.productArea {
		margin: 120px 0 0;
	}
	.productArea:before {
		top: 0;
		right: -50px;
	}
	
/* contentArea */
	.contentArea {
		display: block;
	}
	.contentArea li {
		width: 100%;
		height: 220px;
	}
	
/* videoArea */
	.videoArea .inner {
		padding: 50px 6vw;
	}	
	
/* recruitArea */
	.recruitArea .inner {
    padding: 50px 6vw;
	}
	.recruitArea .inner .desc {
		border-radius: 6px;
	}
}

@media screen and (max-width: 600px) {
/* mainArea */
	.mainArea .m_inner .inner:after {
		font-size: 2vw;
	}
		
/* newsArea */
	.newsArea .inner .news_bg {
		padding: 30px 20px;
	}	
	
/* recruitArea */
	.recruitArea .inner .desc {
		padding: 30px 20px;
	}	
}

@media screen and (max-width: 400px) {
/* mainArea */
	.mainArea .m_inner .inner p {
	 letter-spacing: inherit;
	}	
	.mainArea .m_inner .inner p span {
		font-size: 26px;
	}	
	
/* fscArea */
	.fscArea .inner .desc02 {
		top: 206px;
	}	
	
/* productArea */
	.productArea {
		margin: 140px 0 0;
	}
	.productArea .desc {
		text-align: center;
	}	
	.productArea .desc .inner p {
    text-align: left;
	}
	.productArea .desc .inner .btnArea {
		display: flex;
		justify-content: center;
		padding-top: 16px;
	}	
	
/* recruitArea */
	.recruitArea .inner .desc p {
		text-align: left;
	}
}