@charset "UTF-8";



	
/* fv
------------------------------  */
#fv {
	padding: 20px 20px 0 20px;
	position: relative;
}
	#fv .text {
		width: 50%;
		padding: 170px 6% 0 6%;
	}
		#fv .text .head {
			font-size: 2.0rem;
			line-height: 1;
			margin-bottom: 15px;
		}

		#fv .text h2 {
			font-size: 5.4rem;
			font-weight: 700;
			line-height: 1.4em;
			margin-bottom: 25px;
		}

		#fv .text .txt {
			font-size: 2.4rem;
			margin-bottom: 40px;
		}

	#fv .pht {
		width: 50%;
		height: 760px;
		border-radius: 20px;
		overflow: hidden;
	}
		#fv .pht img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}


	#fv .marquee {
		display: flex;
		width: 100%;
		overflow: hidden;
		color: #2EA4D8;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
		#fv .marquee .marquee__item {
			flex: 0 0 auto;
			font-size: 12.0rem;
			font-weight: 600;
			white-space: nowrap;
			line-height: 1.3em;
			padding-right: 20px;
		}
		#fv .marquee .marquee__item:nth-child(odd) {
			animation: loop 80s -40s linear infinite;
		}
		#fv .marquee .marquee__item:nth-child(even) {
			animation: loop2 80s linear infinite;
		}
		@keyframes loop {
			0% {
				transform: translateX(100%);
			}
			to {
				transform: translateX(-100%);
			}
		}
		@keyframes loop2 {
			0% {
				transform: translateX(0);
			}
			to {
				transform: translateX(-200%);
			}
		}
@media screen and (max-width: 1024px) {
	#fv {
		padding: 2vw 2vw 0 2vw;
	}
		#fv .text {
			width: 50%;
			padding: 17vw 4% 0 4%;
		}
			#fv .text .head {
				font-size: 2.0vw;
				line-height: 1;
				margin-bottom: 1.5vw;
			}
	
			#fv .text h2 {
				font-size: 4.8vw;
				margin-bottom: 2vw;
			}

			#fv .text .txt {
				font-size: 1.9vw;
				margin-bottom: 5vw;
			}

		#fv .pht {
			height: 70vw;
			border-radius: 2vw;
		}


		#fv .marquee .marquee__item {
			font-size: 11.0vw;
			padding-right: 2vw;
		}
}
@media screen and (max-width: 767px) {
	#fv {
		display: block;
		padding: 26vw 0 0 0;
	}
		#fv .text {
			width: 100%;
			padding: 0 7% 0 7%;
			position: relative;
			z-index: 2;
		}
			#fv .text .head {
				font-size: 4.0vw;
				line-height: 1;
				margin-bottom: 2vw;
			}
	
			#fv .text h2 {
				font-size: 10.0vw;
				margin-bottom: 5vw;
			}

			#fv .text .txt {
				font-size: 4.2vw;
				margin-bottom: 8vw;
			}

		#fv .pht {
			margin-top: -6.5vw;
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 1;
			border-radius: 0;
		}


		#fv .marquee .marquee__item {
			font-size: 21.0vw;
		}
}



	
/* service
------------------------------  */
#service {
	background: url("../common/img/bg_motif.svg") no-repeat center / auto 90%;
}
	#service .top-tit {
		width: 20%;
		order: 2;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
		#service .top-tit .en {
			font-size: 2.0rem;
			font-weight: 600;
			line-height: 1;
			margin-left: 10px;
		}

		#service .top-tit h2 {
			font-size: 4.0rem;
			font-weight: 700;
			line-height: 1.3em;
		}

	#service .content {
		width: 80%;
		order: 1;
	}
		#service .content a.linkbox {
			margin-bottom: 80px;
		}
		#service .content a.linkbox:nth-last-child(1) {
			margin-bottom: 0;
		}
			#service .content a.linkbox .pht {
				width: 35%;
				border-radius: 20px;
			}
				#service .content a.linkbox .pht img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

			#service .content a.linkbox .text {
				width: 65%;
				padding-left: 5%;
			}
				#service .content a.linkbox .text .head {
					font-size: 1.4rem;
					font-weight: 600;
					line-height: 1;
					margin-bottom: 15px;
				}

				#service .content a.linkbox .text h3 {
					font-size: 2.6rem;
					font-weight: 700;
					line-height: 1.4em;
					margin-bottom: 20px;
				}

				#service .content a.linkbox .text .txt {
					margin-bottom: 20px;
				}
