@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main .svg-animation {
	opacity: 0;
}
#main .svg-animation.show {
	opacity: 1;
}
#main .svg-animation .cls-1 {
	fill: none;
	stroke: #fb8d0f;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 8;
	stroke-dasharray: var(--getTotalLength);
	stroke-dashoffset: var(--getTotalLength);
}
#main .mainVisual {
	overflow: hidden;
	margin-bottom: 3.2rem;
	position: relative;
}
#main .mainVisual .fooList img {
	width: 100%;
}
#main .mainVisual .fooList li {
	position: relative;
}
#main .mainVisual .fooList .line01 {
	width: 61.3%;
	position: absolute;
	top: -1.03rem;
	left: 0;
}
#main .mainVisual .fooList .line02 {
	width: 45.6%;
	position: absolute;
	bottom: -6.03rem;
	right: 0;
}
#main .mainVisual .fooList .line03 {
	width: 50.5%;
	position: absolute;
	top: -1rem;
	left: 0;
}
#main .mainVisual .fooList .line04 {
	width: 40.9%;
	position: absolute;
	top: -1rem;
	right: 0;
}
#main .mainVisual .fooList .line05 {
	width: 36.9%;
	position: absolute;
	top: -1rem;
	left: 0;
}
#main .mainVisual .fooList .line06 {
	width: 39.9%;
	position: absolute;
	top: -1rem;
	right: 9.6rem;
}
#main .mainVisual .fooList .line07 {
	width: 100%;
	position: absolute;
	bottom: -15%;
	left: 0;
}
#main .mainVisual .fooList .line08 {
	width: 57.7%;
	position: absolute;
	top: -1rem;
	right: 0;
}
#main .mainVisual .fooList .line09 {
	width: 32.5%;
	position: absolute;
	bottom: -10.7rem;
	left: -5.8rem;
}
#main .mainVisual .fooList .line10 {
	width: 78.1%;
	position: absolute;
	top: -19.5rem;
	right: -29.4rem;
}
#main .mainVisual h2 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 10.3rem;
	width: 51.4rem;
	z-index: 1;
}
#main .notice h3:not(.headLine01) {
	margin-bottom: 1.2rem;
}
#main .notice .list {
	margin-bottom: 6rem;
}
#main .notice .list li {
	margin-bottom: 1.2rem;
}
#main .notice .list a {
	display: inline-block;
	line-height: 1.6;
	text-decoration: underline;
	padding-left: 3.2rem;
	background: url(../img/common/icon09.png) no-repeat left center;
	background-size: 2.4rem auto;
}
#main .notice .comInfoList {
	margin-bottom: 5.9rem;
}
#main .notice .comInfoList li {
	border-radius: 1.6rem;
	background: #FAF8ED;
}
#main .notice .comInfoList p {
	font-weight: 700;
}
#main .comImgBox {
	flex-direction: row-reverse;
}
#main .comImgBox .textBox h3 {
	color: #F47804;
	margin-bottom: 1.5rem;
}
#main .comImgBox .textBox p {
	margin-bottom: 3.7rem;
}
#main .comBox {
	margin-top: 0;
}
#main .services {
	margin: 12rem 0 0;
	padding: 7.9rem 0;
	background: #FAF8ED;
	border-bottom: 1px solid #DDD;
}
#main .services .headLine01 {
	margin-bottom: 4.8rem;
}
#main .services .ttlBox {
	position: relative;
}
#main .services .ttlBox .comLinkP {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
}
#main .kurasisupportsList li {
	border-radius: 1.2rem;
	background-color: #fff;
}
#main .kurasisupportsList .photo {
	border-radius: 1.2rem 1.2rem 0 0;
}
#main .kurasisupportsList .sub {
	padding: 0 2.4rem 2.4rem;
}
#main .news {
	margin-bottom: 6rem;
}
#main .news .ttlBox {
	margin-bottom: 1.2rem;
	position: relative;
}
#main .news .ttlBox .comLinkP {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
#main .comTabList {
	margin-bottom: 3.6rem;
}
#main .videosSec .headLine01 {
	padding-bottom: 1.2rem;
}
#main .videosSec .comJsBox .fooUl li {
	border-radius: 1.2rem;
}
#main .videosSec .comJsBox .fooUl li a {
	display: block;
	position: relative;
}
#main .videosSec .comJsBox .fooUl li a::after {
	border: 2px solid #F4A000;
	position: absolute;  
	border-radius: 1.2rem;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;  
	content: ""; 
	opacity: 0;
	transition: opacity 0.3s;
}
#main .videosSec .comJsBox .fooUl li a:hover {
}
#main .videosSec .comJsBox .fooUl .greyBox {
	background: #F8F8F8;
	padding: 1.6rem 2.4rem 2.5rem;
}
#main .videosSec .comJsBox .fooUl li p {
	font-size: 1.2rem;
	line-height: 1.6;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
