@charset "UTF-8";
/* FV
------------------------------------------------------------------------- */
.fv {
	background: url(../images/top/fv_bg_sp.webp) no-repeat center center;
	background-size: cover;
	padding: 21.3333333333vw 0 6.4vw;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.fv::after {
	content: "";
	display: block;
	width: 93.8666666667vw;
	height: 177.6vw;
	background: url(../images/top/fv_img_sp.webp) no-repeat;
	background-size: contain;
	position: absolute;
/* 	bottom: 0; */
	top: 0;
	right: 0;
	z-index: -1;
}

.fv_contents {
	width: 87.4666666667vw;
	margin: 0 auto;
}

.fv_catch_copy picture {
	display: block;
	margin-bottom: 6.4vw;
}
.fv_catch_copy picture:last-child {
	margin-bottom: 0;
}

.wrap_fv_btn {
	width: 78.9333333333vw;
	margin: 17.0666666667vw auto 0;
}
.wrap_fv_btn p {
	margin-bottom: 6.4vw;
}
.wrap_fv_btn p:last-child {
	margin-bottom: 0;
}

.ul_fv_nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 4.2666666667vw 6.4vw;
	margin-top: 8.5333333333vw;
}
.ul_fv_nav li {
	width: 40.5333333333vw;
}
.ul_fv_nav li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-bottom: 1.0666666667vw;
	font-weight: 900;
	border-bottom: 1px solid;
	-o-border-image: linear-gradient(to right, #222222, #FF4B00) 1;
	border-image: -webkit-gradient(linear, left top, right top, from(#222222), to(#FF4B00)) 1;
	border-image: linear-gradient(to right, #222222, #FF4B00) 1;
}
.ul_fv_nav li a::after {
	content: "";
	display: block;
	width: 6.4vw;
	height: 6.4vw;
	background: url(../images/arrow_orange.svg) no-repeat;
	background-size: contain;
}

/* お客様の声
------------------------------------------------------------------------- */
#voice_slider {
	padding-left: 4.2666666667vw;
}

.voice_contents a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	padding: 4vw;
	border: 1px solid #EEEAE9;
	border-radius: 1.0666666667vw;
	position: relative;
	pointer-events: none;
}
.voice_contents a::after {
	content: none;
	display: block;
	width: 4.2666666667vw;
	height: 4.2666666667vw;
	background: url(../images/arrow_black_thin.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 5.3333333333vw;
	right: 5.3333333333vw;
}

.wrap_voice_text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	margin-top: 4.2666666667vw;
}

.voice_name {
	font-size: 4.2666666667vw;
	font-weight: 900;
}

.voice_ttl {
	font-size: 6.4vw;
	margin: 4.2666666667vw 0;
	font-weight: 900;
}

.voice_category {
	font-weight: 400;
	color: #443F3D;
}

/* スライダー矢印 */
.splide__arrow {
	width: 10.6666666667vw;
	height: 10.6666666667vw;
	background: url(../images/top/slider_arrow.svg) no-repeat;
	background-size: contain;
	opacity: 1;
}
.splide__arrow.splide__arrow--prev {
	-webkit-transform: translateY(-50%) scale(-1, 1);
	transform: translateY(-50%) scale(-1, 1);
	left: 0;
}
.splide__arrow.splide__arrow--next {
	right: 0;
}
.splide__arrow svg {
	display: none;
}

/* サービス
------------------------------------------------------------------------- */
.wrap_service_contents {
	width: 91.7333333333vw;
	margin: 0 auto;
}

.service_contents {
	margin-bottom: 10.6666666667vw;
}
.service_contents:last-child {
	margin-bottom: 0;
}

.service_contents .lead_text {
	margin-bottom: 6.4vw;
}

.ul_service .btn_common {
	margin-top: 4.2666666667vw;
}

.service .btn_common a {
	pointer-events: none;
}
.service .btn_common a::after {
	content: none;
}

/* 初めての方へ
------------------------------------------------------------------------- */
.wrap_first_time_users_contents {
	width: 91.7333333333vw;
	margin: 0 auto;
}

.first_time_users_contents {
	margin-bottom: 10.6666666667vw;
}
.first_time_users_contents:last-child {
	margin-bottom: 0;
}

.first_time_users_text {
	color: #fff;
}

/* 制作事例
------------------------------------------------------------------------- */
#case_slider {
	padding-left: 4.2666666667vw;
}

