@charset "UTF-8";
/*========================================
Re:vite
Date : 
Style : each contents CSS "index"
Filename : contents.css
========================================*/

/*========================================
Wrapper
========================================*/
.wide-wrapper {
	width: 100%;
}

.main-wrapper {
	max-width: 1024px;
	margin: 0 auto;
}

.ft-wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

main {
	display: block;
	overflow: hidden;
}


/*========================================
Text Format
========================================*/
* {
	word-break: normal !important;
	word-wrap: break-word;
}

@media(min-width: 768px) and (max-width:1200px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/*========================================
animation
========================================*/
.mask-image {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 50%;
	left: 50%;
	/*top: -1px;
	left: -1px;*/

	/*width: 50vw;
	height: 50vh;
	position: absolute;
	top: 50%;
	left: 50%;*/
	/*transform: translate(-50%, -50%) scale(1.175);*/
	backface-visibility: hidden;
	overflow: hidden;
}

.mask-image img {
	width: auto;
	height: 100vh;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-45%, -56%);
}

.actangle-pc {
	display: block;
}

.actangle-sp {
	display: none;
}

.fade-in-bottom {
	opacity: 0;
	animation-name: fadein-bottom;
	animation-duration: 5.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@media screen and (max-width: 767px) {
	.mask-image {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: -1px;
		left: -1px;
	}

	.mask-image img {
		width: 100%;
		height: auto;
		position: absolute;
		top: 50%;
		left: auto;
		transform: translate(0, -56%);
		bottom: 0;
	}

	.actangle-pc {
		display: none;
	}

	.actangle-sp {
		display: block;
	}

	.fade-in-bottom {
		animation-name: fadein-bottom_sp;
	}
}

@media screen and (min-width: 768px) and (max-width: 800px) {
	.mask-image {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: -1px;
		left: -1px;
	}

	.mask-image img {
		width: 100%;
		height: auto;
		position: absolute;
		top: auto;
		left: auto;
		transform: translate(0, 0);
		bottom: -140px;
	}

	.actangle-pc {
		display: none;
	}

	.actangle-sp {
		display: block;
	}

	.fade-in-bottom {
		animation-name: fadein-bottom_sp;
	}
}


@keyframes fadein-bottom {
	0% {
		opacity: 0;
		/*transform: translateY(100px);*/
		transform: translate(-50%, -40%) scale(1.25);
		/*transform: translate(80px, 50px) scale(1.175);*/
	}

	90% {
		opacity: 0;
		/*transform: translateY(100px);*/
		transform: translate(-50%, -40%) scale(1.25);
		/*transform: translate(80px, 50px) scale(1.175);*/
	}

	100% {
		opacity: 1;
		/*transform: translateY(0);*/
		transform: translate(-50%, -45%) scale(1.25);
		/*transform: translate(80px, -1px) scale(1.175);*/
	}
}

@keyframes fadein-bottom_sp {
	0% {
		opacity: 0;
		/*transform: translateY(100px);*/
		/*transform: translate(-50%, -40%) scale(2.4);*/
		transform: translate(0, 50px) scale(1.05);
	}

	90% {
		opacity: 0;
		/*transform: translateY(100px);*/
		/*transform: translate(-50%, -40%) scale(2.4);*/
		transform: translate(0, 50px) scale(1.05);
	}

	100% {
		opacity: 1;
		/*transform: translateY(0);*/
		/*transform: translate(-50%, -50%) scale(2.5);*/
		transform: translate(0, -1px) scale(1.05);
	}
}




.test {
	width: 50vw;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(5);
	animation: main_v 6s linear 6s;
	animation-iteration-count: infinite;
	backface-visibility: hidden;
	overflow: hidden;
}

@keyframes main_v {
	0% {
		top: 20%;
		left: 20%;
		transform: translate(-50%, -50%) rotate(0deg) scale(5);
	}

	10% {
		top: 30%;
		left: 30%;
		transform: translate(-50%, -50%) rotate(36deg) scale(5);
	}

	20% {
		top: 40%;
		left: 40%;
		transform: translate(-50%, -50%) rotate(72deg) scale(5);
	}

	30% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(108deg) scale(5);
	}

	40% {
		top: 60%;
		left: 60%;
		transform: translate(-50%, -50%) rotate(144deg) scale(5);
	}

	50% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(180deg) scale(5);
	}

	60% {
		top: 60%;
		left: 60%;
		transform: translate(-50%, -50%) rotate(216deg) scale(5);
	}

	70% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(252deg) scale(5);
	}

	80% {
		top: 40%;
		left: 40%;
		transform: translate(-50%, -50%) rotate(288deg) scale(5);
	}

	90% {
		top: 30%;
		left: 30%;
		transform: translate(-50%, -50%) rotate(324deg) scale(5);
	}

	100% {
		top: 20%;
		left: 20%;
		transform: translate(-50%, -50%) rotate(360deg) scale(5);
	}
}

@keyframes main_v_sp {
	0% {
		top: 20%;
		left: 20%;
		transform: translate(-50%, -50%) rotate(0deg) scale(4);
	}

	10% {
		top: 30%;
		left: 30%;
		transform: translate(-50%, -50%) rotate(36deg) scale(4);
	}

	20% {
		top: 40%;
		left: 40%;
		transform: translate(-50%, -50%) rotate(72deg) scale(4);
	}

	30% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(108deg) scale(4);
	}

	40% {
		top: 60%;
		left: 60%;
		transform: translate(-50%, -50%) rotate(144deg) scale(4);
	}

	50% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(180deg) scale(4);
	}

	60% {
		top: 60%;
		left: 60%;
		transform: translate(-50%, -50%) rotate(216deg) scale(4);
	}

	70% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(252deg) scale(4);
	}

	80% {
		top: 40%;
		left: 40%;
		transform: translate(-50%, -50%) rotate(288deg) scale(4);
	}

	90% {
		top: 30%;
		left: 30%;
		transform: translate(-50%, -50%) rotate(324deg) scale(4);
	}

	100% {
		top: 20%;
		left: 20%;
		transform: translate(-50%, -50%) rotate(360deg) scale(4);
	}
}


.top-mask {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	animation: mask-animation 3s ease-in 6s forwards;
	animation-fill-mode: forwards;
	background: rgba(255, 255, 255, 1);
	z-index: 50;
}

@keyframes mask-animation {
	0% {
		background: rgba(255, 255, 255, 1);
	}

	20% {
		background: rgba(255, 255, 255, 0.8);
	}

	40% {
		background: rgba(255, 255, 255, 0.6);
	}

	60% {
		background: rgba(255, 255, 255, 0.4);
	}

	80% {
		background: rgba(255, 255, 255, 0.2);
	}

	100% {
		background: rgba(255, 255, 255, 0);
		display: none;
	}
}

.mv-video {
	height: 100vh;
	opacity: 0;
	animation: video-fade-in 1s ease-in 5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@keyframes video-fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.line.finished path {
	fill: #9adeeb;
	fill-opacity: 1;
	animation: fill-anime 1s;
}

@keyframes fill-anime {
	0% {
		fill-opacity: 0;
	}

	50% {
		fill-opacity: 0.5;
	}

	100% {
		fill-opacity: 1;
	}
}

.line-right:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 70px;
	width: 8px;
	height: 8px;
	background: #ffffff;
	border: 2px solid #232323;
	border-radius: 50%;
	transform: translateY(-50%);
	animation: 1.5s infinite forwards running expansion;
	-webkit-animation: 1.5s infinite forwards running expansion;
}

@keyframes expansion {
	0% {
		right: 70px;
	}

	50% {
		right: 125px;
		animation-timing-function: ease-in;
	}

	100% {
		right: 70px;
	}
}

@media (max-width: 767px) {
	.test {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(4);
		animation: main_v_sp 9s linear 9s;
		animation-iteration-count: infinite;
		backface-visibility: hidden;
		overflow: hidden;
	}
}

/*========================================
common
========================================*/
.base-btn {
	box-sizing: border-box;
	display: block;
	margin-right: 30px;
	padding: 12px 45px;
	border: 1px solid #00adce;
	border-radius: 30px;
	background-color: #00adce;
	color: #FFFFFF;
	text-align: center;
	transition: .4s;
	font-weight: bold;
	font-size: 1.125rem;
}

.base-btn:hover {
	background-color: #ffffff;
	color: #00adce;
}

.under__page {
	padding-top: 150px;
}

.vector-wrapper .line {
	display: none;
	stroke: #9adeeb;
	stroke-miterlimit: 10;
}

.vector-wrapper.active .line {
	display: block;
}

#canvas {
	position: absolute;
	top: 240px;
	right: -250px;
	width: 700px;
	height: 380px;
}

#canvas_2 {
	position: absolute;
	top: -140px;
	left: -90px;
	width: 510px;
}

.indent-flont {
	padding-left: 1em;
	text-indent: -1em;
}

@media (max-width: 959px) {
	#canvas {
		top: 140px;
		right: -250px;
		width: 540px;
	}

	#canvas_2 {
		left: -90px;
	}
}

@media (max-width: 767px) {
	#canvas {
		top: unset;
		/*bottom: -120px;*/
		bottom: 210px;
		width: 480px;
	}

	#canvas_2 {
		top: -50px;
		width: 345px;
	}

	.under__page {
		padding-top: 95px;
	}

	.base-btn {
		padding: 15px 45px;
	}
}

/*========================================
ページ別
========================================*/
.top__mv {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	/*max-height: 780px;*/
	margin: 0 auto;
}

.top__mv-content {
	width: 100vh;
	height: 100vh;
	margin: 0 auto;
	position: relative;
}

/*.top__mv--txt {
	position: absolute;
	top: 260px;
	left: 90px;
	z-index: 100;
}*/
.top__mv--txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
}

