@charset "utf-8";

.ttlCategory {
    margin: 20px auto;
}
.ttlCategory .ttl{
	font-size: 28px;
	font-weight: bold;
	color: #17a1e6;
	letter-spacing: 1px;
	line-height: 1;
}
.ttlCategory .txt{
	font-size: 20px;
	color: #17a1e6;
	margin-top: 15px;
	letter-spacing: 3px;
}

@media screen and (max-width: 767px) {
	.ttlCategory .ttl{
		font-size: 40px;
		text-align: left;
		letter-spacing: 0;
	}
	.ttlCategory .txt{
		font-size: 16px;
		letter-spacing: 1px;
	}
}



/* origin */
#origin .contsIn{
	margin-bottom:50px ;
}

.originBox{
	width: 49%;
	position: relative;
}
.originBox .imgBox{
	margin-bottom: 0;
}
.originBox .imgBox img{
	border-radius: 10px;
}
#materials .imgBox img{
	border: 1px solid #cccccc;
}

.originBox .txtBox{
	margin: auto;
}
.originBox .txtBox .txtBoxWrap{
	display: block;
	padding: 15px 0 30px 0;
}
.originBox .originTtl{
	color: #17a1e6;
	font-size: 34px;
	text-align: center;
	letter-spacing: 4px;
	margin-bottom: 20px;
}
.originBox .originTxt{
	letter-spacing: 3px;
	margin-bottom: 35px;
}

.originBox .txtBox .btnOval{
	width: 235px;
}

.originBox .txtBox:hover .btnOval{
	opacity: 0.7;
}


@media screen and (max-width: 767px) {
	#origin{
		margin-top: 25px;
	}
	#origin .contsIn {
			width: 100%;
	}
	#origin .spContIn {
		width: 92%;
	}
	
	.originBox{
		margin-top: 15px;
	}
	
	.originBox .txtBox .txtBoxWrap{
		padding: 15px 7.9%;
	}
	.originBox .txtBox{
		width: 91%;
		top: -25px;
	}
	.originBox .originTtl{
		font-size: 26px;
		margin-bottom: 15px;
	}
	.originBox .originTxt{
		margin-bottom: 25px;
	}
	
	.originBox .txtBox .btnOval{
		width: 100%;
	}
	
}

/* bnrAbout */
#bnrAbout,
#bnrAbout .bnr{
	margin-bottom: 40px;
}
#bnrAbout .bnr:last-child{
	margin-bottom: 0;
}
#bnrAbout .bnr:hover{
	opacity: 0.7;
}

#bnrAbout .bnrWrap {
	display: flex;
	align-items: center;
	background: #fffaeb;
	border: 3px solid #f4c221;
	border-radius: 10px;
	padding-left: 42px;
	padding-right: 42px;
	padding-top: 20px;
	padding-bottom: 20px;
	column-gap: 70px;
}

#bnrAbout .bnrWrap .fl {
	width: calc(249 / 870 * 100%);
	margin-top: 10px;
}

#bnrAbout .bnrWrap .txtBnrEng {
	color: #17a1e6;
	font-size: 32px;
}

#bnrAbout .bnrWrap .txtBnrJp {
	color: #f4c221;
	font-size: 28px;
	font-weight: 600;
}

@media screen and (max-width: 767px) {
	#bnrAbout{
		margin-top: 30px;
		margin-bottom: 30px;
	}
	#bnrAbout .bnr{
		margin-bottom: 30px;
	}

	#bnrAbout .bnrWrap {
		display: block;
		padding-left: 4vw;
		padding-right: 4vw;
		padding-top: 24px;
		padding-bottom: 24px;
		border-radius: 5px;
	}

	#bnrAbout .bnrWrap .fl {
		width: calc(620 / 767 * 100%);
		display: block;
		margin: 0 auto;
		transform: translateX(5px);
	}

	#bnrAbout .bnrWrap .fr {
		display: block;
		width: 100%;
		margin-top: 10px;
	}

	#bnrAbout .bnrWrap .txtBnrEng {
		font-size: 4.5vw;
		font-weight: 500;

	}
	
	#bnrAbout .bnrWrap .txtBnrJp {
		font-size: 5.5vw;
		font-weight: 500;
	}
}

/* footer */
#footer .footerWrap{ border-top: 3px solid #81d5fa;}

@media screen and (max-width: 767px) {
	#footer .footerWrap{
		border: none;
	}
}