@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');
[data-fixed] {
	padding : 0 10px;
	position : relative;
	z-index : 1;
}
@media screen and (min-width: 768px), print {
	[data-fixed] {
		padding : 0 20px;
	}
}
@media screen and (min-width: 1024px), print {
	[data-fixed] {
		padding : 0 30px;
		max-width : 1200px;
		margin : 0 auto;
		-webkit-box-sizing : content-box;
		        box-sizing : content-box;
	}
}

.u-mainv {
	padding-top : 70px;
	padding-bottom : 100px;
	background : url(../../../info/images/bg_mainv_sp.jpg) bottom center no-repeat;
	background-size : cover;
}
@media screen and (min-width: 1024px), print {
	.u-mainv {
		padding-top : 90px;
		padding-bottom : 155px;
		background-image : url(../../../info/images/bg_mainv_pc.jpg);
	}
}
.u-mainv .mainv-inner {
	padding : 0 10px;
}
@media screen and (min-width: 1024px), print {
	.u-mainv .mainv-inner {
		padding : 0 30px;
		max-width : 1200px;
		margin : 0 auto;
		-webkit-box-sizing : content-box;
		        box-sizing : content-box;
	}
}
.u-mainv .mainv-inner .mainv-logo {
	text-align : center;
}
.u-mainv .mainv-inner .mainv-logo img {
	width : 310px;
}
@media screen and (min-width: 1024px), print {
	.u-mainv .mainv-inner .mainv-logo img {
		width : 560px;
	}
}

.u-nav {
	background-color : #000;
	padding-bottom : 30px;
}
@media screen and (min-width: 1024px), print {
	.u-nav {
		padding-bottom : 75px;
	}
}
.u-nav .nav-link {
	-webkit-transform : translateY(-35px);
	    -ms-transform : translateY(-35px);
	        transform : translateY(-35px);
}
@media screen and (min-width: 768px), print {
	.u-nav .nav-link {
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-ms-flex-wrap : wrap;
		    flex-wrap : wrap;
		margin : 0 -4px;
	}
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link {
		-webkit-transform : translateY(-60px);
		    -ms-transform : translateY(-60px);
		        transform : translateY(-60px);
	}
}
@media screen and (min-width: 768px), print {
	.u-nav .nav-link > li {
		width : calc(100% / 2);
		padding : 0 4px;
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
	}
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li {
		width : calc(100% / 4);
	}
}
.u-nav .nav-link > li > a {
	font-size : 28.8px;
	font-size : 1.8rem;
	font-weight : bold;
	font-family : 'Josefin Sans', sans-serif;
	letter-spacing : 0.02em;
	line-height : 1.25;
	color : #fff;
	display : block;
	text-shadow : 0 0 10px rgba(0, 0, 0, 0.2);
	padding : 24px 20px;
	position : relative;
	overflow : hidden;
	width : 100%;
	word-break : break-all;
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a {
		font-size : 2.2rem;
		padding : 30px 20px;
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
}
.u-nav .nav-link > li > a:before {
	position : absolute;
	content : '';
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	background-position : center;
	background-repeat : no-repeat;
	background-size : cover;
}
.u-nav .nav-link > li > a span {
	display : block;
	position : relative;
	padding-right : 25px;
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a span {
		padding-right : 30px;
		width : 100%;
	}
}
.u-nav .nav-link > li > a span:after {
	position : absolute;
	content : '';
	top : 0;
	bottom : 0;
	right : 0;
	margin : auto;
	background : url(../../../info/images/i_arrow.svg) center no-repeat;
	width : 15px;
	height : 9.5px;
	background-size : 100% auto;
	filter : url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="10" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.2)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
	filter : drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a span:after {
		width : 20px;
		height : 13px;
	}
}
.u-nav .nav-link > li > a span > br {
	display : none;
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a span > br {
		display : block;
	}
}
.u-nav .nav-link > li > a.durability:before {
	background-image : url(../../../info/images/p_btn_durability_sp.jpg);
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a.durability:before {
		background-image : url(../../../info/images/p_btn_durability_pc.jpg);
	}
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a.durability:hover:before {
		background-image : url(../../../info/images/p_btn_durability_pc_on.jpg);
	}
}
.u-nav .nav-link > li > a.performance:before {
	background-image : url(../../../info/images/p_btn_performance_sp.jpg);
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a.performance:before {
		background-image : url(../../../info/images/p_btn_performance_pc.jpg);
	}
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a.performance:hover:before {
		background-image : url(../../../info/images/p_btn_performance_pc_on.jpg);
	}
}
.u-nav .nav-link > li > a.ease:before {
	background-image : url(../../../info/images/p_btn_ease_sp.jpg);
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a.ease:before {
		background-image : url(../../../info/images/p_btn_ease_pc.jpg);
	}
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a.ease:hover:before {
		background-image : url(../../../info/images/p_btn_ease_pc_on.jpg);
	}
}
.u-nav .nav-link > li > a.ecology:before {
	background-image : url(../../../info/images/p_btn_ecology_sp.jpg);
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a.ecology:before {
		background-image : url(../../../info/images/p_btn_ecology_pc.jpg);
	}
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li > a.ecology:hover:before {
		background-image : url(../../../info/images/p_btn_ecology_pc_on.jpg);
	}
}
.u-nav .nav-link > li:nth-child(n+2) {
	margin-top : 10px;
}
@media screen and (min-width: 768px), print {
	.u-nav .nav-link > li:nth-child(n+2) {
		margin-top : 0;
	}
}
@media screen and (min-width: 768px), print {
	.u-nav .nav-link > li:nth-child(n+3) {
		margin-top : 8px;
	}
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-link > li:nth-child(n+3) {
		margin-top : 0;
	}
}
.u-nav .nav-txt {
	line-height : 2;
	color : #fff;
}
@media screen and (min-width: 1024px), print {
	.u-nav .nav-txt {
		max-width : 900px;
		margin : 10px auto 0;
	}
}