.top__mv--txt h1 {
	font-size: 4.4rem;
	font-weight: bold;
	margin-bottom: 20px;
	text-shadow: 0 0 8px #fff;
	font-family: 'Hind Siliguri', sans-serif;
}

.top__mv--txt p {
	display: none;
	font-size: 0.775rem;
	text-shadow: 0 0 8px #fff;
	font-family: 'Noto Sans JP', sans-serif;
}

.top__mv--txt p span {
	position: relative;
}

.top__mv--txt p span::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -80px;
	transform: translateY(-50%);
	display: block;
	width: 75px;
	height: 1px;
	background: #232323;
}

.top-bg {
	position: relative;
}

.top-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 100%;
	max-width: 1000px;
	height: 100%;
	background: url(../images/content/top/top_bg.png);
	background-size: cover;
}

.mv-scroll {
	box-sizing: border-box;
	position: absolute;
	right: 50px;
	bottom: 160px;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 0.9rem;
	transform: rotate(-90deg);
	transform-origin: bottom right;
	font-family: 'Noto Sans JP', sans-serif;
	z-index: 1;
}

.mv-scroll p {
	color: #232323;
}

.scroll-line {
	position: absolute;
	left: 100%;
	top: 48%;
	transform: translateY(-50%);
}

.line-right::before {
	content: "";
	top: 50%;
	right: 75px;
	width: 50px;
	border-bottom: 1px solid #cbcbcb;
	transform: translateY(-50%);
}

/*========================================
  ABOUT
========================================*/
.about {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0;
}

/* .about::before {
	content: "";
	position: absolute;
	top: 180px;
	right: -30px;
	display: block;
	width: 500px;
	height: 400px;
	background: url(../images/content/top/half_circle.png);
	background-repeat: no-repeat;
	background-size: cover;
} */
.about::after {
	content: "";
	position: absolute;
	bottom: -160px;
	left: 0;
	display: block;
	width: 100px;
	height: 300px;
	background: url(../images/content/top/pattern.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.about_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1000px;
	margin: 30px auto 0;
	padding-bottom: 200px;
}

.about h1 {
	margin-top: 136px;
	margin-bottom: 27px;
	font-size: 78px;
	font-weight: bold;
	font-family: 'Hind Siliguri';
}

.about p:first-of-type {
	font-size: 1.125rem;
	font-weight: bold;
	margin-bottom: 44px;
	line-height: 30px;
	font-family: 'Noto Sans JP', sans-serif;
}

.about p:nth-of-type(2) {
	line-height: 30px;
	font-family: 'Noto Sans JP', sans-serif;
}

.about p:nth-of-type(3) {
	margin-bottom: 49px;
	text-align: justify;
	line-height: 30px;
	font-family: 'Noto Sans JP', sans-serif;
}

.about p:last-of-type {
	font-size: 1.125rem;
}

.about-img {
	position: relative;
	display: inline-block;
	margin-left: 70px;
	/*transform: translateY(-50px);*/
	width: 440px;
}

.about-img img {}


.about-inner {
	width: 100%;
	max-width: 530px;
}

.about-inner-link {
	display: inline-block;
	color: #232323;
	font-family: 'Hind Siliguri', sans-serif;
	z-index: 1;
	position: relative;
}

.about-inner p:last-of-type {
	height: 30px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	transition: all .5s;
}

.about-inner-link::after {
	content: "";
	width: 7px;
	height: 18px;
	box-shadow: 2px -2px 0 #fff;
	/*border-top: solid 2px #474747;*/
	border-right: solid 2px #474747;
	transform: translateY(-50%) rotate(45deg) skewX(-45deg);
	display: block;
	position: absolute;
	transition: all .3s;
	top: 50%;
	right: -25px;
}

.about-positon {
	flex-flow: row-reverse;
	position: relative;
}

.about-title {
	position: absolute;
	top: 0;
	left: 0;
}

.about-inner-top {
	margin-top: 160px;
}

@media (max-width: 959px) {
	.about-positon {
		padding-bottom: 80px !important;
		flex-flow: row-reverse;
		position: relative;
	}

	.about-title {
		top: 0;
		left: 20px;
	}
}

@media (max-width: 767px) {
	.about-positon {
		padding-bottom: 20px !important;
		flex-flow: row-reverse;
		position: relative;
	}

	.about-title {
		position: relative;
		top: 0;
		left: 20px;
	}

	.about-title h1 {
		padding-top: 40px !important;
	}

	.about-inner-top {
		margin-top: 160px;
		position: relative;
		z-index: 1;
	}

	.about-inner-link::after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}
}

.about-inner-link:hover {}

.about-inner-link:hover::after {
	content: "";
	width: 7px;
	height: 28px;
	box-shadow: 2px -2px 0 #fff;
	border-top: solid 2px #474747;
	border-right: solid 2px #474747;
	transform: translateY(-50%) rotate(45deg) skewX(-45deg);
	display: block;
	position: absolute;
	transition: all .3s;
	top: 50%;
	right: -45px;
}

/*
.about-inner-link::after {
	width: 50px;
	margin-left: 15px;
	border-top: 1px solid;
  transition: all .5s;
}

.about-inner-link:hover {
	padding: 0 20px;
  font-size: 1.75rem;
  font-weight: 700;
}
.about-inner-link:hover::after {
  content: '';
	width: 104px;
  height: 36px;
  margin: 0;
  border: 1px solid #000;
  background: rgba(0,0,0,0);
  position: absolute;
  top: -5px;
  left: 0;
  z-index: -1;
}
*/






/* 
.line path {
	fill-opacity: 0;
	stroke-opacity: 1;
	stroke: #F7A800;
	fill: #F7A800;
	stroke-width: 1;
	stroke-miterlimit: 10;
	transition: fill-opacity 1s, stroke-opacity .5s;
} */

