@charset "utf-8";
/* CSS Document */

/*==========
変数
==========*/
:root {
	--bg_color1: #FFF;
	--bg_color2: #F3F3F3;
	--font_color1: #292929;
	--main_color: #D6FF33;
	--main_color_transparent: rgb(214 255 51 / 14%);
	--sub_color1: #34c288;
	--border_color1: #777777;
	--footer_color: #000000;
	--a_color: #29A6FF;
	--a_hover_color: #D6FF33;
}

/*==========
共通
==========*/
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	height: 100%;
	overflow-x: hidden;
}

body {
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--font_color1);
	font-feature-settings: "palt"1;
	-webkit-text-size-adjust: 100%;
	background-color: var(--bg_color1);
	position: relative;
	margin: 0;
	overflow-wrap: break-word;
	min-height: 100svh;
}

a {
	color: var(--a_color);
	text-decoration: none;
}

a:hover,
a:active {
	color: var(--a_hover_color);
}

body {
	animation: fade .3s;
}

@keyframes fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

img {
	max-width: 100%;
	height: auto;
}

.wrap {
	width: 100%;
	background-color: var(--bg_color1);
}

.container {
	width: 96%;
	margin-inline: auto;
}

@media (min-width: 768px) {
	body {
		font-size: 1.65rem;
	}

	.wrap {
		width: 600px;
		margin-inline: auto;
	}

	.container {
		width: 92%;
	}

}


/*==========
MV
==========*/
.mv {}

@media (min-width: 768px) {
	.mv {}
}


/*==========
高速スキャナレンタルのご案内
==========*/
.top_message {
	padding: 5rem 0 6rem;
	background-color: var(--bg_color2);
	text-align: center;
}

.top_message h2 {
	font-size: 3.2rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 3rem;
}

.top_message img {
	font-size: 3.2rem;
	width: 78%;
}

.top_message p {
	font-weight: 600;
	text-align: center;
	line-height: 1.6;
	font-size: 1.8rem;
}

