@charset "UTF-8";
* {
	font-family: Noto Sans JP;
	line-height: 150%;
}

.pc {
	display: inline-block;
}

.sp {
	display: none;
}

/* メインビジュアル */
.main-visual {
	margin-top: -60px;

	background-image: url("../../img/front/main_visual.png");
	background-size: cover;
}

.main-container {
	width: 100%;
	height: 812px;
	padding: 166px 168px 106px;
}
.main-container h2 {
	font-size: 32px;
	font-weight: 700;

	position: relative;
	left: 0;

	width: calc(100% + 168px);
	margin-bottom: 50px;

	color: #fff;
}
.main-container p:first-of-type {
	font-size: 28px;
	font-weight: 700;

	margin-bottom: -10px;

	color: #fff;
}
.main-container h1 {
	font-size: 100px;
	font-weight: 900;

	margin-bottom: 50px;

	white-space: nowrap;
	letter-spacing: 3px;

	color: #fff;
}
.main-container p:last-child {
	font-size: 20px;
	font-weight: 700;

	letter-spacing: -1px;

	color: #fff;
}

.main-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
}

.main-img {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;

	width: 100%;
	min-width: 280px;
	max-width: 580px;
	height: 447px;
	margin-top: 100px;
	margin-left: 112px;
	padding: 38px;

	border-radius: 12px;
	background-color: rgba(67, 102, 153, 0.4);
}
.main-img img {
	width: 100%;
	height: auto;
}

/* Feneriaとは */
.section1 {
	width: 100%;
	max-width: 1069px;
	height: auto;
	margin: 0 auto;
	padding-bottom: 80px;
}
.section1 .section1-container {
	padding: 0 30px;
}

.about {
	margin-top: 90px;
	padding: 0 116px;
}
.about h2 {
	font-size: 48px;
	font-weight: 900;

	text-align: center;
	letter-spacing: 3px;

	color: #4776ba;
}
.about h3 {
	font-size: 32px;
	font-weight: 700;

	margin-top: 64px;

	text-align: center;
}
.about p {
	font-size: 20px;
	font-weight: 500;

	margin-top: 58px;

	letter-spacing: 0;
}

.about-wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	margin-top: 72px;
	margin-bottom: 40px;
}
.about-wrapper .about-box1 {
	width: 100%;
	max-width: 400px;
	height: auto;
	padding: 38px 32px;

	text-align: center;

	border-radius: 12px;
	-webkit-box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
	        box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
}
.about-wrapper .about-box1 h3 {
	font-size: 36px;
	font-weight: 700;

	text-align: center;

	color: #4776ba;
}
.about-wrapper .about-box1 p {
	font-size: 15px;
	font-weight: 500;

	margin-top: 32px;
}
.about-wrapper .about-box1 img {
	width: 100%;
	max-width: 336p;
	height: auto;
	margin-top: 32px;
}
.about-wrapper .about-img {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
}
.about-wrapper .about-box2 {
	width: 100%;
	max-width: 400px;
	height: auto;
	padding: 38px 32px;

	text-align: center;

	border-radius: 12px;
	-webkit-box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
	        box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
}
.about-wrapper .about-box2 h3 {
	font-size: 36px;
	font-weight: 700;

	text-align: center;

	color: #4776ba;
}
.about-wrapper .about-box2 p {
	font-size: 15px;
	font-weight: 500;

	margin-top: 32px;
}
.about-wrapper .about-box2 img {
	width: 100%;
	max-width: 117px;
	height: auto;
	margin-top: 32px;
}

.about-wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-flex-wrap: nowrap;
	    -ms-flex-wrap: nowrap;
	        flex-wrap: nowrap;

	width: 100%;
}
.about-wrapper .about-box1,
.about-wrapper .about-box2,
.about-wrapper .about-img {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 0;
	    -ms-flex: 1 1 0;
	        flex: 1 1 0;

	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	max-width: none;
}

/* Feneriaの特徴 */
.section2 {
	width: 100%;
	height: 1869px;

	background-color: #e8f4fc;
}
.section2 .section2-container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-flex-flow: column;
	    -ms-flex-flow: column;
	        flex-flow: column;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
}
.section2 .section2-container h2 {
	font-size: 48px;
	font-weight: 900;

	margin-top: 90px;

	text-align: center;
	letter-spacing: 3px;

	color: #4776ba;
}

