@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@200&family=Noto+Sans+JP:wght@100;300;400;500&display=swap');
h2 {
	text-align: center;
	letter-spacing: .6rem;
}
h2 {
	font-size: 1.4rem;
}
p {
	font-size: 1.3rem;
	line-height: 2rem;
	font-weight: 400;
	letter-spacing: .2rem;
}
li, span, th, td {
	letter-spacing: .2rem;
	font-weight: 400;
}
h1 {
	margin-bottom: 0;
}
/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	h2:before {
		width: 40px;
		height: 40px;
	}
	h2 {
		margin-bottom: 10px;
		font-size: 1.2rem;
		line-height: 3.2rem;
		text-align: left;
	}
	h2 span {
		font-size: 3.4rem;
		letter-spacing: .8rem;
	}
	h1:before {
		width: 50px;
		height: 50px;
		margin-bottom: 0;
		margin-left: -10px;
	}
	th, td {
		font-size: 1.4rem;
	}
}

/*PC Layout
===================================*/
@media all and (min-width: 769px) {
	h2 span {
		font-size: min(2.8vw, 36px);
		letter-spacing: .8rem;
	}
}


/* main
------------------------------------------------------ */
.technology-main-bg {
	background-color: #fff;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	position: relative;
}
h1 {
	text-align: left;
	position: absolute;
	left: 100px;
	bottom: 45%;
	font-size: 2.6rem;
	line-height: 3;
	letter-spacing: .8rem;
}
.page-subttl {
	color: #333;
	text-align: left;
	bottom: 40%;
	left: 100px;
	position: absolute;
	font-weight: 400;
}
h1 span{
	font-size: 7.2rem;
	letter-spacing: 1.4rem;
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: 16px;
}
h1 span::after{
	content: "";
	display: block;
	width: 50vw;
	max-width: 650px;
	height: 2px;
	position: absolute;
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	-webkit-text-fill-color: transparent;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	h1 {
		font-size: 2rem;
		line-height: 1;
		position: static;
		letter-spacing: 0.2em;
	}
	.page-subttl {
		font-size: 2rem;
		position: static;
		margin-top: 8px;
	}
	.technology-main-bg {
		background-size: cover;
		background-position: center;
	}
	.main-lead{
		padding: 60px 20px;
	}
	h1 span{
		font-size: 4.4rem;
		line-height: 1;
		display: block;
		padding-bottom: 0;
	}
	h1 span::after{
		width: 60vw;
		margin-top: 4px;
	}
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
	main {
		margin-top: 140px;
	}
	.breadcrumb {
		margin-top: -50px;
	}
	.page-subttl {
		font-size: 2.6rem;
		line-height: 1.5;
	}
	h1, .page-subttl {
		position: relative;
	}
	.main-lead {
		max-width: 1480px;
		position: static;
		margin: 80px auto;
	}
	.technology-main-bg {
		background-size: cover;
		width: auto;
		margin: 0 calc(50% - 50vw);
		position: relative;
		overflow: hidden;
		height: auto;
	}
	video {
		vertical-align: bottom;
		-o-object-fit: cover;
		object-fit: cover;
		position: absolute;
		height: 100%;
		width: 100%;
		bottom: 0;
		left: 0;
		object-position: bottom;
	}
}

/* アコーディオン
------------------------------------------------------ */
@media print, screen and (max-width: 768px) {
	.menu {
		cursor: pointer;
		user-select: none;
	}
	.contents {
		height: 0;
		overflow: hidden;
		opacity: 0;
		transition-duration: 0.4s;
	}
	.contents.is-open {
		height: auto;
		opacity: 1;
	}
}


/* message
------------------------------------------------------ */
.message-bg {
	background: url(images/message-bg.jpg) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 80px 0 20px;
	position: relative;
}
.saver-txt {
	width: 50%;
	position: absolute;
	bottom: 0;
	right: 30px;
}
.message {
	max-width: 1080px;
	margin: 0 auto;
}
.message-txt {
	line-height: 2;
}
.message-ttl {
	font-size: 2.4rem;
	margin-bottom: 20px;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	.message {
		width: 90%;
		margin: 0 auto;
	}
	.message-bg {
		background: url(images/message-bg-sp.png);
		padding-bottom: 0;
		padding-top: 30px;
	}
	.message-img {
		width: 94vw;
		margin: 0 calc(50% - 50vw);
		margin-bottom: 20px;
		z-index: 99;
		position: relative;
	}
	.message-content {
		background: #333;
		width: 94vw;
		margin: 0 calc(50% - 50vw);
		margin-left: auto;
		padding-top: 220px;
		margin-top: -200px;
		padding-bottom: 60px;
	}
	.message-ttl {
		color: #fff;
		width: 90%;
		margin: 0 auto 20px;
		font-size: 1.8rem;
	}
	.message-txt {
		color: #fff;
		width: 90%;
		margin: 0 auto;
		line-height: 1.8;
	}
	.saver-txt {
		width: 80%;
		bottom: 54px;
	}
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
	.message-content {
		width: 42%;
		margin-left: auto;
		color: #fff;
		margin: 200px 0 180px auto;
	}
}