.u-diagonal {
	position : relative;
}
.u-diagonal .diagonal-bg {
	position : absolute;
	-webkit-transform : skewY(-7deg);
	    -ms-transform : skewY(-7deg);
	        transform : skewY(-7deg);
	overflow : hidden;
	top : calc(-1 * 100vw * 0.1228);
	bottom : 0;
	left : 0;
	right : 0;
}
.u-diagonal .diagonal-bg:before {
	position : absolute;
	content : '';
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	-webkit-transform : skewY(7deg);
	    -ms-transform : skewY(7deg);
	        transform : skewY(7deg);
	-webkit-transform-origin : left bottom;
	    -ms-transform-origin : left bottom;
	        transform-origin : left bottom;
}
.u-diagonal:nth-child(odd) .diagonal-bg {
	-webkit-transform : skewY(7deg);
	    -ms-transform : skewY(7deg);
	        transform : skewY(7deg);
}
.u-diagonal:nth-child(odd) .diagonal-bg:before {
	-webkit-transform : skewY(-7deg);
	    -ms-transform : skewY(-7deg);
	        transform : skewY(-7deg);
	-webkit-transform-origin : right bottom;
	    -ms-transform-origin : right bottom;
	        transform-origin : right bottom;
}

#u-durability {
	padding-top : 55px;
	padding-bottom : 80px;
	z-index : 3;
}
@media screen and (min-width: 1024px), print {
	#u-durability {
		padding-top : 105px;
		padding-bottom : 190px;
	}
}
#u-durability .diagonal-bg {
	top : calc(-1 * 50vw * 0.1228);
}
#u-durability .diagonal-bg:before {
	background : url(../../../info/images/bg_durability_sp.jpg) bottom center no-repeat;
	background-size : cover;
}
@media screen and (min-width: 1024px), print {
	#u-durability .diagonal-bg:before {
		padding-top : 135px;
		padding-bottom : 285px;
		background-image : url(../../../info/images/bg_durability_pc.jpg);
	}
}
@media screen and (min-width: 1024px), print {
	#u-durability [data-fixed] {
		position : relative;
	}
	#u-durability .u-txt-ttl2 {
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : end;
		-ms-flex-pack : end;
		justify-content : flex-end;
		position : relative;
		z-index : 1;
	}
	#u-durability .u-list-cat, #u-durability .u-box-tech {
		margin-left : auto;
		padding-left : 30px;
	}
	#u-durability .u-box-img {
		position : absolute;
		left : 30px;
		top : 50%;
		width : calc(50% - 60px);
		-webkit-transform : translateY(-50%);
		    -ms-transform : translateY(-50%);
		        transform : translateY(-50%);
	}
}