.features-wrapper .features-box1 {
	position: relative;

	height: 532px;
	margin: 72px 80px 0 0;
	padding: 70px 0;

	border-radius: 0 12px 12px 0;
	background-color: #fff;
	-webkit-box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
	        box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
}
.features-wrapper .features-box1 .features-block1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	        justify-content: flex-end;

	margin-right: 40px;
}
.features-wrapper .features-box1 .features-block1 .features-content1 {
	margin-right: 120px;
}
.features-wrapper .features-box1 .features-block1 .features-content1 .title {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;

	margin-bottom: 50px;
}
.features-wrapper .features-box1 .features-block1 .features-content1 .title h3:first-of-type {
	font-size: 80px;
	font-weight: 900;
	line-height: 0.8;

	vertical-align: middle;

	color: #c1def4;
}
.features-wrapper .features-box1 .features-block1 .features-content1 .title h3:last-of-type {
	font-size: 28px;
	font-weight: 900;
	line-height: 150%;

	vertical-align: middle;

	color: #4776ba;
}
.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 h4 {
	font-size: 24px;
	font-weight: 700;

	margin-bottom: 20px;
}
.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 ul li {
	font-size: 18px;
	font-weight: 500;

	z-index: 999;

	margin-left: 30px;

	list-style: inside;
}
.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 ul:first-of-type {
	margin-bottom: 54px;
}
.features-wrapper .features-box2 {
	position: relative;

	display: grid;

	height: 450px;
	margin: 60px 0 0 80px;

	border-radius: 12px 0 0 12px;
	background-color: #fff;
	-webkit-box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
	        box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
}
.features-wrapper .features-box2 .features-text-area2 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;

	margin-left: 40px;
}
.features-wrapper .features-box2 .features-text-area2 .pc {
	display: inline-block;

	margin-right: 120px;
}
.features-wrapper .features-box2 .features-text-area2 .features-content2 {
	width: 100%;
	max-width: 660px;
	margin-right: 100px;
}
.features-wrapper .features-box2 .features-text-area2 .features-content2 .title {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;

	margin-bottom: 42px;
}
.features-wrapper .features-box2 .features-text-area2 .features-content2 .title h3:first-of-type {
	font-size: 80px;
	font-weight: 900;
	line-height: 0.8;

	margin-right: 20px;

	vertical-align: middle;

	color: #c1def4;
}
.features-wrapper .features-box2 .features-text-area2 .features-content2 .title h3:last-of-type {
	font-size: 28px;
	font-weight: 900;
	line-height: 150%;

	vertical-align: middle;

	color: #4776ba;
}
.features-wrapper .features-box2 .features-text-area2 .features-content2 .explanation2 p {
	font-size: 18px;

	letter-spacing: 0;
}
.features-wrapper .features-box2 .features-text-area2 .sp {
	display: none;
}
.features-wrapper .features-box3 {
	position: relative;

	height: 480px;
	margin: 60px 80px 0 0;

	border-radius: 0 12px 12px 0;
	background-color: #fff;
	-webkit-box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
	        box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
}
.features-wrapper .features-box3 .features-text-area3 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	        justify-content: flex-end;

	height: 100%;
}
.features-wrapper .features-box3 .features-text-area3 .features-content3 {
	width: 100%;
	max-width: 660px;
	margin-right: 120px;
}
.features-wrapper .features-box3 .features-text-area3 .features-content3 .title {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	        align-items: center;
	-ms-flex-align: center;

	margin-bottom: 40px;
}
.features-wrapper .features-box3 .features-text-area3 .features-content3 .title h3:first-of-type {
	font-size: 80px;
	font-weight: 900;
	line-height: 0.8;

	margin-right: 20px;

	vertical-align: middle;

	color: #c1def4;
}
.features-wrapper .features-box3 .features-text-area3 .features-content3 .title h3:last-of-type {
	font-size: 28px;
	font-weight: 900;
	line-height: 150%;

	vertical-align: middle;

	color: #4776ba;
}
.features-wrapper .features-box3 .features-text-area3 .features-content3 .explanation3 p {
	font-size: 18px;

	letter-spacing: 0;
}
.features-wrapper .features-box3 .features-text-area3 img {
	display: block;

	margin-top: 40px;
	margin-right: 40px;
}