/* vision
------------------------------------------------------ */
.vision-bg {
	background: url(images/vision-bg.jpg) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 100px 0 160px;
}
.vision {
	max-width: 1080px;
	margin: 0 auto;
	background-size: contain;
	background-position: center;
}
.vision h2 {
	width: 50%;
	margin: 0 auto 20px;
}
.vision-ttl {
	text-align: center;
	font-size: 2.4rem;
	margin-top: 20px;
	line-height: 1.6;
	margin-bottom: 20px;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	.vision-bg {
		background: url(images/message-bg-sp.png) no-repeat;
		padding: 68px 0;
	}
	.vision {
		width: 90%;
		margin: 0 auto;
	}
	.vision h2 {
		width: 100%;
		line-height: 2rem;
	}
	.vision-ttl {
		text-align: left;
		font-size: 1.8rem;
	}
	.vision-txt {
		line-height: 1.8;
	}
	.vision-img {
		margin-top: 30px;
	}
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
	.vision-txt {
		width: 40%;
		margin: 0 auto;
		line-height: 2;
	}
}


/* stranger
------------------------------------------------------ */
.stranger-lead-bg {
	background: url(images/stranger-img.jpg) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw) 60px;
	padding: 160px 0;
	background-position: center;
}
.stranger {
	max-width: 800px;
	margin: 0 auto;
}
.business-lead-bg {
	background: url(images/business-img.jpg) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw) 60px;
	padding: 160px 0;
	background-position: center;
}
.business {
	max-width: 800px;
	margin: 0 auto;
}
.future-lead-bg {
	background: url(images/future-img.jpg) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw) 60px;
	padding: 160px 0;
	background-position: center;
}
.future {
	max-width: 800px;
	margin: 0 auto;
}
.h3-bg {
	background: url(images/ttl-bg.png) no-repeat;
	background-size: 100% auto;
	width: 95vw;
	margin: 0 calc(50% - 50vw);
	padding: 24px 0;
}
.stranger h2,.business h2,.future h2 {
	max-width: 1080px;
	margin: 0 auto;
	color: #fff;
	font-size: min(1vw, 16px);
	font-weight: 400;
	letter-spacing: .2rem;
}
.stranger h2 span,.business h2 span,.future h2 span {
	font-size: 4rem;
} 
.stranger-lead p {
	font-size: 2rem;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
	color: #fff;
}
.stranger-bg {
	background: url(images/contents-bg.png) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding-bottom: 80px;
}
.business-lead p {
	font-size: 2rem;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
	color: #fff;
}
.business-bg {
	background: url(images/contents-bg.png) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding-bottom: 80px;
}
.future-lead p {
	font-size: 2rem;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
	color: #fff;
}
.future-bg {
	background: url(images/contents-bg.png) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding-bottom: 80px;
}
.sec-txt {
	line-height: 2;
	margin-bottom: 40px;
}
.sec-ttl01 {
	background: #fff;
	padding: 10px 0;
	margin-bottom: 20px;
	margin-left: calc(50% - 50vw);
}
.sec-ttl02 {
	background: #fff;
	padding: 10px 0 10px 30px;
	margin-bottom: 20px;
	margin-right: calc(50% - 50vw);
}
.sec-ttl01 p {
	font-size: 1.8rem;
	margin-right: calc(50% - 50vw);
	margin-left: auto;
	text-align: center;
}
.sec-ttl02 p {
	font-size: 1.8rem;
	line-height: 1.5;
}
.more-link {
	position: relative;
	color: #fff;
	padding: 10px 30px;
	display: block;
	text-decoration: none;
	outline: none;
	transition: all 0.3s ease-in-out;
	width: 90%;
	max-width: 300px;
	padding: 10px 0;
	text-align: center;
	margin-bottom: 10px;
	background: linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
}
.more-link p:after {
	content: '';
	background: url(/images/arrow.png) no-repeat;
	background-size: contain;
	width: 20px;
	height: 30px;
	position: absolute;
	right: 28px;
	top: 22px;
	display: inline-block;
}
.more-link p {
	font-size: 1.5rem;
	letter-spacing: .3rem;
	line-height: 2;
	text-align: center;
}
.more-link:hover {
	background: #333;
	color: #fff;
	border-color: transparent;
	opacity: 1;
}
.sec-ttl02{
    position: relative;
}
.bgLRextend::before{
    left: 0;
}
.more-link::before, .more-link::after {
	content: '';
	position: absolute;
	border: solid #fff;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}
.more-link::before {
	top: 3px;
	left: 6px;
	border-width: 1px 0 0 0;
}
.more-link::after {
	bottom: 3px;
	right: 6px;
	border-width: 0 0 1px 0;
}
.more-link:hover::before, .more-link:hover::after {
	width: calc(10% + 50px);
	height: calc(10% + 20px);
	border-color: #fff;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	.h3-bg {
		background: url(images/ttl-bg-sp.png) no-repeat;
		background-size: auto;
		padding: 0;
		height: 100%;
		width: 100vw;
		background-position: left;
	}
	.stranger h2,.business h2,.future h2 {
		font-size: 1.2rem;
		height: auto;
		line-height: 2rem;
		width: 90%;
	}
	.stranger h2 span,.business h2 span,.future h2 span {
		font-size: 3rem;
		margin: 0 auto;
		height: 50px;
		line-height: 50px;
	}
	.stranger-bg, .business-bg, .future-bg {
		background: url(images/message-bg-sp.png) no-repeat;
	}
	.stranger-bg, .business-bg, .future-bg {
		padding-bottom: 40px;
	}
	.stranger, .business, .future {
		width: 90%;
		margin: 0 auto;
	}
	.stranger-lead-bg {
		background: url(images/stranger-img-sp.jpg) no-repeat;
		padding: 30px 0;
		background-size: cover;
		background-position: center;
		margin-bottom: 20px;
	}
	.stranger-lead p, .business-lead p, .future-lead p {
		text-align: center;
		line-height: 1.6;
		font-size: 1.8rem;
	}
	.business-lead-bg {
		background: url(images/business-img-sp.jpg) no-repeat;
		padding: 30px 0;
		background-size: cover;
		background-position: center;
		margin-bottom: 20px;
	}
	.future-lead-bg {
		background: url(images/future-img-sp.jpg) no-repeat;
		padding: 30px 0;
		background-size: cover;
		background-position: center;
		margin-bottom: 20px;
	}
	.sec-ttl01 p, .sec-ttl02 p {
		text-align: left;
		font-size: 1.8rem;
		line-height: 1.5;
		width: 90%;
		margin: 0 auto;
	}
	.sec-ttl02 {
		padding-left: 0;
		width: 100vw;
		margin: 0 calc(50% - 50vw) 20px;
	}
	.sec-ttl01 {
		width: 100vw;
	}
	.more-link p {
		text-align: left;
		margin-left: 20px;
	}
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
	h3 span {
		font-size: min(2.8vw, 36px);
		letter-spacing: .8rem;
	}
	.stranger-lead, .future-lead {
		backdrop-filter: blur(15px) brightness(0.3);
		-webkit-backdrop-filter: blur(15px) brightness(0.3);
		width: 50%;
		clip-path: polygon(0 0%, 94% 0, 100% 100%, 0% 100%);
		padding: 20px 0;
	}
	.stranger-lead p, .future-lead p {
		width: 60%;
		margin-right: 40px;
	}
	.business-lead {
		backdrop-filter: blur(15px) brightness(0.3);
		-webkit-backdrop-filter: blur(15px) brightness(0.3);
		padding: 30px 0;
		width: 50%;
		clip-path: polygon(6% 0%, 100% 0, 100% 100%, 0% 100%);
		margin-left: auto;
	}
	.business-lead p {
		width: 60%;
		margin-left: 80px;
	}
	.message-ttl, .vision-ttl, .stranger-lead p, .sec-ttl01 p, .sec-ttl02 p, .business-lead p, .future-lead p {
		font-size: min(1.6vw, 26px);
		line-height: 1.5;
	}
	.message-txt, .vision-txt, .sec-txt {
		font-size: min(1vw, 16px);
		line-height: 2.4rem;
		letter-spacing: .3rem;
	}
}

@media screen and (min-width:768px) and ( max-width:1024px) {
	.message-bg {
		background-position: center;
	}
	.message-content {
		width: 50%;
		margin: 100px 0 80px auto;
	}
	.vision-bg {
		background-position: center;
	}
	.vision-txt {
		width: 50%;
	}
	.stranger-lead-bg, .business-lead-bg, .future-lead-bg {
		padding: 60px 0;
	}
	.h3-bg {
		padding: 12px 0;
	}
}

.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:1.0s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}