#u-performance {
	padding-top : 75px;
	padding-bottom : 80px;
	z-index : 2;
}
@media screen and (min-width: 1024px), print {
	#u-performance {
		padding-top : 185px;
		padding-bottom : 195px;
	}
}
#u-performance .diagonal-bg:before {
	background : url(../../../info/images/bg_performance_sp.jpg) bottom center no-repeat #000;
	background-size : cover;
}
@media screen and (min-width: 1024px), print {
	#u-performance .diagonal-bg:before {
		background-image : url(../../../info/images/bg_performance_pc.jpg);
		background-position : right top;
	}
}
@media screen and (min-width: 1024px), print {
	#u-performance .u-list-cat, #u-performance .u-box-tech {
		padding-right : 30px;
	}
}

#u-ease {
	padding-top : 80px;
	padding-bottom : 80px;
	z-index : 1;
}
@media screen and (min-width: 1024px), print {
	#u-ease {
		padding-top : 195px;
		padding-bottom : 190px;
	}
}
#u-ease .diagonal-bg:before {
	background : url(../../../info/images/bg_ease_sp.jpg) bottom center no-repeat;
	background-size : cover;
}
@media screen and (min-width: 1024px), print {
	#u-ease .diagonal-bg:before {
		background-image : url(../../../info/images/bg_ease_pc.jpg);
	}
}
@media screen and (min-width: 1024px), print {
	#u-ease [data-fixed] {
		position : relative;
	}
	#u-ease .u-txt-ttl2 {
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : end;
		-ms-flex-pack : end;
		justify-content : flex-end;
	}
	#u-ease .u-list-cat, #u-ease .u-box-tech {
		margin-left : auto;
		padding-left : 30px;
	}
	#u-ease .u-box-img {
		position : absolute;
		left : 30px;
		top : 50%;
		width : calc(50% - 60px);
		-webkit-transform : translateY(-50%);
		    -ms-transform : translateY(-50%);
		        transform : translateY(-50%);
	}
}

#u-ecology {
	padding-top : 80px;
	padding-bottom : 60px;
	position : relative;
}
@media screen and (min-width: 1024px), print {
	#u-ecology {
		padding-top : 190px;
		padding-bottom : 120px;
	}
}
#u-ecology .ecology-bg {
	position : absolute;
	overflow : hidden;
	top : calc(-1 * 50vw * 0.1228);
	bottom : 0;
	left : 0;
	right : 0;
	background : url(../../../info/images/bg_ecology_sp.jpg) bottom right no-repeat;
	background-size : cover;
}
@media screen and (min-width: 1024px), print {
	#u-ecology .ecology-bg {
		background-image : url(../../../info/images/bg_ecology_pc.jpg);
	}
}
@media screen and (min-width: 1024px), print {
	#u-ecology .u-box-img {
		position : absolute;
		right : 30px;
		bottom : 0;
		width : calc(50% - 60px);
		padding : 0 50px;
	}
}
#u-ecology .u-box-img img {
	width : 290px;
}
@media screen and (min-width: 1024px), print {
	#u-ecology .u-box-img img {
		width : auto;
	}
}
@media screen and (min-width: 1024px), print {
	#u-ecology [data-fixed] {
		position : relative;
	}
	#u-ecology .u-list-cat, #u-ecology .u-box-tech {
		padding-right : 30px;
	}
}

#u-message {
	padding-top : 60px;
	padding-bottom : 60px;
	background : url(../../../info/images/bg_message_sp.jpg) top center no-repeat;
	background-size : cover;
	position : relative;
	z-index : 2;
}
@media screen and (min-width: 1024px), print {
	#u-message {
		padding-top : 105px;
		padding-bottom : 110px;
		background-image : url(../../../info/images/bg_message_pc.jpg);
	}
}
#u-message .message-inner {
	padding : 0 30px;
}
@media screen and (min-width: 1024px), print {
	#u-message .message-inner {
		max-width : 900px;
		margin : 0 auto;
		padding : 0 30px;
		-webkit-box-sizing : content-box;
		        box-sizing : content-box;
	}
}
#u-message .message-inner .message-ttl {
	text-align : center;
	font-family : 'Josefin Sans', sans-serif;
	font-weight : bold;
	color : #fff;
	line-height : 1.25;
	letter-spacing : 0.02em;
	font-size : 48px;
	font-size : 3.0rem;
}
@media screen and (min-width: 1024px), print {
	#u-message .message-inner .message-ttl {
		font-size : 4.8rem;
	}
}
#u-message .message-inner .message-txt {
	font-size : 25.6px;
	font-size : 1.6rem;
	font-family : SuzukiPROBold;
	letter-spacing : 0.03em;
	line-height : 1.5;
	color : #fff;
	margin-top : 20px;
	text-align : center;
}
@media screen and (min-width: 1024px), print {
	#u-message .message-inner .message-txt {
		font-size : 2.4rem;
	}
}

