@charset "UTF-8";
/****************************************
	main
****************************************/
main {
}

section#main-back {
	position:relative;
	color:#fff;
}

section#main-back .main-video {
	width:100%;
	height:100vh;
	position:sticky;
	top:0;
	overflow:hidden;
	z-index:-1;

}

section#main-back .main-video .cover-dot {
	position: absolute;
	top: 0;
	left: 0;
	bottom:0;
	right:0;
	background:url(../img/dot.png);
	z-index:-1;
}

section#main-back .main-video video {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit:cover;
	z-index:-1;
}

section#main-back .main-svg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
}

section#main-back .main-svg svg {
	position:absolute;
	top:50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	width:80%;
	max-width:670px;
}

/***************************************************
 * Generated by SVG Artista on 5/27/2025, 11:35:26 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1{0%{stroke-dashoffset:998.8793334960938px;stroke-dasharray:998.8793334960938px}100%{stroke-dashoffset:0;stroke-dasharray:998.8793334960938px}}@keyframes animate-svg-stroke-1{0%{stroke-dashoffset:998.8793334960938px;stroke-dasharray:998.8793334960938px}100%{stroke-dashoffset:0;stroke-dasharray:998.8793334960938px}}@-webkit-keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-1{-webkit-animation:animate-svg-stroke-1 1s cubic-bezier(0.47,0,0.745,0.715) 0s both,animate-svg-fill-1 4s cubic-bezier(0.47,0,0.745,0.715) 0.8s both;animation:animate-svg-stroke-1 1s cubic-bezier(0.47,0,0.745,0.715) 0s both,animate-svg-fill-1 4s cubic-bezier(0.47,0,0.745,0.715) 0.8s both}@-webkit-keyframes animate-svg-stroke-2{0%{stroke-dashoffset:555.698974609375px;stroke-dasharray:555.698974609375px}100%{stroke-dashoffset:0;stroke-dasharray:555.698974609375px}}@keyframes animate-svg-stroke-2{0%{stroke-dashoffset:555.698974609375px;stroke-dasharray:555.698974609375px}100%{stroke-dashoffset:0;stroke-dasharray:555.698974609375px}}@-webkit-keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-2{-webkit-animation:animate-svg-stroke-2 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s both,animate-svg-fill-2 4s cubic-bezier(0.47,0,0.745,0.715) 0.9s both;animation:animate-svg-stroke-2 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s both,animate-svg-fill-2 4s cubic-bezier(0.47,0,0.745,0.715) 0.9s both}@-webkit-keyframes animate-svg-stroke-3{0%{stroke-dashoffset:644.9656982421875px;stroke-dasharray:644.9656982421875px}100%{stroke-dashoffset:0;stroke-dasharray:644.9656982421875px}}@keyframes animate-svg-stroke-3{0%{stroke-dashoffset:644.9656982421875px;stroke-dasharray:644.9656982421875px}100%{stroke-dashoffset:0;stroke-dasharray:644.9656982421875px}}@-webkit-keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-3{-webkit-animation:animate-svg-stroke-3 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s both,animate-svg-fill-3 4s cubic-bezier(0.47,0,0.745,0.715) 1s both;animation:animate-svg-stroke-3 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s both,animate-svg-fill-3 4s cubic-bezier(0.47,0,0.745,0.715) 1s both}@-webkit-keyframes animate-svg-stroke-4{0%{stroke-dashoffset:414.1540832519531px;stroke-dasharray:414.1540832519531px}100%{stroke-dashoffset:0;stroke-dasharray:414.1540832519531px}}@keyframes animate-svg-stroke-4{0%{stroke-dashoffset:414.1540832519531px;stroke-dasharray:414.1540832519531px}100%{stroke-dashoffset:0;stroke-dasharray:414.1540832519531px}}@-webkit-keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-4{-webkit-animation:animate-svg-stroke-4 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s both,animate-svg-fill-4 4s cubic-bezier(0.47,0,0.745,0.715) 1.1s both;animation:animate-svg-stroke-4 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s both,animate-svg-fill-4 4s cubic-bezier(0.47,0,0.745,0.715) 1.1s both}@-webkit-keyframes animate-svg-stroke-5{0%{stroke-dashoffset:644.9653930664062px;stroke-dasharray:644.9653930664062px}100%{stroke-dashoffset:0;stroke-dasharray:644.9653930664062px}}@keyframes animate-svg-stroke-5{0%{stroke-dashoffset:644.9653930664062px;stroke-dasharray:644.9653930664062px}100%{stroke-dashoffset:0;stroke-dasharray:644.9653930664062px}}@-webkit-keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-5{-webkit-animation:animate-svg-stroke-5 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s both,animate-svg-fill-5 4s cubic-bezier(0.47,0,0.745,0.715) 1.2000000000000002s both;animation:animate-svg-stroke-5 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s both,animate-svg-fill-5 4s cubic-bezier(0.47,0,0.745,0.715) 1.2000000000000002s both}@-webkit-keyframes animate-svg-stroke-6{0%{stroke-dashoffset:484.1732482910156px;stroke-dasharray:484.1732482910156px}100%{stroke-dashoffset:0;stroke-dasharray:484.1732482910156px}}@keyframes animate-svg-stroke-6{0%{stroke-dashoffset:484.1732482910156px;stroke-dasharray:484.1732482910156px}100%{stroke-dashoffset:0;stroke-dasharray:484.1732482910156px}}@-webkit-keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-6{-webkit-animation:animate-svg-stroke-6 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s both,animate-svg-fill-6 4s cubic-bezier(0.47,0,0.745,0.715) 1.3s both;animation:animate-svg-stroke-6 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s both,animate-svg-fill-6 4s cubic-bezier(0.47,0,0.745,0.715) 1.3s both}@-webkit-keyframes animate-svg-stroke-7{0%{stroke-dashoffset:484.1732482910156px;stroke-dasharray:484.1732482910156px}100%{stroke-dashoffset:0;stroke-dasharray:484.1732482910156px}}@keyframes animate-svg-stroke-7{0%{stroke-dashoffset:484.1732482910156px;stroke-dasharray:484.1732482910156px}100%{stroke-dashoffset:0;stroke-dasharray:484.1732482910156px}}@-webkit-keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-7{-webkit-animation:animate-svg-stroke-7 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s both,animate-svg-fill-7 4s cubic-bezier(0.47,0,0.745,0.715) 1.4000000000000001s both;animation:animate-svg-stroke-7 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s both,animate-svg-fill-7 4s cubic-bezier(0.47,0,0.745,0.715) 1.4000000000000001s both}@-webkit-keyframes animate-svg-stroke-8{0%{stroke-dashoffset:597.1232299804688px;stroke-dasharray:597.1232299804688px}100%{stroke-dashoffset:0;stroke-dasharray:597.1232299804688px}}@keyframes animate-svg-stroke-8{0%{stroke-dashoffset:597.1232299804688px;stroke-dasharray:597.1232299804688px}100%{stroke-dashoffset:0;stroke-dasharray:597.1232299804688px}}@-webkit-keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-8{-webkit-animation:animate-svg-stroke-8 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s both,animate-svg-fill-8 4s cubic-bezier(0.47,0,0.745,0.715) 1.5s both;animation:animate-svg-stroke-8 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s both,animate-svg-fill-8 4s cubic-bezier(0.47,0,0.745,0.715) 1.5s both}

section#main-back .main-greeting {
	position:relative;
	width:100%;
	min-height:200vh;
}

section#main-back .main-greeting p {
	position:absolute;
	top:50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	width:80%;
	max-width:900px;
	text-align:center;
	font-size:2.8vw;
	font-weight:800;
}

section#main-back .main-greeting p span {
	display:inline-block;
}




section#works {
	position:relative;
	width:100%;
	padding:50px 0 30px;
	background:#fff;
}

section#works .works-scroll {
	transform: translateY(50px);
	opacity:0;
	transition:1.0s ease-in;
}

section#works .works-scroll-show {
	transform: translateY(0px);
	opacity:1;
	transition:1.0s ease-in;
}




section#works ul {
	display:flex;
}

section#works li {
	position:relative;
	padding:20px 15px 50px 15px;
	width:300px !important;
	margin-right:0 !important;
	border-top:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
}

section#works li .w-img {
	padding:10px;
}

section#works li .w-img img {
	width:100%;
	border-radius:20px;
}

section#works li .w-title {
	padding:10px 10px 5px;
	white-space:normal;
	font-size:18px;
	font-weight:600;
	text-align:center;
}

section#works li .w-dtl {
	padding:5px 10px 10px;
	white-space:normal;
}

section#works li .w-btn {
	position:absolute;
	bottom:10px;
	right:10px;
}

section#works li .w-btn a {
	display:inline-block;
	padding:7px 15px;
	background:#303030;
	border:1px solid #000;
	border-radius:22px;
	color:#fff;
	transition:.4s;
}

section#works li .w-btn a:hover {
	background:#fff;
	color:#000;
	text-decoration:none;
	transition:.4s;
}




section#news {
	position:relative;
	width:100%;
	padding:50px 0px;
	background:#fff;
}

section#news .news-scroll {
	transform: translateY(50px);
	opacity:0;
	transition:1.0s ease-in;
}

section#news .news-scroll-show {
	transform: translateY(0px);
	opacity:1;
	transition:1.0s ease-in;
}

section#news .news-line {
	position:relative;
	padding:0px 0px 30px;
} 

section#news .news-line::after {
	content: '';
	width: 100%;
	height: 1px;
	background:#000;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scale(0,1); /* 線のx軸の長さを0 */
	transition: 3s; /* 要素の変形する時間*/
	transform-origin: left top; /* 要素の座標の原点を設定*/
}