/*========================================
service
========================================*/
.service {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.service-wrapper {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

/* .service::before {
	content: "";
	position: absolute;
	top: -80px;
    left: 0px;
	display: block;
	width: 420px;
	height: 520px;
	background: url(../images/content/top/half_triangle.png);
	background-repeat: no-repeat;
	background-size: cover;
} */
/* .service::after {
	content: "";
    position: absolute;
    top: 530px;
    right: 0px;
    display: block;
    width: 100px;
    height: 300px;
    background: url(../images/content/top/pattern.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
} */
.slope-anime {
	transition: .7s;
}

.service-inner h1 {
	font-weight: bold;
	font-size: 4.875rem;
	margin-bottom: 20px;
	font-family: 'Hind Siliguri', sans-serif;
}

.service-inner-sub-ttl {
	font-weight: bold;
}

.service-inner p:first-of-type {
	font-size: 1rem;
	font-family: 'Noto Sans JP', sans-serif;
}

.service-inner img {
	/*	height: 535px;
	width: 480px;
	box-shadow: 0 0 12px grey;
    border-radius: 10px;*/
}

.box-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


/*========================================
design-box
========================================*/

.design-box {
	margin-top: 68px;
	display: inline-block;
	position: relative;
	margin-bottom: 30px;
	transform-style: preserve-3d;
	transform: perspective(400px) rotateX(0) rotateY(0);
}

.content-box:hover .design-box {
	transform: perspective(400px) rotateX(-2deg) rotateY(-2deg);
	transform-style: preserve-3d;
}

.design-box h2 {
	font-size: 3rem;
	position: absolute;
	top: 43px;
	left: 25px;
	font-weight: bold;
	font-family: 'Hind Siliguri', sans-serif;
}

.design-box h3 {
	font-size: 0.875rem;
	position: absolute;
	top: 145px;
	left: 25px;
	font-family: 'Noto Sans JP', sans-serif;
}

.design-box p:first-of-type {
	position: absolute;
	top: 40px;
	left: 225px;
	width: 100%;
	max-width: 240px;
	font-family: 'Noto Sans JP', sans-serif;
}

.design-box p:last-of-type {
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	position: absolute;
	top: 490px;
	left: 25px;
	font-weight: bold;
	font-family: 'Hind Siliguri', sans-serif;
}

.design-box p:last-of-type:after {
	/*border-top: 1px solid;
	content:"";
	width: 50px;
	margin-left: 15px;*/
}




/*========================================
system-box
========================================*/

.system-box {
	display: inline-block;
	position: relative;
	margin-bottom: 30px;
	transform: translateY(-170px) perspective(400px) rotateX(0) rotateY(0);
}

.content-box:hover .system-box {
	transform: translateY(-170px) perspective(400px) rotateX(-2deg) rotateY(-2deg);
	transform-style: preserve-3d;
}

.system-box h2 {
	font-size: 3rem;
	position: absolute;
	top: 43px;
	left: 25px;
	font-weight: bold;
	font-family: 'Hind Siliguri', sans-serif;
}

.system-box h3 {
	font-size: 0.875rem;
	position: absolute;
	top: 145px;
	left: 25px;
	font-family: 'Noto Sans JP', sans-serif;
}

.system-box p:first-of-type {
	position: absolute;
	top: 215px;
	left: 25px;
	width: 100%;
	max-width: 170px;
	font-family: 'Noto Sans JP', sans-serif;
}

.system-box p:last-of-type {
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	position: absolute;
	top: 490px;
	left: 25px;
	font-weight: bold;
	font-family: 'Hind Siliguri', sans-serif;
}

.system-box p:last-of-type:after {
	/*border-top: 1px solid;
	content:"";
	width: 50px;
	margin-left: 15px;*/
}

/*========================================
promotion-box
========================================*/

.promotion-box {
	display: inline-block;
	position: relative;
	margin-bottom: 145px;
	transform: perspective(400px) rotateX(0) rotateY(0);
}

.promotion-box::before {
	content: "";
	position: absolute;
	top: 0;
	right: -80px;
	display: block;
	width: 100px;
	height: 300px;
	background: url(../images/content/top/pattern.png);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1;
}

.content-box:hover .promotion-box {
	transform: perspective(400px) rotateX(-2deg) rotateY(-2deg);
	transform-style: preserve-3d;
}

.promotion-box h2 {
	font-size: 3rem;
	position: absolute;
	top: 43px;
	left: 25px;
	font-weight: bold;
	font-family: 'Hind Siliguri', sans-serif;
}

.promotion-box h3 {
	font-size: 0.875rem;
	position: absolute;
	top: 95px;
	left: 25px;
	font-family: 'Noto Sans JP', sans-serif;
}

.promotion-box p:first-of-type {
	position: absolute;
	top: 145px;
	left: 25px;
	width: 100%;
	max-width: 360px;
	font-family: 'Noto Sans JP', sans-serif;
}

.promotion-box p:last-of-type {
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	position: absolute;
	top: 490px;
	left: 25px;
	font-weight: bold;
	font-family: 'Hind Siliguri', sans-serif;
}

.promotion-box p:last-of-type:after {
	/*border-top: 1px solid;
	content:"";
	width: 50px;
	margin-left: 15px;*/
}








/*========================================
company-service-box
========================================*/
.company-service-box {
	display: inline-block;
	position: relative;
	transform: translateY(-220px) perspective(400px) rotateX(0) rotateY(0);
}

.content-box:hover .company-service-box {
	transform: translateY(-220px) perspective(400px) rotateX(-2deg) rotateY(-2deg);
	transform-style: preserve-3d;
}

.company-service-box h2 {
	font-size: 3rem;
	position: absolute;
	top: 43px;
	left: 25px;
	font-weight: bold;
	font-family: 'Hind Siliguri', sans-serif;
}

.company-service-box h3 {
	font-size: 0.875rem;
	position: absolute;
	top: 145px;
	left: 25px;
	font-family: 'Hind Siliguri';
}

.company-service-box p:first-of-type {
	position: absolute;
	top: 40px;
	right: 10px;
	width: 100%;
	max-width: 200px;
	font-family: 'Noto Sans JP', sans-serif;
}

.company-service-box p:last-of-type {
	font-size: 1.125rem;
	display: flex;
	align-items: center;
	position: absolute;
	top: 490px;
	left: 25px;
	font-weight: bold;
	font-family: 'Hind Siliguri', sans-serif;
}

.company-service-box p:last-of-type:after {
	/*border-top: 1px solid;
	content:"";
	width: 50px;
	margin-left: 15px;*/
}



/*========================================
add more hover
========================================*/
.design-box p:last-of-type,
.system-box p:last-of-type,
.promotion-box p:last-of-type,
.company-service-box p:last-of-type {
	transition: all .5s;
}

.design-box p:last-of-type:after,
.system-box p:last-of-type:after,
.promotion-box p:last-of-type:after,
.company-service-box p:last-of-type:after {
	content: "";
	width: 7px;
	height: 18px;
	/*border-top: solid 2px #474747;*/
	border-right: solid 2px #474747;
	transform: translateY(-50%) rotate(45deg) skewX(-45deg);
	display: block;
	position: absolute;
	transition: all .3s;
	top: 50%;
	right: -25px;
}

.design-box a:hover p:last-of-type,
.system-box a:hover p:last-of-type,
.promotion-box a:hover p:last-of-type,
.company-service-box a:hover p:last-of-type {
	/*padding: 0 20px;
  font-size: 1.75rem;
  font-weight: 700;*/
}

.design-box a:hover p:last-of-type:after,
.system-box a:hover p:last-of-type:after,
.promotion-box a:hover p:last-of-type:after,
.company-service-box a:hover p:last-of-type:after {
	content: "";
	width: 7px;
	height: 28px;
	border-top: solid 2px #474747;
	border-right: solid 2px #474747;
	transform: translateY(-50%) rotate(45deg) skewX(-45deg);
	display: block;
	position: absolute;
	transition: all .3s;
	top: 50%;
	right: -45px;
}


@media (max-width: 959px) {
	.top__mv-content {
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		position: relative;
	}

	.top__mv--txt {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
	}

	.top__mv--txt h1 {
		font-size: 4rem;
	}

	.about::before {
		right: 0;
		width: 400px;
		height: 320px;
	}

	.about::after {
		left: -70px;
	}

	.about_wrapper {
		position: relative;
		justify-content: space-around;
		padding-bottom: 20px;
	}

	.about-inner {
		max-width: 340px;
	}

	.about h1 {
		margin: 0;
		padding-top: 90px;
		padding-bottom: 0;
		font-size: 58px;
		font-weight: bold;
		width: 300px;
	}

	.about p:first-of-type {
		margin: 0;
		font-size: 0.875rem;
		font-weight: bold;
		padding-bottom: 30px;
		line-height: 30px;
	}

	.about p:nth-of-type(2) {
		margin: 0;
		font-size: 0.875rem;
		line-height: 30px;
	}

	.about p:nth-of-type(3) {
		margin: 0;
		font-size: 0.875rem;
		padding-bottom: 20px;
		text-align: justify;
		line-height: 30px;
	}

	.about p:last-of-type {
		width: auto;
	}

	.about p:last-of-type {
		font-weight: bold;
	}

	.about-img {
		display: inline-block;
		transform: translateY(-50px);
		margin-left: 0;
		width: 280px;
		height: 200px;
	}

	.about-img img:first-of-type {
		width: 190px;
		height: 256px;
		margin: 0;
	}

	.about-img img:last-of-type {
		width: 166px;
		height: 186px;
		position: absolute;
		top: 0px;
		left: 110px;
	}


	.service-inner h1 {
		font-size: 58px;
		margin: 0;
		padding-bottom: 20px;
	}

	.service-inner p:first-of-type {
		font-size: 0.875rem;
		width: 300px;
	}

	/*========================================
service-inner
========================================*/
	.service-inner {
		display: block;
		width: 90%;
		margin: 0 auto;
		padding-left: 0px;
	}

	.service-inner img {}

	.service::after {
		top: 0px;
	}

	/*========================================
design-box
========================================*/
	.design-box {
		margin-top: 39px;
		display: inline-block;
		transform: translate(0)
	}

	.design-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 26px;
		left: 20px;
		font-weight: bold;
	}

	.design-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 100px;
		left: 20px;
	}

	.design-box p:first-of-type {
		width: 170px;
		font-size: 0.875rem;
		position: absolute;
		top: 20px;
		left: 150px;
	}

	.design-box p:last-of-type {
		top: 350px;
	}

	.design-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

	.content-box:hover .design-box {
		transform: perspective(400px) rotateX(0deg) rotateY(0deg);
		transform-style: preserve-3d;
	}

	/*========================================
system-development
========================================*/
	.system-box {
		position: relative;
		margin: 0;
		transform: translateY(-190px)
	}

	.system-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 25px;
		left: 20px;
		font-weight: bold;
	}

	.system-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 103px;
		left: 20px;
	}

	.system-box p:first-of-type {
		width: 138px;
		font-size: 0.875rem;
		position: absolute;
		top: 145px;
		left: 20px;
	}

	.system-box p:last-of-type {
		top: 350px;
	}

	.system-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

	.content-box:hover .system-box {
		transform: translateY(0) perspective(400px) rotateX(0deg) rotateY(0deg);
		transform-style: preserve-3d;
	}

	/*========================================
  promotion
========================================*/

	.promotion-box {
		position: relative;
		margin-bottom: 37px;
		transform: translate(0)
	}

	.promotion-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 25px;
		left: 20px;
		font-weight: bold;
	}

	.promotion-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 63px;
		left: 20px;
	}

	.promotion-box p:first-of-type {
		font-size: 0.875rem;
		position: absolute;
		top: 90px;
		left: 20px;
	}

	.promotion-box p:last-of-type {
		top: 350px;
	}

	.promotion-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

	.content-box:hover .promotion-box {
		transform: perspective(400px) rotateX(0deg) rotateY(0deg);
		transform-style: preserve-3d;
	}

	/*========================================
  compony-box
========================================*/
	.company-service-box {
		display: inline-block;
		transform: translateY(-220px);
		margin-bottom: 76px;
	}

	.company-service-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 26px;
		left: 20px;
		font-weight: bold;
	}

	.company-service-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 100px;
		left: 20px;
	}

	.company-service-box p:first-of-type {
		width: 130px;
		font-size: 0.875rem;
		position: absolute;
		top: 27px;
		left: 190px;
	}

	.company-service-box p:last-of-type {
		top: 350px;
	}

	.company-service-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

	.content-box:hover .company-service-box {
		transform: translateY(0) perspective(400px) rotateX(0deg) rotateY(0deg);
		transform-style: preserve-3d;
	}

}