/* 主な機能 */
.section3 {
	margin: 0 auto;
	padding: 0 30px;
}
.section3 h2 {
	font-size: 48px;
	font-weight: 900;

	margin: 90px 0 72px 0;

	text-align: center;
	letter-spacing: 0.05em;

	color: #4776ba;
}

.section3-container {
	display: grid;

	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	width: 100%;
	max-width: 1066px;
	margin: 0 auto 90px;

	grid-template-columns: repeat(3, 1fr);
	gap: 53px;
}
.section3-container .function-box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	        align-self: stretch;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;

	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	width: 100%;
	max-width: 320px;
	height: auto;
	min-height: 335px;
	padding: 40px 24px;

	text-align: center;

	border: 1px solid #4776ba;
	border-radius: 12px;
}
.section3-container .function-box h3 {
	font-size: 30px;
	font-weight: 700;

	text-align: center;

	color: #4776ba;
}
.section3-container .function-box p {
	font-size: 18px;
	font-weight: 500;

	text-align: center;
	letter-spacing: 0;

	color: #545454;
}
.section3-container .function-box img {
	display: block;

	width: 180px;
	height: auto;
	margin: 0 auto 12px;
}
.section3-container .function-box:nth-of-type(3) p {
	font-size: 16px;

	letter-spacing: -0.1em;
}
.section3-container .function-box:nth-of-type(7) h3 {
	font-size: 25px;
}

/* 今後の展開 */
.section4 {
	position: relative;

	width: 100%;
	height: 1014px;
	padding: 90px 0;

	background-color: #e8f4fc;
}
.section4 img {
	position: absolute;
	top: 125px;
	right: 100px;
}
.section4 h2 {
	font-size: 48px;
	font-weight: 900;

	margin-bottom: 72px;

	text-align: center;
	letter-spacing: 0.05em;

	color: #4776ba;
}
.section4 .section4-container {
	width: 100%;
	max-width: 1062px;
	height: 727px;
	margin: 0 auto;
	margin-bottom: 90px;
	padding: 55px 135px 0;

	border-radius: 12px;
	background-color: #fff;
}
.section4 .section4-container h3 {
	font-size: 36px;
	font-weight: 900;

	margin-bottom: 72px;

	text-align: center;
	text-decoration: underline;

	color: #4776ba;

	text-underline-offset: 8px;
	text-decoration-thickness: 1px;
}

.deployment-wrapper .deployment-box1 h4,
.deployment-wrapper .deployment-box2 h4 {
	font-size: 28px;
	font-weight: 700;

	margin-bottom: 24px;

	color: #4776ba;
}
.deployment-wrapper .deployment-box1 p,
.deployment-wrapper .deployment-box2 p {
	font-size: 20px;
	font-weight: 500;

	margin-bottom: 66px;
}
.deployment-wrapper .notice {
	margin-bottom: 63px;

	text-align: right;
}
.deployment-wrapper .notice small {
	font-size: 14px;
}

/* 導入の流れ */
.section5 {
	width: 100%;
	height: auto;
}
.section5 .section5-container {
	padding: 0 187px;
}
.section5 .section5-container h1 {
	font-size: 48px;
	font-weight: 900;

	margin-top: 90px;

	text-align: center;

	color: #4776ba;
}

.introduction-box1,
.introduction-box2 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-align: center;
	-webkit-box-align: stretch;
	-webkit-align-items: center;
	-webkit-align-items: stretch;
	        align-items: center;
	        align-items: stretch;
	-ms-flex-align: center;
	-ms-flex-align: stretch;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;
}

.introduction-box1 > img,
.introduction-box2 > img {
	width: 48px;
	height: 114px;
	margin: 166px 18px;
}