/* 追記 */
section#news .news-line.active::after {
	transform: scale(1,1); /* 線のx軸の長さを1 */
}

section#news .news-area {
	position:relative;
}



section#news .news-area table {
	width:100%;
	max-width:880px;
	margin:0px auto;
}

section#news .news-area th {
	width:200px;
	text-align:left;
	padding:40px 10px;
	border-bottom:1px solid #000;
}

section#news .news-area td {
	width:calc(100% - 200px);
	padding:40px 10px;
	border-bottom:1px solid #000;
}

section#news .news-area td a {
	text-decoration:underline;
	color:#000;
}




section#company {
	position:relative;
	width:100%;
	padding:50px 0px;
	background:#303030;
	color:#fff;
}

section#company .company-scroll {
	transform: translateY(50px);
	opacity:0;
	transition:1.0s ease-in;
}

section#company .company-scroll-show {
	transform: translateY(0px);
	opacity:1;
	transition:1.0s ease-in;
}

section#company .company-line {
	position:relative;
	padding:0px 0px 30px;
} 

section#company .company-line::after {
	content: '';
	width: 100%;
	height: 1px;
	background:#fff;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scale(0,1); /* 線のx軸の長さを0 */
	transition: 3s; /* 要素の変形する時間*/
	transform-origin: left top; /* 要素の座標の原点を設定*/
}