@media (max-width: 767px) {
	.top__mv-content {
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		position: relative;
	}

	.top__mv--txt {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.top__mv--txt h1 {
		font-size: 48px;
	}

	.top__mv--txt p {
		font-size: 10px;
	}

	.top-bg::before {
		left: 0;
		transform: translateX(0);
		background-size: contain;
	}

	/*========================================
ABOUT
========================================*/
	.about_wrapper {
		display: block;
	}

	.about::before {
		top: unset;
		bottom: 0;
		right: 0;
		width: 270px;
		height: 240px;
	}

	.about::after {
		bottom: 50px;
	}

	.about-inner {
		width: 100%;
		max-width: 335px;
		display: block;
		margin: 0 auto;
	}

	.about h1 {
		font-size: 3.375rem;
	}

	.about-img {
		width: 275px;
		height: 140px;
		display: block;
		padding-top: 100px;
		padding-left: 0;
		margin: 0 auto;
	}

	.about-img-sp {
		position: relative;
	}

	.about-img img:first-of-type {
		width: 190px;
		height: 256px;
		margin: 0;
	}

	.about-img img:last-of-type {
		width: 250px;
		height: auto;
		position: absolute;
		top: 10px;
		left: 10px;
	}

	/*========================================
  service
========================================*/
	.service {
		margin-bottom: 0;
	}

	/*========================================
  service-inner
========================================*/
	.service-inner {
		width: 335px;
		margin-top: 120px;
	}

	.service-inner-ttl {
		width: 100%;
		max-width: 335px;
		margin: 0 auto;
	}

	.service-inner .service-inner-ttl:first-child p {
		padding-left: 0;
	}

	.service-inner h1 {
		font-size: 3.375rem;
	}

	.service-inner p:first-of-type {
		font-size: 0.875rem;
	}

	.service-inner img {
		width: 100%;
		height: auto;
	}

	.service::before {
		top: -10px;
		left: 0px;
		width: 250px;
		height: 310px;
	}

	.service::after {
		top: 200px;
		right: 0px;
	}

	/*========================================
  design-box
========================================*/

	.design-box {
		display: block;
		transform: translate(0)
	}

	.design-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 26px;
		left: 20px;
		font-weight: bold;
	}

	.design-box p:first-of-type {
		width: 170px;
		font-size: 0.875rem;
		position: absolute;
		top: 20px;
		left: 150px;
	}

	.design-box p:last-of-type {
		top: 380px;
	}

	.design-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

	/*========================================
  system-development
========================================*/
	.system-box {
		display: block;
		position: relative;
		margin-bottom: 37px;
		transform: translate(0);
		padding-bottom: 0;
	}

	.system-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 25px;
		left: 20px;
		font-weight: bold;
	}

	.system-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 103px;
		left: 20px;
	}

	.system-box p:first-of-type {
		width: 138px;
		font-size: 0.875rem;
		position: absolute;
		top: 145px;
		left: 20px;
	}

	.system-box p:last-of-type {
		top: 380px;
	}

	.system-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

	/*========================================
	promotion
	========================================*/

	.promotion-box {
		display: block;
		position: relative;
		margin-bottom: 37px;
		transform: translate(0)
	}

	.promotion-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 25px;
		left: 20px;
		font-weight: bold;
	}

	.promotion-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 63px;
		left: 20px;
	}

	.promotion-box p:first-of-type {
		font-size: 0.875rem;
		position: absolute;
		top: 90px;
		left: 20px;
	}

	.promotion-box p:last-of-type {
		top: 380px;
	}

	.promotion-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

	.promotion-box::before {
		top: 140px;
		right: 50%;
		transform: translateX(50%);
	}

	/*========================================
  compony-box
========================================*/

	.company-service-box {
		display: block;
		transform: translate(0);
		margin-bottom: 76px;
	}

	.company-service-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 26px;
		left: 20px;
		font-weight: bold;
	}

	.company-service-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 100px;
		left: 20px;
	}

	.company-service-box p:first-of-type {
		width: 130px;
		font-size: 0.875rem;
		position: absolute;
		top: 27px;
		left: 190px;
	}

	.company-service-box p:last-of-type {
		top: 380px;
	}

	.company-service-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

}

@media (max-width: 374px) {
	.service-inner img {
		width: 95%;
	}

	.content-box {
		width: 90%;
		margin: 0 auto;
	}

	.about-inner {
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	.about h1 {
		font-size: 40px;
	}

	.about {
		margin: 0 auto;
	}

	.about::after {
		left: -80px;
	}

	.about-img {
		display: block;
		padding-left: 0;
		width: 275px;
		padding-top: 100px;
		margin: 0 auto;
	}

	/*========================================
  service-inner
========================================*/

	.service-inner {
		padding-left: 0;
		margin: 0 auto;
	}

	.service-inner h1 {
		margin-bottom: 0;
		padding-bottom: 10px;
		font-size: 40px;
	}

	.service-inner p:first-of-type {
		padding-left: 20px;
		font-size: 0.875rem;
		padding-bottom: 37px;
	}

	.service-inner-ttl {
		width: 90%;
	}

	/*========================================
  design-box
========================================*/

	.design-box {
		margin-right: 0;
		margin-bottom: 0;
		margin-top: 0px;
		display: block;
		transform: translate(0);
		padding-bottom: 36px;
	}

	.design-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 26px;
		left: 20px;
		font-weight: bold;
	}

	.design-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 100px;
		left: 20px;
		font-weight: bold;
	}

	.design-box p:first-of-type {
		position: absolute;
		top: 27px;
		left: 110px;
		width: 150px;
		font-size: 0.7rem;
	}

	.design-box p:last-of-type {
		top: 380px;
	}

	.design-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

	/*========================================
	system-development
	========================================*/
	.system-box {
		margin-right: 0;
		margin-bottom: 0;
		margin-top: 0px;
		display: block;
		transform: translate(0);
		padding-bottom: 36px;
	}

	.system-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 25px;
		left: 20px;
		font-weight: bold;
	}

	.system-box p:first-of-type {
		width: 105px;
		font-size: 0.7rem;
		position: absolute;
		top: 145px;
		left: 20px;
		padding: 0;
	}

	.system-box p:last-of-type {
		top: 380px;
	}

	.system-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}






	/*========================================
  promotion
========================================*/

	.promotion-box {
		margin-right: 0;
		margin-bottom: 0;
		margin-top: 0px;
		display: block;
		transform: translate(0);
		padding-bottom: 36px;
	}

	.promotion-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 25px;
		left: 20px;
		font-weight: bold;
	}

	.promotion-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 63px;
		left: 20px;
	}

	.promotion-box p:first-of-type {
		padding: 0;
		font-size: 0.7rem;
		position: absolute;
		top: 85px;
		left: 20px;
		width: 270px;
	}

	.promotion-box p:last-of-type {
		top: 380px;
	}

	.promotion-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}






	/*========================================
  compony-box
========================================*/

	.company-service-box {
		margin-right: 0;
		margin-bottom: 0;
		margin-top: 0px;
		display: block;
		transform: translate(0);
		padding-bottom: 80px;
	}

	.company-service-box h2 {
		font-size: 2rem;
		position: absolute;
		top: 26px;
		left: 20px;
		font-weight: bold;
	}

	.company-service-box h3 {
		font-size: 0.875rem;
		position: absolute;
		top: 100px;
		left: 20px;
	}

	.company-service-box p:first-of-type {
		font-size: 0.7rem;
		position: absolute;
		top: 27px;
		left: 155px;
		width: 100px;
	}

	.company-service-box p:last-of-type {
		top: 380px;
	}

	.company-service-box p:last-of-type:after {
		border-top: 1px solid;
		content: "";
		width: 10px;
		margin-left: 15px;
	}

}

/*========================================
contact
========================================*/
.contact__ar {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.contact__ar-left {
	width: calc(100% - 540px);
}

.contact__ar--right {
	width: 100%;
	max-width: 540px;
}

/* .mockup {
	position: relative;
	width: 100%;
	max-width: 220px;
	margin-bottom: 40px;
	z-index: 100;
} */
.mockup {
	position: relative;
	width: 100%;
	max-width: 220px;
	margin-bottom: 40px;
	z-index: 5;
}

/* .pin_logo {
	position: relative;
	transform: translateX(-50px);
	width: 100%;
	max-width: 205px;
	z-index: 100;
} */
.pin_logo {
	position: relative;
	transform: translateX(-50px);
	width: 100%;
	max-width: 205px;
	z-index: 5;
}

.contact__ar-left #canvas {
	position: absolute;
	top: 290px;
	left: -370px;
	width: 700px;
	height: 380px;
}

.contact__ar--right--text h2 {
	transform: translateX(-20px);
	margin-top: 30px;
	font-size: 8.25rem;
	font-weight: bold;
	font-family: 'Hind Siliguri';
}

.contact__ar--right--text {
	margin-bottom: 40px;
}

.contact__ar--right--text h3 {
	font-weight: bold;
	font-size: 0.875rem;
	margin: 0 0 40px 0;
	line-height: 1.8;
}

.contact__ar--right--text p {
	margin: 0 0 40px 0;
	line-height: 1.8;
}

.contact__ar--right dl {
	margin-bottom: 30px;
}

.contact__ar--right dl:last-of-type {
	margin-bottom: 40px;
}

.contact__ar--right dt {
	padding-left: 7px;
	font-weight: bold;
	transition: .3s;
	transform-origin: left;
	line-height: 1.5;
}

.contact__ar--right dd {
	position: relative;
}

.contact__ar--right dd>input[type=text],
.contact__ar--right dd>input[type=tel],
.contact__ar--right dd>input[type=email],
.contact__ar--right dd>textarea {
	position: relative;
	border-bottom: 1px solid #ccc;
	line-height: 1.5;
}

.contact__ar--right dd>input[type=text]:focus,
.contact__ar--right dd>input[type=tel]:focus,
.contact__ar--right dd>input[type=email]:focus,
.contact__ar--right dd>textarea:focus {
	border-bottom: 1px solid #00adce;
}


.contact .contact__ar--right dt {
	transform: translateY(20px);
}

.contact .contact__ar--right dt.active {
	transform: translateY(0) scale(0.8);
	color: #00adce;
}

.contact .contact__ar--right dt.active-2 {
	transform: translateY(0) scale(0.8);
}

.error--text {
	position: absolute;
	bottom: -20px;
	font-size: 0.75rem;
	color: #ff7449;
}

.contact__ar--right .personal-info-text {
	height: 170px;
	margin-bottom: 40px;
	padding: 20px 15px 20px 15px;
	border: 1px solid #cccccc;
	border-radius: 5px;
	line-height: 1.8;
	overflow: scroll;
}

.personal-info-text .indent-flont {
	margin-left: 1rem;
}

.contact-check-box {
	margin-bottom: 50px;
}