@media (min-width: 768px) {
	.top_message {
		padding: 7rem 0 15rem;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.top_message .container {
		width: 600px;
	}

	.top_message h2 {
		font-size: 2.8rem;
	}

	.top_message p {
		line-height: 1.65;
	}
}


/*==========
BUZZスキャナーの特色
==========*/
.features {
	padding: 5rem 0 10rem;
	background-color: var(--main_color);
}

.features h2 {
	font-size: 2.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 4rem;
}

.features_wrap {
	display: flex;
	flex-direction: column;
	gap: 6rem;
}

.features_wrap .item {
	text-align: center;
}

.features_wrap .item header {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 2rem;
}

.features_wrap .item header span.no {
	font-size: 6rem;
}

.features_wrap .item img {
	width: 54%;
	margin-bottom: 2rem;
}

.features_wrap .item h3 {
	font-size: 3rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 1rem;
}

.features_wrap .item p {
	font-size: 1.7rem;
	line-height: 1.5;
	font-weight: 600;
}

@media (min-width: 768px) {
	.features {
		padding: 7rem 0 15rem;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.features_wrap {
		width: 450px;
		margin: 0 auto;
	}

}


/*==========
従来のもぎり方法と比較
==========*/
.compare {
	padding: 6rem 0 10rem;
}

.compare h2 {
	font-size: 2.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 4rem;
}

.compare_wrap {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.compare_wrap .item {
	position: relative;
}

.compare_wrap .item:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 28px;
	background-color: var(--main_color);
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.compare_wrap .item:first-child img {
	width: 84%;
	margin-bottom: 12px;
	transform: translateX(28px);
}

.compare_wrap .item p {
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	margin-top: 12px;
}

.compare table {
	margin-top: 66px;
	background-color: var(--bg_color2);
	width: 100%;
}

.compare table th,
.compare table td {
	padding: 15px 9px;
	border: solid 1px var(--border_color1);
}

.compare table thead th {
	text-align: center;
}

.compare table tbody td {
	text-align: center;
}

thead th:nth-child(3) {
	background-color: var(--main_color);
}

tbody td:nth-child(3) {
	background-color: var(--main_color_transparent);
}



/*==========
レンタル内容
==========*/
.price {
	padding: 5rem 0 10rem;
}

.price h2 {
	font-size: 2.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 4rem;
}

.price table {
	width: 90%;
	margin: 0 auto 1rem;
	border: solid 2px var(--border_color1);
}

.price table caption {
	text-align: center;
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 2rem;
}

.price table th,
.price table td {
	padding: 2rem;
	border: solid 2px var(--border_color1);
	vertical-align: middle;
}

.price table th {
	text-align: center;
	background-color: var(--main_color);
}

.price table td span {
	font-size: 2.4rem;
	font-weight: 600;
}

.price p {
	width: 90%;
	margin: 0 auto;
	line-height: 1.6;
}


/*==========
お申し込み方法
==========*/
.offer {
	padding: 5rem 0 10rem;
	background-color: var(--main_color);
}

.offer h2 {
	font-size: 2.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 4rem;
}

.offer .item {
	background-color: #FFF;
	padding: 3rem 0 5rem;
	border-radius: 12px;
}

.offer .item p {
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 2rem;
}

.offer .item p span {
	color: #FF0000;
}


@media (min-width: 768px) {
	.offer {
		padding: 7rem 0 15rem;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.offer .item {
		width: 580px;
		margin: 0 auto;
	}

}


/*==========
お申し込み方法
==========*/
.flow {
	padding: 5rem 0 10rem;
	background-color: var(--bg_color2);
}

.flow h2 {
	font-size: 2.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 4rem;
}

.flow_wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 42px;
}

.flow_wrap .item {
	border: solid 3px var(--border_color1);
	padding: 2rem 2rem 3rem;
	position: relative;
	border-radius: 12px;
	background-color: #FFF;
}

.flow_wrap .item:not(:last-child)::after {
	content: "";
	position: absolute;
	bottom: -38px;
	left: calc(50% - 4px);
	transform: translateX(-50%);
	width: 8px;
	height: 30px;
	background-color: var(--border_color1);
}

.flow_wrap .item h4 {
	font-size: 2.4rem;
	font-weight: 600;
	margin-bottom: 1rem;
	inline-size: fit-content;
	margin-inline: auto;
	background: linear-gradient(transparent 50%, var(--main_color) 50%);
	padding: 0px 12px 9px;
}

.flow_wrap .item p {
	line-height: 1.6;
	font-size: 1.7rem;
}

.flow_wrap .item p span {
	color: #FF0000;
}

@media (min-width: 768px) {
	.flow {
		padding: 7rem 0 15rem;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.flow_wrap {
		width: 600px;
		margin: 0 auto;
	}

}


/*==========
フッター
==========*/
.fixed_footer {
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #000000;
	padding: 2rem 0;
}

.fixed_footer h4 {
	color: var(--main_color);
	font-size: 1.7rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 1rem;
}

.fixed_footer p {
	text-align: center;
	color: #FFF;
	margin-bottom: 1rem;
}

.line_btn {
	background-color: #06C755;
	width: 78vw;
	max-width: 420px;
	height: 66px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0 auto;
	border-radius: 50vmax;
}

.line_btn span {
	color: #FFF;
	font-weight: 600;
	font-size: 1.7rem;
}

.line_btn:hover,
.line_btn:active {
	background-color: #97d433;
}

.line_btn:focus {
	background-color: #06C755;
}

@media (min-width: 768px) {
	.line_btn {
		max-width: 400px;
		height: 72px;
	}

}


/*==========
フッター
==========*/
.site_footer {
	background-color: var(--footer_color);
	padding: 60px 0 170px;
}

.site_footer .container {
	width: 84%;
}

.footer_text_link {
	margin-bottom: 7rem;
}

.footer_text_link li {
	margin-bottom: 3rem;
}

.footer_text_link li a {
	color: #FFF;
	font-size: 2rem;
	font-weight: 600;
}

.footer_text_link2 {
	display: flex;
	justify-content: center;
	gap: 60px;
}

.footer_text_link2 li a {
	color: #FFF;
	font-size: 1.6rem;
	font-weight: 600;
}

.footer_text_link li a:hover,
.footer_text_link li a:active,
.footer_text_link2 li a:hover,
.footer_text_link2 li a:active {
	color: var(--a_hover_color);
}


.site_footer_copyright {
	font-size: 1.35rem;
	color: #FFF;
	text-align: center;
	margin-top: 6rem;
}

@media (min-width: 768px) {
	.site_footer .container {
		width: 580px;
	}
}




/*==========
利用規約ページ
==========*/
.term {
	padding: 5rem 0 10rem;
}

.term h1 {
	font-size: 2.4rem;
	font-weight: 600;
	inline-size: fit-content;
	margin-inline: auto;
	background: linear-gradient(transparent 50%, var(--main_color) 50%);
	padding: 0px 12px 9px;
}

.term p {
	font-size: 1.6rem;
	line-height: 1.75;
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.term p {
		font-size: 1.8rem;
		line-height: 1.9;
		margin-top: 4.5rem;
	}
}

.term .section_link {
	margin-top: 5rem;
}

.section_link {
	display: grid;
	place-items: center;
	background-color: var(--main_color);
	height: 66px;
	width: 78vw;
	max-width: 420px;
	margin: 0 auto;
	border-radius: 50vmax;
}

.section_link span {
	color: #000;
	font-weight: 700;
}




/*==========
404
==========*/
.not_found {
	height: 100vh;
	padding-top: 60px;
}

.not_found h1 {
	font-size: 2.4rem;
	font-weight: 600;
	inline-size: fit-content;
	margin-inline: auto;
	background: linear-gradient(transparent 50%, var(--main_color) 50%);
	padding: 0px 12px 9px;
	margin-bottom: 3rem;
}

.not_found_body p {
	line-height: 1.65;
	margin-bottom: 60px;
}