@charset "UTF-8";
/*--------------------------------------------------------------
#main-screen
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#screen-area {
		position: fixed;
		z-index: -1;
		top: 0;
		right: 0;
		left: 0;
		bottom:0;
		overflow: hidden;
		background: #232323;
	}
	
	#video {
		position: absolute;
		z-index: -1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 177.77777778vh;
		height: 56.25vw;
		min-height: 100%;
		min-width: 100%;
		opacity: 0.2;
	}
	
	
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#screen-area {
		position: fixed;
		z-index: -1;
		top: 0;
		right: 0;
		left: 0;
		bottom:0;
		overflow: hidden;
		background: #232323;
	}
	
	#video {
		position: absolute;
		z-index: -1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 177.77777778vh;
		height: 56.25vw;
		min-height: 100%;
		min-width: 100%;
		opacity: 0.2;
	}
}


/*--------------------------------------------------------------
#bt-top-area
#bonfiber-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#bt-top-area {
		margin: 0;
		padding: 0 5% 10px 5%;
	}
	
	#bonfiber-area {
		margin: 0;
		padding: 10px 5% 0 5%;
		background: #232323;
	}
	
	#bt-top-area h3 {
		margin: 0;
		padding: 0 0 20px 0;
		font-size: 22px;
		font-weight: 600;
		text-align: left;
	}
	
	#bt-top-area h4,
	#bonfiber-area h4 {
		margin: 0;
		padding: 0 0 10px 0;
		font-size: 18px;
		font-weight: 600;
		text-align: left;
	}
	
	#bt-top-area .product h4 {
		margin: 30px 0 0 0;
		padding: 0;
		font-size: 25px;
	}
	
	#bonfiber-area p {
		text-align: left;
	}
	
	#bonfiber-area p.sub {
		font-size: 12px;
		font-weight: 500;
		padding-top: 20px;
	}
	
	#bonfiber-area p.sub span {
		display: block;
		margin: 0;
	}
	
	#bt-top-area ul,
	#bonfiber-area ul {
		margin: 0;
		padding: 20px 0 0 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#bt-top-area ul li,
	#bonfiber-area ul li{
		margin: 0 0 20px 0;
		padding: 0;
		width: 49%;
	}
	
	#bt-top-area ul dt,
	#bonfiber-area ul dt{
		margin: 0 0 5px 0;
		padding: 0;
		position: relative;
	}
	
	#bt-top-area span.right {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 50%;
		right: -30px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	#bt-top-area span.left {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 50%;
		left: -30px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	#bt-top-area ul .material-symbols-outlined {
		color: #2AB4FF;
		font-size: 50px;
		font-variation-settings:
			'FILL' 0,
			'wght' 300,
			'GRAD' 0,
			'opsz' 24
	}
	
	#bt-top-area ul dd,
	#bonfiber-area ul dd {
		margin: 0;
		padding: 0;
		text-align: center;
		font-size: 15px;
		font-weight: 600;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#bt-top-area {
		margin: 0;
		padding: 0 10% 0.73vw 10%;
	}
	
	#bonfiber-area {
		margin: 0;
		padding: 2.19vw 10% 0 10%;
		background: #232323;
	}
	
	#bt-top-area h3 {
		margin: 0;
		padding: 0 0 2.93vw 0;
		font-size: 2.56vw;
		font-weight: 600;
		text-align: center;
	}
	
	#bt-top-area h4,
	#bonfiber-area h4 {
		margin: 0;
		padding: 0 0 0.73vw 0;
		font-size: 2.05vw;
		font-weight: 600;
		text-align: center;
	}
	
	#bt-top-area .product h4 {
		margin: 0;
		padding: 40px 0 0 0;
		text-align: left;
		font-size: 2.93vw;
	}
	
	#bonfiber-area p {
		text-align: center;
	}
	
	#bonfiber-area p.sub {
		font-size: 1.02vw;
		font-weight: 500;
		padding-top: 0;
	}
	
	#bonfiber-area p.sub span {
		display: inline;
		margin: 0 20px;
	}
	
	#bt-top-area ul,
	#bonfiber-area ul {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#bt-top-area ul {
		margin: 0;
		padding: 30px 0 0 0;
	}
	
	#bonfiber-area ul {
		margin: 0;
		padding: 1.46vw 0 0 0;
	}
	
	#bt-top-area ul li,
	#bonfiber-area ul li{
		margin: 0 0 2.20vw 0;
		padding: 0;
		width: 32.5%;
	}
	
	#bt-top-area ul dt,
	#bonfiber-area ul dt{
		margin: 0 0 1.10vw 0;
		padding: 0;
		position: relative;
	}
	
	#bt-top-area span.right {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 50%;
		right: -30px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	#bt-top-area span.left {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 50%;
		left: -2.20vw;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	#bt-top-area ul .material-symbols-outlined {
		color: #2AB4FF;
		font-size: 3.66vw;
		font-variation-settings:
			'FILL' 0,
			'wght' 300,
			'GRAD' 0,
			'opsz' 24
	}
	
	#bt-top-area ul dd,
	#bonfiber-area ul dd {
		margin: 0;
		padding: 0;
		text-align: center;
		font-size: 1.17vw;
		font-weight: 600;
	}
	
}

/*--------------------------------------------------------------
#soil-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#soil-area {
		margin: 0;
		padding: 10px 5% 20px 5%;
		background: #EFEFEF;
	}
	
	#soil-area h4 {
		color: #232323;
		padding: 0 0 20px 0;
	}
	
	#soil-area ul {
		margin: 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#soil-area ul li {
		margin: 0 0 20px 0;
		padding: 0;
		width: 49%;
	}
	
	#soil-area dt {
		margin: 0 0 5px 0;
		padding: 0;
	}
	
	#soil-area dd {
		text-align: center;
		font-size: 15px;
		font-weight: 600;
		color: #232323;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#soil-area {
		margin: 0;
		padding: 2.19vw 10% 0 10%;
		background: #EFEFEF;
	}
	
	#soil-area h4 {
		color: #232323;
		padding: 0 0 1.46vw 0;
	}
	
	#soil-area ul {
		margin: 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#soil-area ul li {
		margin: 0 0 2.20vw 0;
		padding: 0;
		width: 30%;
	}
	
	#soil-area dt {
		margin: 0 0 0.73vw 0;
		padding: 0;
	}
	
	#soil-area dd {
		text-align: center;
		font-size: 1.32vw;
		font-weight: 600;
		color: #232323;
	}
}

/*--------------------------------------------------------------
#features-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#features-area {
		margin: 0;
		padding: 10px 5% 10px 5%;
		background: #FFF;
		color: #232323;
	}
	
	#features-area h4 {
		padding: 0 0 20px 0;
	}
	
	#features-area h5 {
		margin: 0 0 10px 0;
		font-size: 20px;
		font-weight: 600;
	}
	
	#features-area h6 {
		margin: 0 0 10px 0;
		padding: 5px 10px;
		font-size: 18px;
		font-weight: 600;
		background: #F5F5F5;
	}
	
	#features-area .midashi {
		margin: 0 0 10px 0;
		padding: 5px 15px;
		font-size: 18px;
		font-weight: 600;
	}
	
	#features-area .bd_blue {
		border-left: #2AB4FF solid 5px;
	}
	
	#features-area .bd_beige {
		border-left: #B59E86 solid 5px;
	}
	
	.pb20 {
		padding-bottom: 20px;
	}
	
	.pb50 {
		padding-bottom: 10px;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#features-area {
		margin: 0;
		padding: 2.19vw 10% 1.09vw 10%;
		background: #FFF;
		color: #232323;
	}
	
	#features-area h4 {
		padding: 0 0 1.83vw 0;
	}
	
	#features-area h5 {
		margin: 0 0 0.73vw 0;
		font-size: 2.05vw;
		font-weight: 600;
	}
	
	#features-area h6 {
		margin: 0 0 0.73vw 0;
		padding: 0.37vw 0.73vw;
		font-size: 1.46vw;
		font-weight: 600;
		background: #F5F5F5;
	}
	
	#features-area .midashi {
		margin: 0 0 0.73vw 0;
		padding: 0.37vw 1.10vw;
		font-size: 1.46vw;
		font-weight: 600;
	}
	
	#features-area .bd_blue {
		border-left: #2AB4FF solid 0.37vw;
	}
	
	#features-area .bd_beige {
		border-left: #B59E86 solid 0.37vw;
	}
	
	.pb20 {
		padding-bottom: 1.46vw;
	}
	
	.pb50 {
		padding-bottom: 3.66vw;
	}
	
}


/*--------------------------------------------------------------
.contents_1
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.contents_1 {
		margin: 20px 0 0 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.contents_1 li:first-child {
		margin: 0 0 20px 0;
		padding: 0;
		width: 100%;
	}
	
	.contents_1 li:first-child p {
		text-align: left;
	}
	
	.contents_1 li:last-child {
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
	.contents_1 li:last-child dt span {
		margin: 0 0 5px 0;
		padding: 5px 10px;
		display: block;
		font-size: 16px;
		font-weight: 600;
		color: #FFF;
	}
	
	.contents_1 li:last-child dt span.blue {
		background: #2AB4FF;
	}
	
	.contents_1 li:last-child dt span.beige {
		background: #B59E86;
	}
	
	.contents_1 li:last-child dd {
		margin: 0 0 5px 0;
		padding: 0;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.contents_1 {
		margin: 3.66vw 0 0 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.contents_1 li:first-child {
		margin: 0;
		padding: 0;
		width: 50%;
		
	}
	
	.contents_1 li:first-child p {
		text-align: center;
	}
	
	.contents_1 li:last-child {
		margin: 0;
		padding: 0;
		width: 45%;
	}
	
	.contents_1 li:last-child dt span {
		margin: 0 0 0.37vw 0;
		padding: 0.37vw 0.73vw;
		display: block;
		font-size: 1.46vw;
		font-weight: 600;
		color: #FFF;
	}
	
	.contents_1 li:last-child dt span.blue {
		background: #2AB4FF;
	}
	
	.contents_1 li:last-child dt span.beige {
		background: #B59E86;
	}
	
	.contents_1 li:last-child dd {
		margin: 0 0 0.37vw 0;
		padding: 0;
	}
	
}


/*--------------------------------------------------------------
.contents_2
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.contents_2 {
		margin: 30px 0 20px 0;
		padding: 0;
		
	}
	
	.contents_2 li:first-child {
		margin: 0 0 20px 0;
		padding: 0;
	}
	
	.contents_2 li:last-child {
		margin: 0;
		padding: 0;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.contents_2 {
		margin: 3.66vw 0 1.46vw 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.contents_2 li:first-child {
		margin: 0;
		padding: 0;
		width: 50%;
	}
	
	.contents_2 li:last-child {
		margin: 0;
		padding: 0;
		width: 45%;
	}
}

/*--------------------------------------------------------------
.contents_3
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.contents_3 {
		margin: 0 0 0 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.contents_3 li {
		margin: 0 0 20px 0;
		padding: 0;
		width: 100%;
	}
	
	.contents_3 li dt {
		margin: 0 0 10px 0;
		padding: 0;
	}
	
	.contents_3 li dd {
		margin: 0 0 10px 0;
		padding: 0;
		text-align: center;
		font-size: 15px;
		font-weight: 600;
	}
	
	.contents_3 li dd span img {
		width: 30px;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.contents_3 {
		margin: 0 0 2.20vw 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.contents_3 li {
		margin: 0;
		padding: 0;
		width: 48%;
	}
	
	.contents_3 li dt {
		margin: 0 0 0.73vw 0;
		padding: 0;
	}
	
	.contents_3 li dd {
		margin: 0 0 0.73vw 0;
		padding: 0;
		text-align: center;
		font-size: 1.17vw;
		font-weight: 600;
	}
	
	.contents_3 li dd span img {
		width: 2.20vw;
	}
}

/*--------------------------------------------------------------
.contents_4
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.contents_4 {
		margin: 30px 0 20px 0;
		padding: 0;
		
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.contents_4 {
		margin: 3.66vw 0 1.46vw 0;
		padding: 0;
	}
	
}

/*--------------------------------------------------------------
.column2
.column3
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.column2,
	.column3,
	.column4 {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.column2 {
		margin: 0 0 20px 0;
		padding: 0;
	}
	
	.column3,
	.column4{
		margin: 0 0 15px 0;
	}
	
	.column4 li {
		margin: 0 0 20px 0;
		padding: 0;
		width: 49%;
	}
	
	.column3 li {
		margin: 0 0 10px 0;
		padding: 0;
		width: 49%;
	}
	
	.column2 li {
		margin: 0 0 10px 0;
		padding: 0;
		width: 49%;
	}
	
	.column2 li dt,
	.column3 li dt,
	.column4 li dt{
		margin: 0 0 5px 0;
		padding: 0;
	}
	
	.column2 li dd,
	.column3 li dd,
	.column4 li dd{
		margin: 0;
		padding: 0;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
	}
	
	.column2 li dd.small{
		font-size: 12px;
	}
	
	.column2 li dd.small span{
		display: block;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.column2,
	.column3,
	.column4 {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.column2 {
		margin: 0 0 3.66vw 0;
		padding: 0;
	}
	
	.column3,
	.column4{
		margin: 0 0 1.10vw 0;
	}
	
	.column4 li {
		margin: 0;
		padding: 0;
		width: 24%;
	}
	
	.column3 li {
		margin: 0;
		padding: 0;
		width: 32%;
	}
	
	.column2 li {
		margin: 0;
		padding: 0;
		width: 49%;
	}
	
	.column2 li dt,
	.column3 li dt,
	.column4 li dt{
		margin: 0 0 0.37vw 0;
		padding: 0;
	}
	
	.column2 li dd,
	.column3 li dd,
	.column4 li dd{
		margin: 0;
		padding: 0;
		text-align: center;
		font-size: 1.17vw;
		font-weight: 600;
	}
	
	.column2 li dd.small{
		font-size: 1.17vw;
	}
	
	.column2 li dd.small span{
		padding-left: 1em;
		display:inline;
	}
	
}

/*--------------------------------------------------------------
.number
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.number {
		margin: 0 0 30px 0;
		padding: 0;
	}
	
	.number dt {
		margin: 0 0 10px 0;
		padding: 0;
		font-size: 20px;
		font-weight: 600;
	}
	
	.number dt span {
		margin: 0 10px 0 0;
		padding: 0;
		color: #2AB4FF;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	


	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.number {
		margin: 0 0 2.20vw 0;
		padding: 0;
	}
	
	.number dt {
		margin: 0 0 0.73vw 0;
		padding: 0;
		font-size: 1.83vw;
		font-weight: 600;
	}
	
	.number dt span {
		margin: 0 0.73vw 0 0;
		padding: 0;
		color: #2AB4FF;
	}
	
}