.case_contents a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	padding: 1.8666666667vw;
	border: 1px solid #EEEAE9;
	border-radius: 1.0666666667vw;
	background: #fff;
	position: relative;
	pointer-events: none;
}
.case_contents a::after {
	content: none;
	display: block;
	width: 4.2666666667vw;
	height: 4.2666666667vw;
	background: url(../images/arrow_black_thin.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 2.1333333333vw;
	right: 5.3333333333vw;
}

.wrap_case_text {
	padding: 0 2.1333333333vw;
	margin-top: 4.2666666667vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.case_ttl {
	font-weight: 900;
	margin-bottom: 2.1333333333vw;
}

.case_category {
	color: #443F3D;
}

/* ナレッジ
------------------------------------------------------------------------- */
.wrap_knowledge_contents {
	width: 91.7333333333vw;
	margin: 0 auto;
}

.knowledge_contents a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 2.1333333333vw;
	padding: 2.1333333333vw;
	border: 1px solid #EEEAE9;
	border-radius: 1.0666666667vw;
	position: relative;
}
.knowledge_contents a::after {
	content: "";
	display: block;
	width: 4.2666666667vw;
	height: 4.2666666667vw;
	background: url(../images/arrow_black_thin.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 3.7333333333vw;
	right: 3.2vw;
}
.knowledge_contents:nth-child(2) .knowledge_img {
	background: #008868;
}
.knowledge_contents:nth-child(3) .knowledge_img {
	background: #520088;
}
.knowledge_contents:nth-child(4) .knowledge_img {
	background: #004088;
}

.knowledge_img {
	width: 37.8666666667vw;
	padding: 0.8vw;
	background: #880000;
	border-radius: 1.0666666667vw;
}

.knowledge_text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 47.4666666667vw;
}

.ttl_h3_knowledge {
	font-weight: 900;
	font-size: 4.2666666667vw;
	margin-bottom: 2.1333333333vw;
}

/* お知らせ
------------------------------------------------------------------------- */
#news_slider {
	padding-left: 6.1333333333vw;
}