.contact__ar--right .submit-ar {
	margin-bottom: 70px;
}

.submit-ar input {
	font-size: 1.125rem;
	color: #00adce;
}

.contact__ar--right .submit-ar .sbumit-on {
	display: none;
}

.sbumit-on .base-btn {
	display: block;
	cursor: pointer;
}

.sbumit-on .base-btn input {
	color: #ffffff;
}

.sbumit-on .base-btn:hover input {
	color: #00adce;
}

.sbumit-on .base-btn,
.sbumit-off .base-btn {
	max-width: 160px;
	padding: 10px 0;
	font-family: 'Hind Siliguri';
}

.sbumit-off .base-btn {
	box-sizing: border-box;
	display: block;
	margin-right: 30px;
	border: 1px solid #00adce;
	border-radius: 30px;
	background-color: #ffffff;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	font-family: 'Hind Siliguri';
}

.confirm dl dt {
	margin-bottom: 20px;
	font-weight: normal;
	color: #cbcbcb;
	font-size: 0.875rem;
}

.confirm dl dd {
	padding: 0 0 15px 7px;
	border-bottom: 1px solid #cbcbcb;
	line-height: 2;
	font-weight: bold;
}

.confirm .submit-ar .sbumit-on {
	display: block;
}

.thanks .contact__ar--right--text p:first-of-type {
	margin-bottom: 30px;
	font-size: 1.125rem;
	font-weight: bold;
}

.thanks .base-btn {
	max-width: 160px;
	font-family: 'Hind Siliguri';
}

.thanks .contact__ar--right--text {
	margin-bottom: 70px;
}

.thanks .contact__ar--right {
	margin-bottom: 160px;
}

.contact__ar--right h3 {
	font-family: 'Noto Sans JP', sans-serif;
}

.contact__ar--right p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
}

@media (max-width: 959px) {
	.contact__ar {
		display: block;
	}

	.contact__ar-left--img-wrapper {
		display: flex;
		justify-content: space-between;
		width: 70%;
		margin: 0 auto;
	}

	.contact__ar-left {
		width: auto;
	}

	.contact__ar-left #canvas {
		top: 240px;
		left: -250px;
	}

	.pin_logo {
		transform: translateX(0);
		max-width: 125px;
		margin-top: 70px;
	}

	.contact__ar--right {
		width: 90%;
		max-width: none;
		margin: 0 auto;
	}

	.contact__ar--right--text h2 {
		transform: translateX(0);
	}

	.sbumit-on .base-btn,
	.sbumit-off .base-btn {
		margin: 0 auto;
	}

	.thanks .base-btn {
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	.contact__ar--right--text h2 {
		font-size: 4.25rem;
	}

	.contact__ar-left #canvas {
		top: 70px;
		left: -160px;
		width: 400px;
	}

	.mockup {
		max-width: 130px;
	}

	.pin_logo {
		max-width: 60px;
		margin-top: 70px;
	}

	.sbumit-on .base-btn,
	.sbumit-off .base-btn {
		max-width: none;
	}

	.contact__ar--right dl:last-of-type {
		margin-bottom: 50px;
	}

	.contact-check-box {
		margin-bottom: 60px;
	}

	.contact__ar--right .submit-ar {
		margin-bottom: 80px;
	}

	.confirm .contact__ar--right dl:last-of-type {
		margin-bottom: 60px;
	}

	.thanks .contact__ar--right {
		margin-bottom: 70px;
	}

	.thanks .base-btn {
		max-width: none;
	}
}

@media (max-width: 374px) {
	.ck-box {
		font-size: 0.8rem;
	}

	.contact__ar-left #canvas {
		width: 370px;
	}
}


/*========================================
ページ別
========================================*/


@media (max-width: 959px) {}

@media (max-width: 767px) {}

@media (max-width: 374px) {}

/*========================================
ページ別
========================================*/


@media (max-width: 959px) {}

@media (max-width: 767px) {}

@media (max-width: 374px) {}


/*========================================
ページ別
========================================*/


@media (max-width: 959px) {}

@media (max-width: 767px) {}

@media (max-width: 374px) {}




/*========================================
top contents
========================================*/
.about-image-shadow {
	width: 70%;
	margin: 0 auto 0 20%;
}

.service-item-type-01,
.service-item-type-02,
.service-item-type-03,
.service-item-type-04 {
	width: 480px;
	height: 535px;
	border-radius: 12px;
	box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .4);
	overflow: hidden;
	position: relative;
}

.service-item-type-01::after,
.service-item-type-02::after,
.service-item-type-03::after,
.service-item-type-04::after {
	content: '';
	width: 480px;
	height: 480px;
	border-radius: 70px;
	position: absolute;
	z-index: 1;
}

.service-item-type-01 {
	background: #ffa73e;
}

.service-item-type-01::after {
	background: #f9e43f;
	top: 50%;
	left: 24%;
}

.service-item-type-02 {
	background: #00adce;
}

.service-item-type-02::after {
	background: #a9d251;
	top: 50%;
	right: 24%;
}

.service-item-type-03 {
	background: #a9d251;
}

.service-item-type-03::after {
	background: #00adce;
	bottom: 50%;
	left: 24%;
}

.service-item-type-04 {
	background: #f9e43f;
}

.service-item-type-04::after {
	background: #fdbf3e;
	bottom: 50%;
	right: 24%;
}