@media screen and (max-width: 1024px) {
	#service {
		background: url("../common/img/bg_motif.svg") no-repeat center / 80% auto;
	}
		#service .top-tit .en {
			font-size: 2.0vw;
			margin-left: 1vw;
		}

		#service .top-tit h2 {
			font-size: 4.0vw;
		}

		#service .content a.linkbox {
			margin-bottom: 8vw;
		}
			#service .content a.linkbox .pht {
				width: 35%;
				border-radius: 2vw;
			}

			#service .content a.linkbox .text .head {
				font-size: 1.4vw;
				margin-bottom: 1.5vw;
			}

			#service .content a.linkbox .text h3 {
				font-size: 2.6vw;
				margin-bottom: 2vw;
			}

			#service .content a.linkbox .text .txt {
				margin-bottom: 2vw;
			}
}
@media screen and (max-width: 767px) {
	#service {
		background: url("../common/img/bg_motif.svg") no-repeat center / auto 80%;
	}
		#service .inner {
			display: block;
		}
			#service .top-tit {
				width: 100%;
				-ms-writing-mode: horizontal-tb;
				writing-mode: horizontal-tb;
				margin-bottom: 7vw;
				text-align: center;
			}
				#service .top-tit .en {
					font-size: 4.0vw;
					margin-left: 0;
					margin-bottom: 2vw;
				}

				#service .top-tit h2 {
					font-size: 6.0vw;
				}

			#service .content {
				width: 100%;
			}
				#service .content a.linkbox {
					display: block;
					margin-bottom: 10vw;
				}
					#service .content a.linkbox .pht {
						width: 100%;
						height: 100%;
						aspect-ratio: 4 / 2.6;
						border-radius: 4vw;
					}

					#service .content a.linkbox .text {
						width: 100%;
						padding: 5vw 5vw 0 5vw;
					}
						#service .content a.linkbox .text .head {
							font-size: 3.4vw;
							margin-bottom: 3vw;
						}

						#service .content a.linkbox .text h3 {
							font-size: 4.6vw;
							margin-bottom: 4vw;
						}

						#service .content a.linkbox .text .txt {
							margin-bottom: 4vw;
						}
}



	
/* about
------------------------------  */
#about {
	overflow: hidden;
}
	#about .circle {
		width: 250px;
		position: absolute;
		top: -100px;
		right: -40px;
		animation: 8s linear infinite rotation1;
	}
	@keyframes rotation1{
	  0%{ transform:rotate(0);}
	  100%{ transform:rotate(360deg); }
	}

	#about .text {
		width: 40%;
		order: 2;
		padding: 100px 0;
	}
		#about .text .top-tit {
			margin-bottom: 25px;
		}
			#about .text .top-tit .en {
				font-size: 2.0rem;
				font-weight: 600;
				line-height: 1;
				margin-bottom: 20px;
			}

			#about .text .top-tit h2 {
				font-size: 4.0rem;
				font-weight: 700;
				line-height: 1.3em;
			}

		#about .text .txt {
			margin-bottom: 30px;
		}

	#about .pht {
		width: 50%;
		border-radius: 20px;
		overflow: hidden;
		order: 1;
	}
		#about .pht img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
@media screen and (max-width: 1024px) {
	#about .circle {
		width: 25vw;
		top: -10vw;
		right: -4vw;
	}

	#about .text {
		width: 40%;
		padding: 10vw 0;
	}
		#about .text .top-tit {
			margin-bottom: 2.5vw;
		}
			#about .text .top-tit .en {
				font-size: 2.0vw;
				margin-bottom: 2vw;
			}

			#about .text .top-tit h2 {
				font-size: 4.0vw;
			}

		#about .text .txt {
			margin-bottom: 3vw;
		}

	#about .pht {
		border-radius: 2vw;
	}
}
@media screen and (max-width: 767px) {
	#about .circle {
		width: 25vw;
		top: -8vw;
		right: -2vw;
	}

	#about .inner {
		display: block;
	}
		#about .text {
			width: 100%;
			padding: 0 0;
			position: relative;
			z-index: 2;
		}
			#about .text .top-tit {
				margin-bottom: 5vw;
				text-align: center;
			}
				#about .text .top-tit .en {
					font-size: 4.0vw;
					margin-bottom: 2vw;
				}

				#about .text .top-tit h2 {
					font-size: 6.0vw;
				}

			#about .text .txt {
				margin-bottom: 6vw;
			}

		#about .pht {
			width: 100%;
			margin-top: -6.5vw;
			border-radius: 4vw;
		}
}