#main .videosSec .comJsBox .fooUl li .ttl {
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom: 1.1rem;
}
#main .videosSec .comJsBox {
	margin-bottom: 3.2rem;
}
#main .movieLink{
	margin-top: 1.7rem;
	text-align: center;
}
#main .movieLink a {
	display: inline-block;
	font-weight: 700;
	padding-right: 3rem;
	background: url(../img/common/icon08.png) no-repeat right center;
	background-size: 2.3rem auto;
	border-bottom: 1px solid transparent;
}
#main .videosSec .comJsBox .prev,
#main .videosSec .comJsBox .next {
	top: calc(50% - 4.3rem);
	width: 2.5rem;
}
#main .videosSec {
	margin-bottom: 12rem;
}
#main .bannerUl {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
}
#main .bannerUl li {
	width: calc((100% - (1.6rem * 5 + 0.1rem)) / 6);
}
#main .bannerUl li img {
	width: 100%;
}
#main .bannerUl a:hover {
	opacity: 0.7;
}
#main .mainVisual .fooList .comLine svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .mainVisual .fooList .line01 {
	aspect-ratio: 837 / 327;
}
#main .mainVisual .fooList .line02 {
	aspect-ratio: 623 / 349;
}
#main .mainVisual .fooList .line03 {
	aspect-ratio: 690 / 443;
}
#main .mainVisual .fooList .line04 {
	aspect-ratio: 559 / 371;
}
#main .mainVisual .fooList .line05 {
	aspect-ratio: 504 / 443;
}
#main .mainVisual .fooList .line06 {
	aspect-ratio: 545 / 443;
}
#main .mainVisual .fooList .line07 {
	aspect-ratio: 1366 / 284;
}
#main .mainVisual .fooList .line08 {
	aspect-ratio: 787 / 279;
}
#main .mainVisual .fooList .line09 {
	aspect-ratio: 444 / 401;
}
#main .mainVisual .fooList .line10 {
	aspect-ratio: 1066 / 787;
}
@media all and (min-width: 897px) {
	#main .notice .list a:hover {
		text-decoration: none;
	}
	#main .notice .comInfoList {
		margin-bottom: 6.9rem;
		gap: 1.6rem;
	}
	#main .notice .comInfoList li {
		width: calc((100% - (1.6rem * 4 + 0.1rem)) / 5);
	}
	#main .notice .comInfoList .photo {
		width: 8.8rem;
	}
	#main .comImgBox .photoBox {
		margin: 0 6rem 0 0;
	}
	#main .kurasisupportsList {
		gap: 2.4rem;
	}
	#main .kurasisupportsList .sub {
		padding-bottom: 3rem;
	}
	#main .kurasisupportsList li {
		width: calc((100% - (2.4rem * 2 + 0.1rem)) / 3);
	}
	#main .kurasisupportsList .ttl a:hover {
		border-bottom: 1px solid currentColor;
	}
	#main .movieLink a:hover {
		border-color: currentColor;
	}
	#main .videosSec .comJsBox .fooUl li a:hover .greyBox {
		background-color: #FCF6EC;
	}
	#main .videosSec .comJsBox .fooUl li a:hover::after {
		opacity: 1;
	}
	#main .comImgBox .textBox {
		margin-top: 0;
	}
	#main .kurasisupportsList .ttl {
		background-size: 2.7rem auto;
	}
	#main .notice h3:not(.headLine01) {
		margin-bottom: 0.7rem;
	}
	#main .notice .list li {
		margin-bottom: 0.7rem;
	}
	#main .news .headLine01 {
		margin-bottom: 1rem;
	}
	#main .comTabList a {
		padding: 1.3rem 1rem 1rem;
		font-size: 1.5rem;
	}
	#main .comJsBox2 {
		margin: 0 9.5rem 11.8rem;
	}
	#main .comJsBox2 .fooUl li {
		width: 17.8rem;
		margin: 0 0.8rem;
	}
	#main .comJsBox2 .fooUl .photo {
		aspect-ratio: 178 / 100;
	}
	#main .comJsBox2 .prev {
		left: -1.7rem;
	}
	#main .comJsBox2 .next {
		right: -6.8rem;
	}
	#main .comJsBox2 .fooUl {
		margin-bottom: 1.6rem;
	}
	#main .comJsBox2 .dotBox .dot li {
		width: 0.6rem;
		height: 0.6rem;
	}
	#main .comJsBox2 .dotBox .icon {
		width: 1.7rem;
		height: 1.7rem;
	}
	#main .comJsBox2 .next, #main .comJsBox2 .prev {
		top: calc(50% - 4.2rem);
	}
	#main .comImgBox .textBox p {
		margin-bottom: 2.3rem;
	}
}