.service-item-in {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

.service-item-in h2,
.service-item-in h3,
.service-item-in p {
	color: #232323;
}

.service-item-image-01 {
	width: 480px;
	height: 250px;
	position: absolute;
	bottom: 40px;
	right: -40px;
}

.service-item-image-01 .s-i-image-01-1 {
	width: 250px;
	position: absolute;
	bottom: 0;
	right: -10px;
	z-index: 1;
}

.service-item-image-01 .s-i-image-01-2 {
	width: 250px;
	position: absolute;
	top: -23px;
	right: -14px;
	z-index: 2;
}

.service-item-image-01 .s-i-image-01-3 {
	width: 250px;
	position: absolute;
	top: -20px;
	right: 130px;
	z-index: 3;
}

.service-item-image-01 .s-i-image-01-4 {
	width: 250px;
	position: absolute;
	top: -22px;
	left: 0;
	z-index: 4;
}

.service-item-image-02 {
	width: 480px;
	height: 250px;
	position: absolute;
	bottom: 40px;
	right: -40px;
}

.service-item-image-02 .s-i-image-02-1 {
	width: 480px;
	position: absolute;
	top: -50px;
	right: -110px;
	z-index: 1;
}

.service-item-image-02 .s-i-image-02-2 {
	width: 70px;
	position: absolute;
	top: 40px;
	right: 200px;
	z-index: 2;
}

.service-item-image-03 {
	width: 480px;
	height: 250px;
	position: absolute;
	bottom: 40px;
	right: -40px;
}

.service-item-image-03 .s-i-image-03-1 {
	width: 480px;
	position: absolute;
	top: -20px;
	right: -100px;
	z-index: 1;
}

.service-item-image-03 .s-i-image-03-2 {
	width: 210px;
	transform: rotateZ(-17deg);
	position: absolute;
	top: 40px;
	right: 110px;
	z-index: 2;
}

.service-item-image-04 {
	width: 480px;
	height: 250px;
	position: absolute;
	bottom: 40px;
	right: -40px;
}

.service-item-image-04 .s-i-image-04-1 {
	width: 360px;
	position: absolute;
	top: -10px;
	right: 50px;
	z-index: 1;
}

.service-item-image-04 .s-i-image-04-2 {
	width: 540px;
	position: absolute;
	top: -20px;
	left: 0;
	z-index: 2;
}

@media (max-width: 767px) {
	.box-wrapper {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.service-item-type-01,
	.service-item-type-02,
	.service-item-type-03,
	.service-item-type-04 {
		width: 335px;
		height: 420px;
	}

	.service-item-image-01 {
		position: absolute;
		bottom: 0px;
		right: -110px;
		transform: scale(.7);
	}

	.service-item-image-02 {
		position: absolute;
		bottom: -30px;
		right: -120px;
		transform: scale(.7);
	}

	.service-item-image-03 {
		position: absolute;
		bottom: -10px;
		right: -110px;
		transform: scale(.7);
	}

	.service-item-image-04 {
		position: absolute;
		bottom: 20px;
		right: -70px;
		transform: scale(.7);
	}
}

@media screen and (min-width: 768px) and (max-width: 1020px) {
	.box-wrapper {
		width: 668px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.service-item-type-01,
	.service-item-type-02,
	.service-item-type-03,
	.service-item-type-04 {
		width: 315px;
		height: 390px;
	}

	.service-item-image-01 {
		position: absolute;
		bottom: 0px;
		right: -110px;
		transform: scale(.6);
	}

	.service-item-image-02 {
		position: absolute;
		bottom: -30px;
		right: -120px;
		transform: scale(.6);
	}

	.service-item-image-03 {
		position: absolute;
		bottom: -30px;
		right: -110px;
		transform: scale(.6);
	}

	.service-item-image-04 {
		position: absolute;
		bottom: 20px;
		right: -70px;
		transform: scale(.6);
	}
}


/*========================================
   company page
========================================*/

.company_wide-wrapper {
	width: 100%;
	max-width: 3000px;
	margin: 0 auto;
	position: relative;
}

.company_main-wrapper {
	max-width: 1024px;
	margin: 0 auto;
	position: relative;
}



@media (max-width: 1024px) {

	.company_main-wrapper {
		width: 90%;
	}
}


/*------- company-about------- */

.company-dec01 {
	background: url(../images/content/about-company-triangle.png) no-repeat top 486px left -42px /auto 40%, url(../images/content/top/top_bg.png) repeat-y top center/43%, url(../images/content/top/pattern.png) no-repeat top 1158px left 10px /6%, url(../images/content/top/pattern.png) no-repeat bottom -220px right / 6%;
}


.company_mv_ar {
	margin-left: 10%;
	display: flex;
	justify-content: space-between;
}

.company_mv_txt_ar {
	position: relative;
	margin: 0 0 0 auto;
	z-index: 1;
}

.company-ttl_ar {
	padding-top: 230px;
	display: inline-block;
}

.company-ttl01 {
	font-size: 6.25rem;
	font-weight: bold;
	font-family: 'Hind Siliguri';
}

.company-subttl {
	margin-top: 10px;
	font-size: 1.125rem;
	font-weight: bold;
	font-family: 'Noto Sans JP';
}

.company-mv_txt {
	position: relative;
	width: 110%;
	height: 402px;
	padding: 20px;
	background: #fff;
	line-height: 1.8;
	z-index: 1;
}

.company-mv_txt p:nth-child(1)::first-letter {
	font-size: 20px;
	font-weight: bold;
}

.company-mv_txt p {
	margin-top: 40px;
	font-family: 'Noto Sans JP';
}

.company_mv_img_ar {
	position: relative;
	width: 56%;
}

.company_mv_img_ar::before {
	content: '';
	display: block;
	width: 70%;
	height: 820px;
	position: absolute;
	top: -420px;
	right: 3vw;
	background: url(../images/content/about-mv_dec.png) no-repeat center right/contain;
}

.company_mv_img_ar figure img {
	width: 100%;
	max-width: 2400px;
	height: 720px;
	object-fit: cover;
}

@media screen and (max-width: 1920px) {
	.company-dec01 {
		background: url(../images/content/about-company-triangle.png) no-repeat top 486px left -330px /auto 40%, url(../images/content/top/top_bg.png) repeat-y top center/43%, url(../images/content/top/pattern.png) no-repeat top 1158px left 10px /6%, url(../images/content/top/pattern.png) no-repeat bottom -220px right / 6%;
	}
}

@media screen and (max-width: 1400px) {
	.company-dec01 {
		background: url(../images/content/about-company-triangle.png) no-repeat top 486px left -560px /auto 40%, url(../images/content/top/top_bg.png) repeat-y top center/43%, url(../images/content/top/pattern.png) no-repeat top 1158px left 10px /6%, url(../images/content/top/pattern.png) no-repeat bottom -220px right / 6%;
	}
}

@media screen and (max-width: 1280px) {
	.company_mv_img_ar::before {
		right: 0;
	}

	.company-dec01 {
		background: url(../images/content/about-company-triangle.png) no-repeat top 806px left -124px /auto 18%, url(../images/content/top/top_bg.png) repeat-y top center/43%, url(../images/content/top/pattern.png) no-repeat top 1158px left 10px /6%, url(../images/content/top/pattern.png) no-repeat bottom -220px right / 6%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1200px) {

	.company-dec01 {
		background: url(../images/content/about-company-triangle.png) no-repeat top 36% left -97px /auto 14%, url(../images/content/top/top_bg.png) repeat top center/85%, url(../images/content/top/pattern.png) no-repeat top 51% left -52px /15%, url(../images/content/top/pattern.png) no-repeat bottom -212px right -51px / 15%;
	}

	.company_mv_ar {
		margin-left: 5%;
	}

	.company-mv_txt {
		position: relative;
		width: 112%;
		height: 402px;
		padding: 20px 50px 20px 20px;
	}

	.company_mv_img_ar {
		width: 55%;
		height: auto;
	}

	.company_mv_img_ar figure img {
		width: auto;
		height: 800px;
	}
}


@media screen and (max-width: 767px) {
	.company-dec01 {
		background: url(../images/content/about-company-triangle.png) no-repeat top 914px left -50px /auto 12%, url(../images/content/top/top_bg.png) repeat top center/88%, url(../images/content/top/pattern.png) no-repeat top 41% left -74px /15%, url(../images/content/top/pattern.png) no-repeat bottom 54vw right -71px / 15%;
	}

	.company_mv_ar {
		margin-left: 10%;
		display: flex;
		flex-direction: column-reverse;
	}

	.company-ttl_ar {
		margin-top: 0px;
		padding: 35px 40px 25px 0;
		position: absolute;
		display: inline-block;
		top: -87px;
		left: -18px;
		background: white;
		z-index: 1;
	}

	.company-ttl01 {
		position: relative;
		font-size: 5rem;
	}

	.company-mv_txt {
		width: 100%;
		height: auto;
		margin: 100px 10px 0 -5%;
		padding: 0;
		background: rgba(255, 255, 255, 0.13);
	}

	.company-mv_txt p {
		margin-top: 20px;
	}

	.company_sp_hidden {
		display: none;
	}

	.company_mv_img_ar {
		width: 100%;
	}

	.company_mv_img_ar figure img {
		width: auto;
		height: 460px;
	}
}

@media screen and (min-width: 375px) and (max-width: 767px) {

	.company-ttl01 {
		position: relative;
		font-size: 5rem;
	}
}

@media screen and (max-width: 374px) {
	.company-dec01 {
		background: url(../images/content/about-company-triangle.png) no-repeat top 37% left -32px / 74%, url(../images/content/top/top_bg.png) repeat top center/88%, url(../images/content/top/pattern.png) no-repeat top 41% left -74px /28%, url(../images/content/top/pattern.png) no-repeat bottom 173vw right -91px / 35%;
	}
}

@media screen and (max-width: 320px) {
	.company-ttl_ar {
		padding: 35px 20px 25px 0;
	}
}



/*------- company-profile------- */


.company-dec02 {
	position: absolute;
	content: '';
	width: 100%;
	height: 300px;
	top: 35px;
	right: -667px;
	background: url(../images/content/about-actangle.png) no-repeat top right /contain;
}

.company-profile_cont {
	padding-top: 236px;
}

.company-ttl02 {
	margin-bottom: 20px;
	font-size: 3.75rem;
	font-weight: bold;
	font-family: 'Hind Siliguri';
}

.company-ttl02 span {
	margin-left: .5em;
}

.company-profile_table {
	width: 865px;
	margin: 35px auto;
	padding: 40px 30px;
	background: #ffffffc9;
	font-family: 'Noto Sans JP';
}


.company-profile_tablelist {
	display: flex;
	padding: 30px 0 30px 90px;
	border-bottom: 1px solid #cbcbcb;
	line-height: 1.8;
}

.company-profile_tablelist dt {
	width: 20%;
	font-size: 1.125rem;
	font-weight: 510;
}


@media screen and (min-width: 768px) and (max-width: 1200px) {
	.company-profile_table {
		width: 80%;
	}

	.company-dec02 {
		right: -630px;
	}
}


@media screen and (max-width: 768px) {
	.company-dec02 {
		right: -400px;
	}
}


@media screen and (max-width: 767px) {

	.company-ttl02 {
		margin-bottom: 0;
		line-height: 1.3;
		font-size: 3.375rem;
	}

	.company-ttl02 span {
		display: block;
		margin-left: 0;
	}

	.company-subttl {
		font-size: 0.875rem;
	}

	.company-profile_table {
		width: 100%;
		padding: 0;
		background: rgba(255, 255, 255, 0.13);
	}

	.company-profile_tablelist {
		display: block;
		padding: 15px 0 10px 10px;
	}

	.company-profile_tablelist dt {
		width: 100%;
		font-size: 1rem;
	}

	.company-profile_tablelist dd {
		margin-top: 10px;
	}
}


@media screen and (max-width: 390px) {
	.company-dec02 {
		right: -275px;
		width: 140%;
	}
}

@media screen and (max-width: 320px) {
	.company-dec02 {
		right: -230px;
	}
}


/* -------company-access------- */

.company-pd {
	padding-bottom: 260px;
}

.company-access_cont {
	margin: 120px auto 0;
}

.company-access_inner {
	display: flex;
	justify-content: space-between;
	margin: 46px 0 0 0;
}

.company-access_unit01 {
	position: relative;
	width: 325px;
	height: 398px;
	padding: 30px 20px;
	background: #00adce;
	border-radius: 10px;
	font-size: 0.875rem;
	line-height: 1.8;
	box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, .2);
	overflow: hidden;
	transform: perspective(400px) rotateX(0deg) rotateY(0deg);
	transform-style: preserve-3d;
}

.company-access_unit01::after {
	position: absolute;
	content: '';
	width: 480px;
	height: 480px;
	border-radius: 70px;
	background: #a9d251;
	top: 203px;
	right: 65px;
	z-index: 1;
}

.company-access_unit01_inner {
	font-family: 'Noto Sans JP';
	position: absolute;
	z-index: 2;
}

.company-access_unit02 {
	width: calc(100% - 365px);
	margin: 50px 0 0 40px;
}

.company-access_unit01:hover {
	transform: perspective(400px) rotateX(-2deg) rotateY(-2deg);
	transform-style: preserve-3d;
}


.company_iframe-wrap {
	transform: perspective(400px) rotateX(0deg) rotateY(0deg);
	transform-style: preserve-3d;
}

.company_iframe-wrap:hover {
	transform: perspective(400px) rotateX(-2deg) rotateY(-2deg);
}

.company-ttl03 {
	font-size: 1.375rem;
	font-weight: bold;
}

.company-ttl03 span {
	display: block;
	font-size: 1.6875rem;
	line-height: 1.2;
}

.company-subttl02 {
	font-size: 0.875rem;
	margin: 5px 0;
}

.company-address_cont01 {
	margin: 45px 0 0 0;
}

.company-address_cont02 {
	margin: 37px 0 0 0;
}

.company-txt-id {
	padding-left: 1em;
	text-indent: -1em;
}

.company-dec03 {
	position: absolute;
	bottom: 60px;
	left: -600px;
	width: 100%;
	height: 300px;
	background: url(../images/content/about-actangle.png) no-repeat center left /contain;
}


@media screen and (min-width: 768px) and (max-width: 1200px) {
	.company-dec03 {
		left: -564px;
	}
}

@media screen and (max-width: 768px) {
	.company-dec03 {
		left: -357px;
	}
}


@media screen and (max-width: 767px) {

	.company-access_inner {
		display: block;
		margin: 30px auto 0;
	}

	.company_iframe-wrap iframe {
		height: 300px;
	}

	.company-access_unit01 {
		width: 65%;
		box-sizing: border-box;
	}

	.company-access_unit02 {
		width: 100%;
		margin: 50px 0 0 0;
	}
}

@media screen and (min-width:376px) and (max-width: 560px) {
	.company-dec01 {
		background: url(../images/content/about-company-triangle.png) no-repeat top 1030px left -32px /auto 10%, url(../images/content/top/top_bg.png) repeat top center/88%, url(../images/content/top/pattern.png) no-repeat top 41% left -74px /15%, url(../images/content/top/pattern.png) no-repeat bottom 54vw right -71px / 15%;
	}
}

@media screen and (max-width: 540px) {
	.company-access_unit01 {
		width: 100%;
	}
}

@media screen and (max-width: 390px) {
	.company-dec03 {
		width: 140%;
		left: -255px;
		bottom: 0;
	}

	.company-pd {
		padding-bottom: 200px;
	}
}

@media screen and (max-width:375px) {
	.company-dec01 {
		background: url(../images/content/about-company-triangle.png) no-repeat top 39% left -32px /auto 10%, url(../images/content/top/top_bg.png) repeat top center/88%, url(../images/content/top/pattern.png) no-repeat top 41% left -74px /15%, url(../images/content/top/pattern.png) no-repeat bottom 54vw right -71px / 15%;
	}

	.company-dec03 {
		left: -249px;
		bottom: 0;
	}
}

@media screen and (max-width: 320px) {
	.company-dec03 {
		left: -210px;
		bottom: 0;
	}
}

/*========================================
   service page
========================================*/

.service-page_content_wrap {
	padding: 60px 0 160px;
}

.service-page-dec01 {
	background: url(../images/content/top/top_bg.png) repeat-y top center/43%, url(../images/content/top/pattern.png) no-repeat top 44% left /6%, url(../images/content/top/pattern.png) no-repeat bottom 30vw right / 6%, url(../images/content/service-dec03.png) no-repeat top 76% center /9%;
}

.service-page-mv_txt {
	position: relative;
	width: 110%;
	height: 401px;
	padding: 20px;
	background: #fff;
	line-height: 2;
	z-index: 1;
}

.service-page-mv_txt p {
	margin-top: 50px;
	font-family: 'Noto Sans JP';
}

.service-page-mv_txt p:nth-child(1)::first-letter {
	font-size: 20px;
	font-weight: bold;
}

.service-page_mv_img_ar {
	width: 56%;
}

.service-page_mv_img_ar figure img {
	width: 100%;
	max-width: 2400px;
	height: 720px;
	object-fit: cover;
}


.service-page_mv_img_ar figure {
	position: relative;
}

.service-page_mv_img_ar figure::before {
	content: '';
	display: block;
	width: 70%;
	height: 820px;
	position: absolute;
	top: -420px;
	right: 3vw;
	background: url(../images/content/about-mv_dec.png) no-repeat center right/contain;
}

.service-page_mv_sp {
	display: none;
}


.service-page-cont_ar {
	padding: 100px 0;
	display: flex;
	justify-content: space-between;
}

.service-page-cont_ar02 {
	padding: 100px 0 210px;
	display: flex;
	justify-content: space-between;
}

.service-page-fd-rr {
	flex-direction: row-reverse;
}

.service-page-contents_txt_wrap {
	width: 42%;
}

.service-ttl02 {
	margin-bottom: 20px;
	font-size: 3.75rem;
	font-weight: bold;
	font-family: 'Hind Siliguri';
}

.service-ttl02 span {
	margin-left: .5em;
}

.service-page-subttl01 {
	display: inline-block;
	padding: 3px 15px;
	border-radius: 9px;
	font-size: 0.75rem;
	color: white;
	background: #00cbbb;
}

.service-page-subttl02 {
	display: inline-block;
	padding: 3px 15px;
	border-radius: 9px;
	font-size: 0.75rem;
	color: white;
	background: #ff7449;
}

.service-page_cont_txtar {
	margin-top: 40px;
}

.service-page_cont_txtar h4 {
	font-size: 1.125rem;
	font-weight: bold;
}

.service-page_cont_txtar p {
	margin-top: 40px;
	font-size: 0.875rem;
	line-height: 2;
}

.service-page_cont_img-ar {
	width: 50%;
	margin: 40px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.service-page_cont_img-ar02 {
	width: 50%;
	margin: 40px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
}

.service-page_cont_img-ar li,
.service-page_cont_img-ar02 li {
	width: calc((100% - 24px) / 3);
	height: 180px;
	padding: 15px 5px;
	border: 1px solid white;
	border-radius: 5px;
	background: white;
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .1);
	box-sizing: border-box;
}


.service-page_cont_unit01 li:nth-of-type(1) {
	background: url(../images/content/service-icon01.png) white no-repeat right -30px bottom 15px/60%;
}

.service-page_cont_unit01 li:nth-of-type(2) {
	background: url(../images/content/service-icon02.png) white no-repeat right -8px bottom 15px/73%;
}

.service-page_cont_unit01 li:nth-of-type(3) {
	background: url(../images/content/service-icon03.png) white no-repeat right -17px bottom 15px/75%;
}

.service-page_cont_unit01 li:nth-of-type(4) {
	background: url(../images/content/service-icon04.png) white no-repeat right -10px bottom 15px/60%;
}

.service-page_cont_unit01 li:nth-of-type(5) {
	background: url(../images/content/service-icon05.png)white no-repeat right -3px bottom 15px/60%;
}

.service-page_cont_unit01 li:nth-of-type(6) {
	background: url(../images/content/service-icon06.png) white no-repeat right -10px bottom/60%;
}

.service-page_cont_unit_ttl {
	display: flex;
	font-size: 1.125rem;
	font-weight: bold;
	line-height: 1.5;
	align-items: baseline;
}

.service-page_cont_unit_ttl::before {
	content: '';
	display: block;
	width: 20px;
	height: 15px;
	margin-right: 3px;
	background: url(../images/content/service-ttl_icon.png) no-repeat top left/ contain;
}


.service-page_sm-ttl_ar {
	padding: 15px 0;
}

.service-page_sm-ttl_ar p {
	font-size: 1.0625rem;
}

.service-page_cont_unit02 li:nth-of-type(1) {
	background: url(../images/content/service-icon07.png) white no-repeat right -22px bottom 15px/80%;
}

.service-page_cont_unit02 li:nth-of-type(2) {
	background: url(../images/content/service-icon08.png) white no-repeat right -8px bottom 15px/73%;
}

.service-page_cont_unit02 li:nth-of-type(3) {
	background: url(../images/content/service-icon09.png) white no-repeat right -17px bottom 15px/75%;
}

.service-page_cont_unit02 li:nth-of-type(4) {
	background: url(../images/content/service-icon10.png) white no-repeat right -20px bottom 15px/80%;
}

.service-page_cont_unit02 li:nth-of-type(5) {
	background: url(../images/content/service-icon11.png)white no-repeat right -30px bottom 15px/90%;
}

.service-page_cont_unit03 li:nth-of-type(1) {
	background: url(../images/content/service-icon12.png) white no-repeat right -22px bottom 15px/80%;
}

.service-page_cont_unit03 li:nth-of-type(2) {
	background: url(../images/content/service-icon13.png) white no-repeat right -8px bottom 15px/73%;
}

.service-page_cont_unit03 li:nth-of-type(3) {
	background: url(../images/content/service-icon14.png) white no-repeat right -17px bottom 15px/75%;
}

.service-page_cont_unit03 li:nth-of-type(4) {
	background: url(../images/content/service-icon15.png) white no-repeat right -20px bottom 15px/80%;
}

.service-page_cont_unit03 li:nth-of-type(5) {
	background: url(../images/content/service-icon16.png)white no-repeat right -30px bottom 15px/90%;
}

.service-page_cont_unit03 li:nth-of-type(6) {
	background: url(../images/content/service-icon17.png)white no-repeat right -30px bottom 15px/90%;
}

.service-page_cont_unit01 li:nth-of-type(n + 4),
.service-page_cont_unit02 li:nth-of-type(n + 4),
.service-page_cont_unit03 li:nth-of-type(n + 4) {
	margin-top: 12px;
}

.service-page_cont_unit02 li:empty,
.service-page_cont_unit04 li,
.service-page_cont_unit04 li:empty {
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
}

.service-page_pc_hidden {
	display: none;
}


/* .service-page_cont_unit01 li, 
.service-page_cont_unit02 li,
.service-page_cont_unit03 li,
.service-page_cont_unit04 li {
	transition: .7s;
} 

.service-page_cont_unit01 li:hover, 
.service-page_cont_unit02 li:hover,
.service-page_cont_unit03 li:hover,
.service-page_cont_unit04 li:hover {
	transform: perspective(300px) rotateX(-8deg) rotateY(-8deg);
}  */

.service_vector-wrapper .line {
	display: none;
	stroke: #D9F5F1;
	stroke-miterlimit: 10;
}

.service_vector-wrapper.active .line {
	display: block;
}

#service_canvas {
	width: 700px;
	height: 380px;
	position: absolute;
	right: -226px;
	bottom: 0;
}

.line.service_finished path {
	fill: #D9F5F1;
	animation: fill-anime 1s;
}

#service_canvas01 {
	width: 700px;
	height: 380px;
	position: absolute;
	right: -226px;
	bottom: 0;
}

.line.service_finished01 path {
	fill: #D9F5F1;
	animation: fill-anime 1s;
}

.service_vector-wrapper02 .line {
	display: none;
	stroke: #FFE4DB;
	stroke-miterlimit: 10;
}

.service_vector-wrapper02.active .line {
	display: block;
}

#service_canvas02 {
	width: 700px;
	height: 380px;
	position: absolute;
	left: -226px;
	bottom: 0;
}