.introduction-content1,
.introduction-content2,
.introduction-content3,
.introduction-content4,
.introduction-content5 {
	width: 300px;
	height: auto;
	min-height: 466px;
	padding: 32px 16px;

	border: 1px solid #4776ba;
	border-radius: 12px;
}
.introduction-content1 .introduction-title,
.introduction-content2 .introduction-title,
.introduction-content3 .introduction-title,
.introduction-content4 .introduction-title,
.introduction-content5 .introduction-title {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	        justify-content: center;

	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.introduction-content1 .introduction-title h2,
.introduction-content2 .introduction-title h2,
.introduction-content3 .introduction-title h2,
.introduction-content4 .introduction-title h2,
.introduction-content5 .introduction-title h2 {
	font-size: 56px;
	font-weight: 900;
	line-height: 1;

	min-width: 72px;
	margin-right: 24px;

	vertical-align: middle;
	white-space: nowrap;
	letter-spacing: 0;

	color: #c1def4;
}
.introduction-content1 .introduction-title h3,
.introduction-content2 .introduction-title h3,
.introduction-content3 .introduction-title h3,
.introduction-content4 .introduction-title h3,
.introduction-content5 .introduction-title h3 {
	font-size: 22px;
	font-weight: 700;

	vertical-align: middle;
	letter-spacing: 0;
}
.introduction-content1 img,
.introduction-content2 img,
.introduction-content3 img,
.introduction-content4 img,
.introduction-content5 img {
	display: block;

	margin: 30px auto;
}
.introduction-content1 p,
.introduction-content2 p,
.introduction-content3 p,
.introduction-content4 p,
.introduction-content5 p {
	font-size: 16px;
	font-weight: 500;

	left: 0;

	letter-spacing: 0;
}

.introduction-box1 {
	margin-top: 72px;
}

.introduction-box2 {
	margin-top: 60px;
	margin-bottom: 90px;
}

/* 資料請求とお問い合わせ */
.last-section {
	width: 100%;
	height: auto;
	min-height: 538px;

	background-color: #4776ba;
}

.material-content p,
.form-block p {
	font-size: 18px;
	font-weight: 500;

	color: #4776ba;
}

.material-content h2,
.form-block h2 {
	font-size: 32px;
	font-weight: 700;

	margin-bottom: 22px;

	color: #4776ba;
}

.material-block img {
	width: 163px;
	height: 100%;
	margin: auto 0;
}

.last-container {
	width: 100%;
	max-width: 1066px;
	height: 100%;
	margin: 0 auto;
	padding: 90px 0;
}

.last-container h1 {
	font-size: 48px;
	font-weight: 900;

	margin-bottom: 60px;

	text-align: center;

	color: #fff;
}

.last-wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	margin: 0 30px;

	gap: 36px;
}

.material-box {
	width: 100%;
	max-width: 602px;
	height: auto;
	padding: 30px 24px;

	border-radius: 12px;
	background-color: #fff;
}

.material-block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;

	gap: 32px;
}

.material-content p {
	margin-bottom: 30px;
}

.form-box {
	width: 100%;
	max-width: 422px;
	height: auto;
	padding: 30px 24px;

	border-radius: 12px;
	background-color: #fff;
}

.form-block p {
	margin-bottom: 30px;
}

.dl-btn {
	font-size: 20px;
	font-weight: 700;

	position: relative;

	display: inline-block;

	width: 100%;
	padding: 11.5px 12px;

	-webkit-transition: 0.3s ease;
	        transition: 0.3s ease;
	text-align: center;

	color: #fff;
	border: 1px solid #4776ba;
	border-radius: 50px;
	background-color: #4776ba;
}
.dl-btn:hover {
	color: #4776ba;
	border: 1px solid #4776ba;
	background-color: #fff;
}

.form-btn2 {
	font-size: 20px;
	font-weight: 700;

	position: relative;

	display: inline-block;

	width: 100%;
	padding: 11.5px 12px;

	-webkit-transition: 0.3s ease;
	        transition: 0.3s ease;
	text-align: center;

	color: #4776ba;
	border: 1px solid #4776ba;
	border-radius: 50px;
	background-color: #fff;
}
.form-btn2:hover {
	color: #fff;
	border: 1px solid #4776ba;
	background-color: #4776ba;
}