.u-txt-ttl2 {
	text-align : center;
	font-family : 'Josefin Sans', sans-serif;
	font-weight : bold;
	color : #fff;
	line-height : 1.25;
	letter-spacing : 0.02em;
	font-size : 56px;
	font-size : 3.5rem;
}
@media screen and (min-width: 1024px), print {
	.u-txt-ttl2 {
		text-align : left;
		font-size : 10.0rem;
		line-height : 1.1;
	}
}

.u-list-cat {
	margin-top : 35px;
}
@media screen and (min-width: 1024px), print {
	.u-list-cat {
		margin-top : 25px;
		width : 50%;
	}
}
.u-list-cat li span {
	display : inline-block;
	font-size : 28.8px;
	font-size : 1.8rem;
	letter-spacing : 0.03em;
	font-family : SuzukiPROBold;
	background-color : #000;
	color : #fff;
	line-height : 1.5;
	padding : 7px 15px 7px 20px;
	margin-left : 10px;
	position : relative;
}
@media screen and (min-width: 1024px), print {
	.u-list-cat li span {
		font-size : 2.4rem;
		padding-left : 25px;
		padding-right : 25px;
		margin-left : 15px;
	}
}
.u-list-cat li span:before {
	position : absolute;
	content : '';
	left : -10px;
	top : 0;
	bottom : 0;
	margin : auto;
	height : 2px;
	width : 20px;
	background-color : #c0c0c0;
}
@media screen and (min-width: 1024px), print {
	.u-list-cat li span:before {
		width : 30px;
		left : -15px;
	}
}
.u-list-cat li span > br {
	display : none;
}
@media screen and (min-width: 1024px), print {
	.u-list-cat li span > br {
		display : block;
	}
}
.u-list-cat li:nth-child(n+2) {
	margin-top : 15px;
}
@media screen and (min-width: 1024px), print {
	.u-list-cat li:nth-child(n+2) {
		margin-top : 20px;
	}
}
.u-list-cat.cat-bg-white li span {
	color : #000;
	background-color : #fff;
}

.u-box-tech {
	margin-top : 30px;
}
@media screen and (min-width: 1024px), print {
	.u-box-tech {
		margin-top : 40px;
		width : 50%;
	}
}
.u-box-tech .tech-inner {
	border-top : solid 10px #000;
	background-color : rgba(255, 255, 255, 0.5);
	padding : 20px 10px;
}
@media screen and (min-width: 768px), print {
	.u-box-tech .tech-inner {
		padding-left : 20px;
		padding-right : 20px;
	}
}
@media screen and (min-width: 1024px), print {
	.u-box-tech .tech-inner {
		border-width : 8px;
		padding : 25px;
	}
}
.u-box-tech .tech-inner .tech-list {
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-ms-flex-wrap : wrap;
	    flex-wrap : wrap;
	margin : 0 -5px;
}
@media screen and (min-width: 768px), print {
	.u-box-tech .tech-inner .tech-list {
		margin : 0 -10px;
	}
}
.u-box-tech .tech-inner .tech-list li {
	width : calc(100% / 5);
	padding : 0 5px;
}
@media screen and (min-width: 768px), print {
	.u-box-tech .tech-inner .tech-list li {
		width : calc(100% / 6);
		padding : 0 10px;
	}
}
.u-box-tech .tech-inner .tech-list li:nth-child(n+6) {
	margin-top : 10px;
}
@media screen and (min-width: 768px), print {
	.u-box-tech .tech-inner .tech-list li:nth-child(n+6) {
		margin-top : 0;
	}
}
@media screen and (min-width: 768px), print {
	.u-box-tech .tech-inner .tech-list li:nth-child(n+7) {
		margin-top : 20px;
	}
}
.u-box-tech .tech-inner .tech-list li a {
	display : block;
}
@media screen and (min-width: 1024px), print {
	.u-box-tech .tech-inner .tech-list li a {
		background-color : #fff;
		border-radius : 10px;
	}
}
.u-box-tech .tech-inner .tech-list li a img {
	-webkit-transition : all 0.2s ease-out;
	        transition : all 0.2s ease-out;
	width : 100%;
}
@media screen and (min-width: 1024px), print {
	.u-box-tech .tech-inner .tech-list li a:hover img {
		opacity : 0.6;
		-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
	}
}

.u-box-img {
	margin-top : 20px;
	text-align : center;
}
@media screen and (min-width: 1024px), print {
	.u-box-img {
		width : 50%;
		margin-top : 0;
	}
}