.line.service_finished02 path {
	fill: #FFE4DB;
	animation: fill-anime 1s;
}

#service_canvas03 {
	width: 700px;
	height: 380px;
	position: absolute;
	left: -226px;
	bottom: 0;
}

.line.service_finished03 path {
	fill: #FFE4DB;
	animation: fill-anime 1s;
}

@media screen and (max-width: 1280px) {
	.service-page_mv_img_ar figure::before {
		right: 0;
	}

	.service-page_mv_pc {
		display: none;
	}

	.service-page_mv_sp {
		display: block;
	}

	#service_canvas {
		right: -300px;
	}

	#service_canvas01 {
		right: -300px;
	}

	#service_canvas02 {
		left: -300px;
	}

	#service_canvas03 {
		left: -300px;
	}
}

@media screen and (max-width: 1200px) {
	.service-page-cont_ar02 {
		padding: 100px 0 105px;
	}

	#service_canvas {
		height: 800px;
	}

	#service_canvas01 {
		height: 800px;
	}

	#service_canvas02 {
		height: 800px;
	}

	#service_canvas03 {
		height: 800px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1200px) {

	.service-page-dec01 {
		background: url(../images/content/top/top_bg.png) repeat top center/90%, url(../images/content/top/pattern.png) no-repeat top 44% left /6%, url(../images/content/top/pattern.png) no-repeat bottom 30vw right / 6%, url(../images/content/service-dec03.png) no-repeat top 76% center /18%;
	}

	.service-page_mv_img_ar {
		position: relative;
		width: 51%;
	}

	.service-page_mv_img_ar figure img {
		width: auto;
		height: 800px;
	}

	.service-ttl02 {
		font-size: 3.375rem;
	}

	.service-page-contents_txt_wrap {
		width: 48%;
	}


	.service-page_cont_img-ar {
		width: 48%;
	}

	.service-page_cont_img-ar li {
		width: 48%;
		height: 180px;
	}

	.service-page_cont_img-ar02 li {
		width: 48%;
		height: auto;
	}

	.service-page_cont_unit01 li:nth-of-type(n + 3),
	.service-page_cont_unit02 li:nth-of-type(n + 3),
	.service-page_cont_unit03 li:nth-of-type(n + 3) {
		margin-top: 12px;
	}

	.service-page_pc_hidden {
		display: block;
	}

	.service-page_sp_hidden {
		display: none;
	}
}