.news_contents a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
	padding: 2.1333333333vw;
	position: relative;
	pointer-events: none;
}
.news_contents a::after {
	content: none;
	display: block;
	width: 4.2666666667vw;
	height: 4.2666666667vw;
	background: url(../images/arrow_black_thin.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 3.2vw;
	right: 3.2vw;
}

.news_img {
	border: 1px solid #EEEAE9;
	border-radius: 1.0666666667vw;
	overflow: hidden;
}

.wrap_news_text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 4.2666666667vw;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.news_time {
	font-weight: 900;
}

.news_ttl {
	font-weight: 900;
	font-size: 6.4vw;
	margin: 2.1333333333vw 0 4.2666666667vw;
}

/* 会社案内
------------------------------------------------------------------------- */
.wrap_company_contents {
	width: 91.7333333333vw;
	margin: 0 auto;
}

.wrap_company_text {
	margin-top: 6.4vw;
	color: #fff;
}

.ul_company {
	margin: 6.4vw 0;
	font-weight: 900;
}

@media (min-width: 769px) {
	/* FV
	------------------------------------------------------------------------- */
	.fv {
		background-image: url(../images/top/fv_bg.webp);
		padding: 8.8235294118vw 0;
	}
	.fv::after {
		width: 62.1323529412vw;
		height: 53.5294117647vw;
		background-image: url(../images/top/fv_img_pc.webp);
		bottom: 0;
		right: -12.1323529412vw;
	}
	.fv_contents {
		width: 90.5882352941vw;
	}
	.fv_catch_copy picture {
		width: 33.5294117647vw;
		margin-bottom: 1.7647058824vw;
	}
	.fv_catch_copy picture:last-child {
		width: 70.5882352941vw;
	}
	.wrap_fv_btn {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 2.9411764706vw;
		width: 90.5882352941vw;
		margin: 3.5294117647vw auto 0;
	}
	.wrap_fv_btn p {
		margin-bottom: 0;
	}
	.wrap_fv_btn .btn {
		width: 21.7647058824vw;
	}
	.wrap_fv_btn .btn a > span {
		height: 4.7058823529vw;
		font-size: 1.0294117647vw;
	}
	.wrap_fv_btn .btn a > span span {
		font-size: 1.7647058824vw;
	}
	.wrap_fv_btn .btn a > span span::before {
		width: 1.1764705882vw;
	}
	.wrap_fv_btn .btn a > span span.icon_download::before {
		height: 1.1764705882vw;
	}
	.wrap_fv_btn .btn a > span span.icon_consultation::before {
		height: 1.0294117647vw;
	}
	.ul_fv_nav {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 2.3529411765vw;
		margin-top: 2.9411764706vw;
	}
	.ul_fv_nav li {
		width: 14.1176470588vw;
	}
	.ul_fv_nav li a {
		padding-bottom: 0.2941176471vw;
		-webkit-transition: 0.2s;
		transition: 0.2s;
	}
	.ul_fv_nav li a:hover {
		color: #FF4B00;
	}
	.ul_fv_nav li a::after {
		width: 1.7647058824vw;
		height: 1.7647058824vw;
	}
	/* お客様の声
	------------------------------------------------------------------------- */
	#voice_slider {
		padding-left: 0;
	}
	.wrap_voice_contents {
		width: min(98.8235294118vw, 1344px);
		margin: 0 auto;
	}
	.wrap_voice_contents .splide__list {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: min(2.9411764706vw, 40px) 0;
	}
	.voice_contents {
		width: min(32.9411764706vw, 448px);
	}
	.voice_contents a {
		padding: min(1.7647058824vw, 24px) min(2.9411764706vw, 40px);
		border-radius: min(0.2941176471vw, 4px);
		position: relative;
	}
	.voice_contents a::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		border-radius: min(0.2941176471vw, 4px);
		border: 8px solid #FF4B00;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		-webkit-transition: 0.2s;
		transition: 0.2s;
		opacity: 0;
	}
	.voice_contents a:hover::before {
		opacity: 1;
	}
	.voice_contents a::after {
		width: min(1.7647058824vw, 24px);
		height: min(1.7647058824vw, 24px);
		bottom: min(1.7647058824vw, 24px);
		right: min(3.5294117647vw, 48px);
	}
	.wrap_voice_text {
		margin-top: min(1.1764705882vw, 16px);
	}
	.voice_name {
		font-size: min(1.3235294118vw, 18px);
	}
	.voice_ttl {
		font-size: min(2.3529411765vw, 32px);
		margin: min(1.1764705882vw, 16px) 0;
	}
	.voice_category {
		font-size: min(1.3235294118vw, 18px);
	}
	/* サービス
	------------------------------------------------------------------------- */
	.wrap_service_contents {
		width: min(90.5882352941vw, 1232px);
	}
	.service_contents {
		margin-bottom: min(2.9411764706vw, 40px);
	}
	.service_contents .lead_text {
		width: min(82.3529411765vw, 1120px);
		margin-bottom: min(1.7647058824vw, 24px);
	}
	.ul_service {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: min(1.1764705882vw, 16px) min(2.3529411765vw, 32px);
		width: min(82.3529411765vw, 1120px);
		margin: 0 auto;
	}
	.ul_service .btn_common {
		margin: 0;
	}
	/* 初めての方へ
	------------------------------------------------------------------------- */
	.wrap_first_time_users_contents {
		width: min(82.3529411765vw, 1120px);
	}
	.first_time_users_contents {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: min(2.3529411765vw, 32px);
		margin-bottom: min(5.8823529412vw, 80px);
	}
	.first_time_users_contents .ttl_heading03 {
		width: min(40vw, 544px);
		padding: min(4.7058823529vw, 64px) 0;
		margin-bottom: 0;
	}
	.first_time_users_contents .ttl_heading03::before, .first_time_users_contents .ttl_heading03::after {
		width: 1px;
		height: 100%;
		left: auto;
		right: 0;
	}
	.first_time_users_contents .ttl_heading03::before {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, #fff), to(#FF4B00));
		background: linear-gradient(to bottom, #fff 70%, #FF4B00);
	}
	.first_time_users_contents .ttl_heading03::after {
		background-image: linear-gradient(to bottom, transparent, transparent 5px, #252525 5px, #252525 10px);
		background-size: 3px 10px;
	}
	.first_time_users_text {
		width: min(40vw, 544px);
	}
	/* 制作事例
	------------------------------------------------------------------------- */
	#case_slider {
		padding-left: 0;
	}
	.wrap_case_contents {
		width: min(90.5882352941vw, 1232px);
		margin: 0 auto;
	}
	.wrap_case_contents .splide__list {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		gap: min(1.1764705882vw, 16px);
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.case_contents {
		width: min(29.4117647059vw, 400px);
	}
	.case_contents a {
		padding: min(0.5147058824vw, 7px);
		border-radius: min(0.2941176471vw, 4px);
		-webkit-transition: 0.2s;
		transition: 0.2s;
	}
	.case_contents a:hover {
		background: #252525;
		color: #fff;
	}
	.case_contents a:hover::after {
		background-image: url(../images/arrow_white.svg);
		width: min(1.7647058824vw, 24px);
		height: min(1.7647058824vw, 24px);
		bottom: min(0.5882352941vw, 8px);
		right: min(1.25vw, 17px);
	}
	.case_contents a:hover .case_category {
		color: #fff;
	}
	.case_contents a::after {
		width: min(1.1764705882vw, 16px);
		height: min(1.1764705882vw, 16px);
		bottom: min(0.8823529412vw, 12px);
		right: min(1.4705882353vw, 20px);
	}
	.wrap_case_text {
		padding: 0 min(0.5882352941vw, 8px);
		margin-top: min(1.1764705882vw, 16px);
	}
	.case_ttl {
		font-size: min(1.3235294118vw, 18px);
		margin-bottom: min(0.5882352941vw, 8px);
	}
	.case_category {
		font-size: min(1.1764705882vw, 16px);
		-webkit-transition: 0.2s;
		transition: 0.2s;
	}
	/* ナレッジ
	------------------------------------------------------------------------- */
	.wrap_knowledge_contents {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: min(1.1764705882vw, 16px) min(2.3529411765vw, 32px);
		width: min(90.5882352941vw, 1232px);
	}
	.knowledge_contents {
		width: min(44.1176470588vw, 600px);
	}
	.knowledge_contents a {
		gap: min(1.1764705882vw, 16px);
		padding: min(1.6911764706vw, 23px);
		border-radius: min(0.2941176471vw, 4px);
		position: relative;
	}
	.knowledge_contents a::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		border-radius: min(0.2941176471vw, 4px);
		border: 4px solid #FF4B00;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		-webkit-transition: 0.2s;
		transition: 0.2s;
		opacity: 0;
	}
	.knowledge_contents a:hover::before {
		opacity: 1;
	}
	.knowledge_contents a::after {
		width: min(1.1764705882vw, 16px);
		height: min(1.1764705882vw, 16px);
		bottom: min(2.0588235294vw, 28px);
		right: min(2.0588235294vw, 28px);
	}
	.knowledge_img {
		width: min(14.1176470588vw, 192px);
		padding: min(0.2941176471vw, 4px);
		border-radius: min(0.2941176471vw, 4px);
	}
	.knowledge_text {
		width: min(25.2941176471vw, 344px);
	}
	.ttl_h3_knowledge {
		font-size: min(1.7647058824vw, 24px);
		margin-bottom: min(1.1764705882vw, 16px);
	}
	/* お知らせ
	------------------------------------------------------------------------- */
	#news_slider {
		padding-left: 0;
	}
	.wrap_news_contents {
		width: min(82.4264705882vw, 1121px);
		margin: 0 auto;
	}
	.wrap_news_contents .splide__list {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: min(0.8088235294vw, 11px);
	}
	.news_contents {
		width: min(20vw, 272px);
	}
	.news_contents a {
		padding: min(0.5882352941vw, 8px);
		-webkit-transition: 0.2s;
		transition: 0.2s;
	}
	.news_contents a:hover {
		background: #252525;
		color: #fff;
	}
	.news_contents a:hover::after {
		background-image: url(../images/arrow_white.svg);
		width: min(1.7647058824vw, 24px);
		height: min(1.7647058824vw, 24px);
		bottom: min(0.5882352941vw, 8px);
		right: min(0.6617647059vw, 9px);
	}
	.news_contents a::after {
		width: min(1.1764705882vw, 16px);
		height: min(1.1764705882vw, 16px);
		bottom: min(0.8823529412vw, 12px);
		right: min(0.8823529412vw, 12px);
	}
	.news_img {
		border-radius: min(0.2941176471vw, 4px);
	}
	.wrap_news_text {
		margin-top: min(1.1764705882vw, 16px);
	}
	.news_time {
		font-size: min(1.3235294118vw, 18px);
	}
	.news_ttl {
		font-size: min(1.7647058824vw, 24px);
		margin: min(0.5882352941vw, 8px) 0 min(1.1764705882vw, 16px);
	}
	/* 会社案内
	------------------------------------------------------------------------- */
	.wrap_company_contents {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: min(2.3529411765vw, 32px);
		width: min(82.3529411765vw, 1120px);
	}
	.company_img {
		width: min(32.9411764706vw, 448px);
	}
	.wrap_company_text {
		margin-top: 0;
		width: min(47.0588235294vw, 640px);
	}
	.ul_company {
		margin: min(2.9411764706vw, 40px) 0;
	}
}