@media screen and (max-width: 1290px) {
	/*メインビジュアル*/
	.main-img {
		margin-top: 100px;
		margin-left: 50px;
	}
	/*Feneriaの特徴*/
	.section2 {
		height: auto;
	}
	.features-wrapper {
		padding: 0 16px;
	}
	.features-wrapper .features-box1 {
		position: static;

		height: auto;
		margin: 72px 0 45px 0;
		padding: 32px 16px;

		border-radius: 12px;

		justify-items: center;
	}
	.features-wrapper .features-box1 .features-block1 {
		-webkit-flex-flow: column;
		    -ms-flex-flow: column;
		        flex-flow: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;

		margin: 0;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 {
		margin: 0;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .title {
		margin-bottom: 40px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 h4 {
		margin-bottom: 20px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 ul li {
		margin-left: 30px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 ul:first-of-type {
		margin-bottom: 32px;
	}
	.features-wrapper .features-box1 .features-block1 img {
		position: static;

		display: block;

		margin: 48px auto 0;
	}
	.features-wrapper .features-box2 {
		position: static;

		height: auto;
		margin: 40px 0 45px;
		padding: 32px 16px;

		border-radius: 12px;

		justify-items: center;
	}
	.features-wrapper .features-box2 .features-text-area2 {
		-webkit-flex-flow: column;
		    -ms-flex-flow: column;
		        flex-flow: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;

		margin: 0;
	}
	.features-wrapper .features-box2 .features-text-area2 .pc {
		display: none;
	}
	.features-wrapper .features-box2 .features-text-area2 .features-content2 {
		margin: 0;
	}
	.features-wrapper .features-box2 .features-text-area2 .features-content2 .title {
		margin-bottom: 40px;
	}
	.features-wrapper .features-box2 .features-text-area2 .sp {
		position: static;

		display: block;

		margin: 48px auto 0;
	}
	.features-wrapper .features-box3 {
		position: static;

		height: auto;
		margin: 40px 0 45px;
		padding: 32px 16px;

		border-radius: 12px;

		justify-items: center;
	}
	.features-wrapper .features-box3 .features-text-area3 {
		-webkit-flex-flow: column;
		    -ms-flex-flow: column;
		        flex-flow: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		        justify-content: center;

		width: 100%;
		max-width: 660px;
		margin: 0;
	}
	.features-wrapper .features-box3 .features-text-area3 .features-content3 {
		margin: 0;
	}
	.features-wrapper .features-box3 .features-text-area3 .features-content3 .title {
		margin-bottom: 40px;
	}
	.features-wrapper .features-box3 .features-text-area3 img {
		position: static;

		display: block;

		margin: 48px auto 0;
	}
	/*主な機能*/
	.section3-container {
		gap: 20px;
	}
	/*今後の展開*/
	.section4 {
		overflow: visible;

		height: auto;
		padding: 90px 16px 40px;
	}
	.section4 img {
		top: auto;
		right: 40px;
		bottom: 60px;
	}
	.section4 .section4-container {
		width: 100%;
		height: auto;
		margin-bottom: 280px;
		padding: 40px 16px;
	}
	.section4 .section4-container h3 {
		margin-bottom: 32px;
	}
	.deployment-wrapper .deployment-box1 h4,
	.deployment-wrapper .deployment-box2 h4 {
		margin-bottom: 16px;
	}
	.deployment-wrapper .deployment-box1 p,
	.deployment-wrapper .deployment-box2 p {
		margin-bottom: 48px;
	}
	.deployment-wrapper .notice {
		line-height: 100%;

		margin-bottom: 0;

		text-align: left;
	}
	.deployment-wrapper .notice small {
		line-height: 100%;
	}
}
@media screen and (max-width: 767px) {
	.pc {
		display: none;
	}
	.sp {
		display: inline-block;
	}
	/*メインビジュアル*/
	.home {
		margin: 0;
	}
	.main-visual {
		z-index: 1;

		margin-top: 0;
	}
	.main-container {
		width: 100%;
		height: 647px;
		padding: 100px 16px 0;
	}
	.main-container h2 {
		font-size: 18px;
		font-weight: 700;

		width: 100%;
		margin-bottom: 47px;

		color: #fff;
	}
	.main-container p:first-of-type {
		font-size: 20px;
		font-weight: 700;

		margin-bottom: 0;

		color: #fff;
	}
	.main-container h1 {
		font-size: 72px;
		font-weight: 900;

		margin-bottom: 20px;

		white-space: nowrap;
		letter-spacing: 3px;

		color: #fff;
	}
	.main-container p:last-child {
		font-size: 18px;
		font-weight: 700;

		letter-spacing: -1px;

		color: #fff;
	}
	.main-box {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		        justify-content: center;
	}
	.main-img {
		position: relative;

		width: 100%;
		max-width: 290px;
		height: 224px;
		margin: 40px auto 0;
		padding: 18px;
	}
	/*Feneriaとは*/
	.section1 {
		height: auto;
	}
	.about {
		margin-top: 40px;
		padding: 0 16px;
	}
	.about h2 {
		font-size: 32px;
	}
	.about h3 {
		font-size: 18px;

		margin-top: 32px;
	}
	.about p {
		font-size: 14px;

		margin-top: 28px;
	}
	.about-btn {
		padding: 40px 46px;
	}
	.about-btn a:first-of-type {
		font-size: 14px;
		font-weight: 700;

		position: relative;

		display: inline-block;

		width: 100%;
		margin-bottom: 24px;
		padding: 14px 12px;

		-webkit-transition: 0.3s ease;
		        transition: 0.3s ease;
		text-align: center;

		color: #fff;
		border: 1px solid #4776ba;
		border-radius: 50px;
		background-color: #4776ba;
	}
	.about-btn a:first-of-type:hover {
		color: #4776ba;
		border: 1px solid #4776ba;
		background-color: #fff;
	}
	.about-btn a:last-of-type {
		font-size: 14px;
		font-weight: 700;

		position: relative;

		display: inline-block;

		width: 100%;
		padding: 14px 12px;

		-webkit-transition: 0.3s ease;
		        transition: 0.3s ease;
		text-align: center;

		color: #4776ba;
		border: 1px solid #4776ba;
		border-radius: 50px;
		background-color: #fff;
	}
	.about-btn a:last-of-type:hover {
		color: #fff;
		border: 1px solid #4776ba;
		background-color: #4776ba;
	}
	.about-wrapper {
		-webkit-box-align: center;
		-webkit-align-items: center;
		        align-items: center;
		-ms-flex-align: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;

		margin-top: 40px;
		padding: 0 24px;
	}
	.about-wrapper .about-box1 {
		max-width: -webkit-fit-content;
		max-width:    -moz-fit-content;
		max-width:         fit-content;
		height: auto;
		padding: 58px 32px;
	}
	.about-wrapper .about-box1 img {
		display: block;

		width: 281px;
		height: auto;
		margin: 32px auto 0;
	}
	.about-wrapper .about-img {
		padding: 16px 0;
	}
	.about-wrapper .about-box2 {
		max-width: -webkit-fit-content;
		max-width:    -moz-fit-content;
		max-width:         fit-content;
		height: auto;
		margin-bottom: 80px;
		padding: 58px 32px;
	}
	.about-wrapper .about-box2 img {
		display: block;

		margin: 32px auto 0;
	}
	.about-box1,
	.about-box2 {
		border-radius: 12px;
		background-color: #fff;
		-webkit-box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
		        box-shadow: 0 0 8px 0 rgba(193, 222, 244, 0.6);
	}
	/*Feneriaの特徴*/
	.section2 {
		height: auto;
	}
	.section2 .section2-container h2 {
		font-size: 32px;

		margin-top: 40px;
	}
	.features-wrapper {
		padding: 0 16px;
	}
	.features-wrapper .features-box1 {
		position: static;

		height: auto;
		margin: 40px 0 45px;
		padding: 32px 16px;

		border-radius: 12px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .title {
		margin-bottom: 40px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .title h3:first-of-type {
		font-size: 32px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .title h3:last-of-type {
		font-size: 18px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 h4 {
		font-size: 16px;
		font-weight: 700;

		margin-bottom: 20px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 ul li {
		font-size: 15px;

		margin-left: 30px;
	}
	.features-wrapper .features-box1 .features-block1 .features-content1 .explanation1 ul:first-of-type {
		margin-bottom: 32px;
	}
	.features-wrapper .features-box1 .features-block1 img {
		position: static;

		display: block;

		margin: 48px auto 0;
	}
	.features-wrapper .features-box2 {
		position: static;

		height: auto;
		margin: 40px 0 45px;
		padding: 32px 16px;

		border-radius: 12px;
	}
	.features-wrapper .features-box2 .features-text-area2 .features-content2 .title {
		margin-bottom: 40px;
	}
	.features-wrapper .features-box2 .features-text-area2 .features-content2 .title h3:first-of-type {
		font-size: 32px;
	}
	.features-wrapper .features-box2 .features-text-area2 .features-content2 .title h3:last-of-type {
		font-size: 18px;
	}
	.features-wrapper .features-box2 .features-text-area2 .features-content2 .explanation2 p {
		font-size: 15px;
	}
	.features-wrapper .features-box2 .features-text-area2 img {
		position: static;

		display: block;

		margin: 48px auto 0;
	}
	.features-wrapper .features-box3 {
		position: static;

		height: auto;
		margin: 40px 0 45px;
		padding: 32px 16px;

		border-radius: 12px;
	}
	.features-wrapper .features-box3 .features-text-area3 {
		width: 100%;
		max-width: 660px;
	}
	.features-wrapper .features-box3 .features-text-area3 .features-content3 .title {
		margin-bottom: 40px;
	}
	.features-wrapper .features-box3 .features-text-area3 .features-content3 .title h3:first-of-type {
		font-size: 32px;
	}
	.features-wrapper .features-box3 .features-text-area3 .features-content3 .title h3:last-of-type {
		font-size: 18px;
	}
	.features-wrapper .features-box3 .features-text-area3 .features-content3 .explanation3 p {
		font-size: 15px;
	}
	.features-wrapper .features-box3 .features-text-area3 img {
		position: static;

		display: block;

		margin: 48px auto 0;
	}
	/*主な機能*/
	.section3 h2 {
		font-size: 32px;

		margin: 40px 0;
	}
	.section3-container {
		width: 100%;
		max-width: 358px;
		margin: 0 auto 80px;

		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.section3-container .function-box {
		max-width: 170px;
		height: 240px;
		min-height: auto;
		padding: 32px 8px;
	}
	.section3-container .function-box h3 {
		font-size: 20px;
	}
	.section3-container .function-box p {
		font-size: 13px;
	}
	.section3-container .function-box img {
		width: 75.5px;
		margin: 16px auto;
	}
	.section3-container .function-box:nth-of-type(3) p {
		font-size: 13px;
	}
	.section3-container .function-box:nth-of-type(7) h3 {
		font-size: 20px;
	}
	.section3-container .function-box:last-child {
		grid-column: 1/3;
		justify-self: center;
	}
	/*今後の展開*/
	.section4 {
		overflow: visible;

		height: auto;
		padding: 40px 16px;
	}
	.section4 img {
		top: auto;
		right: 40px;
		bottom: 100px;

		width: 220px;
		height: auto;
	}
	.section4 h2 {
		font-size: 32px;

		margin-bottom: 40px;
	}
	.section4 .section4-container {
		width: 100%;
		height: auto;
		margin-bottom: 280px;
		padding: 40px 16px;
	}
	.section4 .section4-container h3 {
		font-size: 22px;

		margin-bottom: 32px;
	}
	.deployment-wrapper .deployment-box1 h4,
	.deployment-wrapper .deployment-box2 h4 {
		font-size: 18px;

		margin-bottom: 16px;
	}
	.deployment-wrapper .deployment-box1 p,
	.deployment-wrapper .deployment-box2 p {
		font-size: 15px;

		margin-bottom: 48px;
	}
	.deployment-wrapper .notice {
		line-height: 100%;

		margin-bottom: 0;

		text-align: left;
	}
	.deployment-wrapper .notice small {
		font-size: 15px;
		line-height: 100%;
	}
	/*導入の流れ*/
	.section5 .section5-container {
		padding: 0 48px;
	}
	.section5 .section5-container h1 {
		font-size: 32px;

		margin-top: 40px;
	}
	.introduction-box1,
	.introduction-box2 {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		        align-items: center;
		-ms-flex-align: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		-webkit-justify-content: flex-start;
		        justify-content: flex-start;
	}
	.introduction-box1 > img,
	.introduction-box2 > img {
		width: 85.5px;
		height: 36px;
		margin: 24px 0;
	}
	.introduction-content1,
	.introduction-content2,
	.introduction-content3,
	.introduction-content4,
	.introduction-content5 {
		width: 300px;
		height: auto;
		min-height: auto;
		padding: 32px 16px;

		border: 1px solid #4776ba;
		border-radius: 12px;
	}
	.introduction-content1 .introduction-title,
	.introduction-content2 .introduction-title,
	.introduction-content3 .introduction-title,
	.introduction-content4 .introduction-title,
	.introduction-content5 .introduction-title {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		-webkit-justify-content: flex-start;
		        justify-content: flex-start;

		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.introduction-content1 .introduction-title h2,
	.introduction-content2 .introduction-title h2,
	.introduction-content3 .introduction-title h2,
	.introduction-content4 .introduction-title h2,
	.introduction-content5 .introduction-title h2 {
		font-size: 32px;

		min-width: 38px;
		margin-right: 16px;
	}
	.introduction-content1 .introduction-title h3,
	.introduction-content2 .introduction-title h3,
	.introduction-content3 .introduction-title h3,
	.introduction-content4 .introduction-title h3,
	.introduction-content5 .introduction-title h3 {
		font-size: 18px;
	}
	.introduction-content1 img,
	.introduction-content2 img,
	.introduction-content3 img,
	.introduction-content4 img,
	.introduction-content5 img {
		display: block;

		width: 120px;
		margin: 30px auto;
	}
	.introduction-content1 p,
	.introduction-content2 p,
	.introduction-content3 p,
	.introduction-content4 p,
	.introduction-content5 p {
		font-size: 15px;
	}
	.introduction-box1 {
		margin-top: 40px;
	}
	.introduction-box2 {
		margin-top: 0;
		margin-bottom: 90px;
	}
	/*資料請求・お問い合わせ*/
	.material-content,
	.form-block {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display:         flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		        align-items: center;
		-ms-flex-align: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;

		width: 100%;
	}
	.material-content p,
	.form-block p {
		font-size: 15px;
		font-weight: 700;

		text-align: left;
	}
	.material-content h2,
	.form-block h2 {
		font-size: 20px;
	}
	.dl-btn {
		margin-top: 32px;
	}
	.last-btn {
		font-size: 18px;

		padding: 14px 0;
	}
	.last-section {
		position: relative;
		bottom: 0;

		width: 100%;
		height: 743px;

		background-color: #4776ba;
	}
	.last-container {
		padding: 40px 16px;
	}
	.last-container h1 {
		font-size: 32px;
		font-weight: 900;

		margin-bottom: 40px;

		letter-spacing: 5%;
	}
	.last-wrapper {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;

		gap: 32px;
	}
	.material-box,
	.form-box {
		max-width: 100%;
		height: auto;
	}
	.material-content {
		-webkit-box-align: center;
		-webkit-align-items: center;
		        align-items: center;
		-ms-flex-align: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.material-box {
		padding: 38px 24px;
	}
	.material-content .last-btn {
		margin-top: 32px;
	}
	.material-content {
		gap: 0;
	}
	.material-content h2 {
		margin-bottom: 32px;
	}
	.material-content p {
		margin-bottom: 0;
	}
	.form-box {
		padding: 36px 24px;
	}
	.form-block {
		-webkit-box-align: center;
		-webkit-align-items: center;
		        align-items: center;
		-ms-flex-align: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;

		text-align: center;
	}
	.material-block img {
		display: none;
	}
	.material-content h2,
	.material-content p,
	.material-content .last-btn,
	.form-block h2,
	.form-block p,
	.form-block .last-btn {
		width: 100%;
	}
}
.fade-in {
	position: relative;
	top: 30px;

	opacity: 0;
}

.fade-in-right {
	position: relative;
	left: 100px;

	opacity: 0;
}

.fade-in-left {
	position: relative;
	left: -100px;

	opacity: 0;
}

body {
	overflow-x: hidden;
}