@media screen and (max-width: 1024px) {
	#service_canvas {
		width: 105%;
		right: -570px;
	}

	#service_canvas01 {
		width: 105%;
		right: -570px;
	}

	#service_canvas02 {
		width: 105%;
		left: -570px;
	}

	#service_canvas03 {
		width: 105%;
		height: 630px;
		left: -570px;
	}
}


@media screen and (max-width: 768px) {

	#service_canvas {
		right: -480px;
	}

	#service_canvas01 {
		right: -480px;
	}

	#service_canvas02 {
		left: -480px;
	}

	#service_canvas03 {
		height: 500px;
		left: -480px;
	}
}


@media screen and (max-width: 767px) {

	.service-page-mv_txt {
		width: 100%;
		height: auto;
		margin: 100px 10px 0 -5%;
		padding: 0;
		background: rgba(255, 255, 255, 0.13);
	}

	.service-page_mv_img_ar {
		width: 100%;
	}

	.service-page_mv_img_ar figure img {
		width: auto;
		height: 460px;
	}

	.company_sp_hidden {
		display: none;
	}

	#service_canvas {
		right: -570px;
		width: 170%;
		height: 540px;
	}

	#service_canvas01 {
		right: -570px;
		width: 170%;
		height: 540px;
	}

	#service_canvas02 {
		left: -570px;
		width: 170%;
		height: 540px;
	}

	#service_canvas03 {
		left: -570px;
		width: 201%;
		height: 320px;
	}
}

@media screen and (min-width:461px) and (max-width: 767px) {
	.service-page_mv_pc {
		display: block;
	}

	.service-page_mv_sp {
		display: none;
	}
}



@media screen and (min-width: 376px) and (max-width: 767px) {

	.service-page_cont_img-ar02 li {
		width: 30%;
		height: auto;
	}

	.service-page_pc_hidden {
		display: none;
	}

	.service-page_sp_hidden {
		display: block;
	}
}



@media screen and (min-width: 375px) and (max-width: 767px) {

	.service-page-dec01 {
		background: url(../images/content/top/top_bg.png) repeat top center/90%, url(../images/content/top/pattern.png) no-repeat top 27% left -67px/23%, url(../images/content/top/pattern.png) no-repeat bottom 672vw right -60px / 23%, url(../images/content/service-dec03.png) no-repeat top 68% center /18%;
	}

	.service-page-mv_txt p {
		margin-top: 30px;
	}

	.service-page_content_wrap {
		padding: 0 0 100px;
	}

	.service-ttl02 {
		margin-bottom: 0;
		line-height: 1.3;
		font-size: 3.375rem;
	}

	.service_ttl02 span {
		display: inline;
		margin-left: .5em;
	}

	.service-page-cont_ar {
		display: block;
		padding: 80px 0 0;
	}

	.service-page-cont_ar02 {
		display: block;
		padding: 100px 0 120px;
	}

	.service-page-contents_txt_wrap {
		width: 100%;
	}

	.service-page_cont_txtar p {
		margin-top: 30px;
	}

	.service-sp_appear {
		display: block;
	}

	.service-page_cont_img-ar {
		width: 100%;
		justify-content: space-around;
	}

	.service-page_cont_img-ar02 {
		width: 100%;
	}

	.service-page_cont_img-ar li {
		width: 46%;
		height: 180px;
		padding: 15px 5px;
	}

	.service-page_cont_unit01 li:nth-of-type(n + 3),
	.service-page_cont_unit02 li:nth-of-type(n + 3),
	.service-page_cont_unit03 li:nth-of-type(n + 3) {
		margin-top: 12px;
	}

	.service-page_cont_unit_ttl {
		font-size: 1rem;
	}
}


@media screen and (max-width: 650px) {
	#service_canvas03 {
		width: 230%;
		height: 266px;
	}
}

@media screen and (max-width:460px) {
	.service-page_mv_pc {
		display: none;
	}

	.service-page_mv_sp {
		display: block;
	}

	#service_canvas {
		width: 230%;
	}

	#service_canvas01 {
		width: 230%;
	}

	#service_canvas02 {
		width: 230%;
	}

	#service_canvas03 {
		width: 750px;
		height: 210px;
		left: -310px;
	}
}

@media screen and (max-width: 390px) {
	#service_canvas {
		width: 265%;
		height: 555px;
	}

	#service_canvas01 {
		width: 265%;
		height: 555px;
	}

	#service_canvas02 {
		width: 265%;
		height: 555px;
	}

	#service_canvas03 {
		width: 195%;
		height: 462px;
	}
}


@media screen and (max-width: 375px) {

	.service-page_cont_img-ar02 li {
		width: 50%;
		height: auto;
	}

	.service-page_pc_hidden {
		display: block;
	}

	.service-page_sp_hidden {
		display: none;
	}
}

@media screen and (max-width: 374px) {
	.service-page-dec01 {
		background: url(../images/content/top/top_bg.png) repeat top center/90%, url(../images/content/top/pattern.png) no-repeat top 27% left -67px/23%, url(../images/content/top/pattern.png) no-repeat bottom 672vw right -60px / 23%, url(../images/content/service-dec03.png) no-repeat top 68% center /18%;
	}

	.service-page-mv_txt p {
		margin-top: 30px;
	}

	.service-page_content_wrap {
		padding: 0 0 100px;
	}

	.service-ttl02 {
		font-size: 2.9375rem;
	}

	.service_ttl02 span {
		display: inline;
		margin-left: .5em;
	}

	.service-page_cont_txtar h4 {
		font-size: 1rem;
	}

	.service-page-cont_ar {
		display: block;
		padding: 80px 0 0;
	}

	.service-page-cont_ar02 {
		display: block;
		padding: 100px 0 120px;
	}

	.service-page-contents_txt_wrap {
		width: 100%;
	}

	.service-page_cont_txtar p {
		margin-top: 30px;
	}

	.service-page_cont_img-ar {
		width: 100%;
		justify-content: space-around;
	}

	.service-page_cont_img-ar02 {
		width: 100%;
	}

	.service-page_cont_img-ar li {
		width: 46%;
		height: 150px;
		padding: 15px 5px;
	}

	.service-page_cont_img-ar02 li {
		width: 50%;
		height: auto;
	}

	.service-page_cont_unit01 li:nth-of-type(n + 3),
	.service-page_cont_unit02 li:nth-of-type(n + 3),
	.service-page_cont_unit03 li:nth-of-type(n + 3) {
		margin-top: 12px;
	}

	.service-page_cont_unit_ttl {
		font-size: 1rem;
	}

	.company_sp_hidden02 {
		display: none;
	}
}


@media screen and (max-width: 320px) {

	#service_canvas {
		height: 470px;
		right: -530px;
	}


	#service_canvas01 {
		height: 470px;
		right: -530px;
	}

	#service_canvas02 {
		height: 470px;
		left: -530px;
	}

	#service_canvas03 {
		width: 267%;
		height: 421px;
		left: -530px;
	}
}