@media all and (max-width: 896px) {
	#main .mainVisual .fooList .line01 {
		width: 93.2%;
		left: -33.33%;
		top: -2%;
	}
	#main .mainVisual .fooList .line02 {
		width: 75.5%;
		bottom: -9.33%;
	}
	#main .mainVisual .fooList li {
		aspect-ratio: 375 / 188;
		position: relative;
	}
	#main .mainVisual .fooList .line03 {
		width: 90%;
		top: -1rem;
		left: -1rem;
		transform: rotate(10deg);
	}
	#main .mainVisual .fooList .line04 {
		width: 70%;
		top: -0.2rem;
		right: -4.2rem;
	}
	#main .mainVisual .fooList .line05 {
		width: 64%;
		top: 0.7rem;
  		left: -3.1rem;
	}
	#main .mainVisual .fooList .line06 {
		width: 70%;
		right: -17%;
		top: -2rem;
		transform: rotate(-12deg);
	}
	#main .mainVisual .fooList .line07 {
		width: 100%;
		bottom: -8%;
	}
	#main .mainVisual .fooList .line08 {
		width: 88%;
		top: -0.7rem;
		right: -4.6rem;
	}
	#main .mainVisual .fooList .line09 {
		width: 30%;
		bottom: -23%;
		left: 0;
		transform: rotate(-6deg);
	}
	#main .mainVisual .fooList .line10 {
		width: 120%;
		top: -26%;
		right: -45.4%;
	}
	#main .mainVisual .fooList li img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#main .mainVisual h2 {
		width: 12.2rem;
		left: 2rem;
	}
	#main .mainVisual {
		margin-bottom: 4rem;
	}
	#main .notice h3:not(.headLine01) {
		margin-bottom: 0.9rem;
		font-size: 1.6rem;
	}
	#main .notice .list li {
		margin-bottom: 1rem;
	}
	#main .notice .list a {
		padding-left: 2.9rem;
		background-position: left top;
		background-size: 2.1rem auto;
	}
	#main .notice .list {
		margin-bottom: 4rem;
	}
	#main .notice .comInfoList {
		gap: 1.2rem;
	}
	#main .notice .comInfoList li {
		width: calc((100% - 1.2rem) / 2);
		border-radius: 0.8rem;
	}
	#main .notice .comInfoList li a {
		padding: 1.3rem 0.6rem;
	}
	#main .notice .comInfoList li a:after {
		display: none;
	}
	#main .notice .comInfoList .photo {
		width: 4.8rem;
		margin-bottom: 0.4rem;
	}
	#main .comImgBox .textBox h3 {
		margin-bottom: 1rem;
	}
	#main .comImgBox .textBox p {
		margin-bottom: 2rem;
	}
	#main .services {
		padding: 4.7rem 0;
		margin: 4.8rem 0 0;
	}
	#main .services .headLine01 {
		margin-bottom: 2.5rem;
	}
	#main .kurasisupportsList {
		margin-bottom: 2.5rem;
		flex-direction: column;
		gap: 1.6rem 0;
	}
	#main .kurasisupportsList li {
		width: 100%;
	}
	#main .kurasisupportsList .photo {
		margin-bottom: 1.9rem;
		aspect-ratio: 335 / 194;
	}
	#main .kurasisupportsList .sub {
		padding: 0 2rem 2rem;
	}
	#main .kurasisupportsList .ttl {
		margin-bottom: 0.7rem;
		background-size: 2.4rem auto;
		padding: 0 3.3rem .1rem 0;
	}
	#main .news .ttlBox {
		margin-bottom: 2.4rem;
	}
	#main .news .bgBox {
		position: relative;
	}
	#main .comTabListBox {
		overflow-x: scroll;
		margin-bottom: 3.6rem;
	}
	#main .bgBox:after {
		width: 4.4rem;  
		height: 100%;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
		position: absolute;  
		top: 0;
		right: -1px;  
		content: ""; 
	}
	#main .comTabList {
		margin-right: -2rem;
		margin-bottom: 0.3rem;
		width: 100%;
		min-width: 40rem;
	}
	#main .news {
		margin-bottom: 4.8rem;
	}
	#main .videosSec .headLine01 {
		padding-bottom: 0.5rem;
		font-size: 2.4rem;
	}
	#main .videosSec .comJsBox .fooUl .greyBox {
		padding: 1.6rem 2rem;
	}
	#main .videosSec .comJsBox .fooUl li .ttl {
		margin-bottom: 0.6rem;
	}
	#main .videosSec .comJsBox {
		margin-bottom: 2.5rem;
	}
	#main .videosSec .comJsBox .fooUl .photo{
		aspect-ratio: 220 / 134;
	}
	#main .videosSec .comJsBox .prev, #main .videosSec .comJsBox .next {
		top: calc(50% - 0.3rem);
	}
	#main .movieLink a {
		padding-right: 2.4rem;
		background-size: 2rem auto;
	}
	#main .videosSec {
		margin-bottom: 5rem;
	}
	#main .bannerUl {
		gap: 1.2rem;
	}
	#main .bannerUl li {
		width: calc((100% - 1.2rem) / 2);
	}
	#main .servicesList {
		gap: 1.6rem 1.6rem;
	}
	#main .comJsBox2 .fooUl li {
		width: 20.7rem;
	}
}

#main .comJsBox {
	display: none;
}