/* 追記 */
section#company .company-line.active::after {
	transform: scale(1,1); /* 線のx軸の長さを1 */
}

section#company .company-area {
	position:relative;
	width:100%;
	max-width:880px;
	margin:0px auto;
}


section#company .company-area .c-name {
	width:200px;
	text-align:left;
	font-weight:600;
	padding:40px 10px;
}

section#company .company-area .c-dtl {
	width:calc(100% - 200px);
	padding:40px 10px;
}

section#company .company-area .c-dtl a {
	color:#fff;
}


section#company .company-area .c1,
section#company .company-area .c2,
section#company .company-area .c3,
section#company .company-area .c4,
section#company .company-area .c5,
section#company .company-area .c6,
section#company .company-area .c7 {
	position:relative;
}



section#company .company-area .c1::after,
section#company .company-area .c2::after,
section#company .company-area .c3::after,
section#company .company-area .c4::after,
section#company .company-area .c5::after,
section#company .company-area .c6::after,
section#company .company-area .c7::after
 {
	content: '';
	width: 100%;
	height: 1px;
	background:#fff;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scale(0,1); /* 線のx軸の長さを0 */
	transition: 3s; /* 要素の変形する時間*/
	transform-origin: left top; /* 要素の座標の原点を設定*/
}

/* 追記 */
section#company .company-area .c1.active::after,
section#company .company-area .c2.active::after,
section#company .company-area .c3.active::after,
section#company .company-area .c4.active::after,
section#company .company-area .c5.active::after,
section#company .company-area .c6.active::after,
section#company .company-area .c7.active::after {
	transform: scale(1,1); /* 線のx軸の長さを1 */
}

section#company .company-map {
	width:100%;
	max-width:880px;
	margin:0px auto;
	padding:50px 0px 0px;
}

section#company .company-map iframe {
	width:100%;
	height:500px;
}

@media screen and (max-width:900px) {

	section#news .news-area table {
		width:80%;
	}

	section#news .news-area th {
		width:150px;
	}
	
	section#news .news-area td {
		width:calc(100% - 150px);
	}
	


	section#company .company-area {
		width:80%;
	}

	section#company .company-area .c-name {
		width:150px;
	}
	
	section#company .company-area .c-dtl {
		width:calc(100% - 150px);
	}


	section#company .company-map {
		padding:50px 10% 0px;
	}

	section#company .company-map iframe {
		height:400px;
	}
}

@media screen and (max-width:768px) {
	
	section#main-back .main-greeting {
		min-height:100vh;
	}

	section#main-back .main-greeting p {
		width:90%;
		font-size:22px;
	}
	



	





	
	
	



}


@media screen and (max-width:480px){




	section#news .news-area th {
		display:block;
		width:100%;
		border-bottom:none;
		padding:40px 10px 10px;
	}
	
	section#news .news-area td {
		display:block;
		width:100%;
		padding:10px 10px 40px;
	}


	section#company .company-area .c-name {
		display:block;
		width:100%;
		padding:40px 10px 10px;
	}
	
	section#company .company-area .c-dtl {
		display:block;
		width:100%;
		padding:10px 10px 40px;
	}

	

}


