@charset "UTF-8";


#jqslideshow {
	z-index : 0;
	position : relative;
	overflow : hidden;
	width : 100%;
	height : 100%;
}
#jqslideshow .slide {
	display : flex;
	width : 100%;
	height : 100%;
}
#jqslideshow .slide img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#jqslideshow .loader {
	display : flex;
	z-index : 1;
	position : absolute;
	justify-content : center;
	align-items : center;
	width : 400px;
	height : 360px;
	transition : 0.3s ease-out;
}
#jqslideshow .loader::after {
	width : 30px;
	height : 30px;
	content : "";
	transform : translateZ(0);
	animation : load 1.1s infinite linear;
	border-top : 4px solid #3153ad;
	border-right : 4px solid #3153ad;
	border-bottom : 4px solid #3153ad;
	border-left : 4px solid #ffffff;
	border-radius : 50%;
}
#jqslideshow .loader.__loadcomplete {
	visibility : hidden;
	opacity : 0;
}
@keyframes load {
	0% {
		transform : rotate(0deg);
	}
	100% {
		transform : rotate(360deg);
	}
}
#jqslideshow .jqSlideshow_indicator {
	display : flex;
	z-index : 2;
	position : absolute;
	bottom : 4em;
	justify-content : center;
	width : 100%;
}
#jqslideshow .jqSlideshow_indicator a {
	display : block;
	overflow : hidden;
	width : 12px;
	height : 12px;
	margin : 0 5px;
	transition : 0.3s ease-out;
	text-indent : 9999px;
	border : 2px solid #ffffff;
	border-radius : 50%;
	background-color : #777777;
}
#jqslideshow .jqSlideshow_indicator a:hover {
	background-color : #f3edd7;
}
#jqslideshow .jqSlideshow_indicator a.__select {
	background-color : #f3edd7;
}

main > section#mainVisual {
	height : clamp(540px, 40vw, 1360px);
	margin-bottom : 0;
}
#mainVisual {
	position : relative;
}
#mainVisual .copy {
	position : absolute;
	top : 50%;
	right : 100px;
	font-family : "Libre Baskerville", serif;
	transform : cal(translateY(-50%) - 91px);
	color : #000000;

	filter : drop-shadow(1px 0px 5px #ffffff);
}
#mainVisual .copy h2 {
	font-size : 4vw;
	font-weight : bold;
}

/* features */
#features {
	position : relative;
	padding-top : 80px;
	padding-bottom : 80px;
	background : url(/wp/wp-content/themes/paginagrafico/top/img/bg_feature.png) 110% -80px no-repeat;
	background-size : 40%;
}
#features::after {
	display : block;
	z-index : 0;
	position : absolute;
	bottom : 0;
	left : 0;
	width : calc(50% + 610px);
	height : 60%;
	content : "";
	border-radius : 0 40px 40px 0;
	background : url(/wp/wp-content/themes/paginagrafico/common/img/bg_dot_gr.png) repeat;
}
#features > .inner {
	z-index : 1;
	position : relative;
	padding-bottom : 80px;
}
#features header {
	margin-bottom : 40px;
}
#features header h2 {
	font-weight : bold;
	margin-bottom : 0.5em;
}
#features .img {
	z-index : -1;
	position : relative;
}
#features .img img {
	width : 100%;
}
#features .content {
	width : 50%;
}
#features .text {
	margin-bottom : 40px;
}

/* business */
#business {
	position : relative;
}
#business::after {
	display : block;
	z-index : -1;
	position : absolute;
	top : 0;
	right : 0;
	width : 50%;
	height : 100%;
	content : "";
	background : #f3edd7;
}
#business > .inner {
	padding : 80px;
	border-radius : 40px;
	background : url(/wp/wp-content/themes/paginagrafico/top/img/bg_business.png) -20px -30px no-repeat #f3edd7;
}
#business header {
	margin-bottom : 40px;
}
#business .content {
	width : 50%;
}
#business .content .text {
	margin-bottom : 32px;
}
#business .img {
	display : block;
	position : absolute;
	top : 50%;
	right : 0;
	width : 50%;
	height : 80%;
	transform : translateY(-50%);
}
#business .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}


#products header {
	display : grid;
	grid-template-columns : auto auto 1fr;
	grid-gap : 32px;
	margin-bottom : 40px;
}

#products header .hl02 {
	margin : 0;
}
#products header .linkBtn {
	width : auto;
}

#products #itemlist {
	position : relative;
}
#products #itemlist .item {
	margin : 0 10px;
}
#products #itemlist .item a {
	text-decoration : none;
}
#products #itemlist .item .img {
	overflow : hidden;
	margin-bottom : 12px;
	border-radius : 20px;
}
#products #itemlist .item .img img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#products #itemlist  .item .category {
	font-weight : bold;
	line-height : 1;
	margin-bottom : 0.5em;
}
#products #itemlist  .item .name {
	line-height : 1;
}

#products #itemlist.slick {
	padding-bottom : 40px;
}
#products #itemlist .slick-list {
	overflow : visible;
}
#products #itemlist .prev-arrow {
	display : flex;
	z-index : 2;
	position : absolute;
	top : 50%;
	left : 40px;
	font-weight : bold;
	justify-content : center;
	align-items : center;
	width : 3em;
	height : 3em;
	cursor : pointer;
	transform : translateX(-50%) translateY(-50%);
	color : #ffffff;
	border-radius : 50%;
	background-color : rgba(0, 0, 0, 0.4);
}
#products #itemlist .next-arrow {
	display : flex;
	z-index : 2;
	position : absolute;
	top : 50%;
	right : 40px;
	font-weight : bold;
	justify-content : center;
	align-items : center;
	width : 3em;
	height : 3em;
	cursor : pointer;
	transform : translateX(-50%) translateY(-50%);
	color : #ffffff;
	border-radius : 50%;
	background-color : rgba(0, 0, 0, 0.4);
}
#products #itemlist .slick-dots {
	z-index : 2;
	position : absolute;
	top : 100%;
	left : 50%;
	overflow : hidden;
	height : 8px;
	transform : translateX(-50%) translateY(-50%);
}
#products #itemlist .slick-dots {
	display : flex;
	justify-content : center;
}
#products #itemlist .slick-dots > li {
	position : relative;
	overflow : hidden;
	width : 8px;
	height : 8px;
	margin : 0 4px;
	border-radius : 8px;
}
#products #itemlist .slick-dots .slick-active button {
	border : 1px solid #d3a226;
	background-color : #d3a226;
}
#products #itemlist .slick-dots button {
	position : absolute;
	top : 0;
	overflow : hidden;
	width : 8px;
	height : 8px;
	cursor : pointer;
	text-indent : 999px;
	border : 1px solid #777777;
	border-radius : 8px;
	background-color : #000000;
}
#products #itemlist .slick-dots button:hover {
	background-color : #dddddd;
}

#oem {
	position : relative;
}
#oem > .inner {
	display : grid;
	grid-template-columns : 1fr 1fr;
	padding : 0;
}
#oem .img {
	overflow : hidden;
	border-radius : 40px 0 0 40px;
}
#oem .img img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#oem .content {
	display : flex;
	flex-direction : column;
	justify-content : center;
	padding : 80px;
	border-radius : 0 40px 40px 0;
	background-color : #f3edd7;
}
#oem .content .text {
	margin-bottom : 40px;
}


#company {
	position : relative;
}
#company::after {
	display : block;
	z-index : -1;
	position : absolute;
	right : 0;
	bottom : 0;
	width : 100%;
	height : calc(100% - 40px);
	content : "";
	background-color : #f3edd7;
}
#company > .inner {
	display : grid;
	grid-template-columns : 1fr 1fr;
	padding : 0 0 40px;
}
#company > .inner > header {
	display : flex;
	justify-content : center;
	align-items : center;
	width : 100%;
	height : 100%;
	border-radius : 40px 0 0 40px;
	background-color : #d3a226;
}
#company > .inner > header .hl02 {
	margin : 0;
	text-align : center;
}
#company > .inner > .img {
	overflow : hidden;
	border-radius : 0 40px 40px 0;
}
#company > .inner > .img img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}

#topinfo > .inner > header {
	display : flex;
	justify-content : space-between;
}
#topinfo ul {
	border-top : 1px solid #cccccc;
}
#topinfo ul > li {
	display : grid;
	grid-template-columns : 8em 8em 1fr;
	grid-gap : 16px;
	padding : 1em 1.5em;
	border-bottom : 1px solid #cccccc;
}
#topinfo ul > li > * {
	display : flex;
	align-items : center;
}
#topinfo .date {
	font-family : "Zen Kaku Gothic New", sans-serif;
	font-size : 1.125em;
	justify-content : center;
}
#topinfo .category a {
	display : block;
	padding : 0.5em 1em;
	text-align : center;
	text-decoration : none;
	border : 1px solid #000000;
	border-radius : 3em;
	background-color : #ffffff;
}
#topinfo .title a {
	text-decoration : none;
}

#recruit {
	position : relative;
}
#recruit > .inner {
	padding : 80px;
}
#recruit::after {
	display : block;
	z-index : -1;
	position : absolute;
	top : 0;
	right : 0;
	width : calc(50% + 610px);
	height : 100%;
	content : "";
	border-radius : 40px 0 0 40px;
	background : url(/wp/wp-content/themes/paginagrafico/common/img/bg_dot_gr.png) repeat;
}
#recruit .content {
	width : 50%;
}
#recruit .content .text {
	margin-bottom : 40px;
}

@media screen and (min-width: 1921px) {
	#recruit::after {
		width : calc(50% + 990px);
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
	#features {
		background-position : 110% -60px;
	}
	#features .content {
		width : 100%;
	}
	#business > .inner {
		padding : 40px;
		border-radius : 0;
		background-size : 70%;
	}
	#business .content {
		width : 100%;
	}
	#business .img {
		display : none;
	}
	#products header {
		grid-template-columns : 1fr auto;
	}
	#products header .hl02 {
		letter-spacing : 0.05em;
	}
	#products header .linkBtn {
		padding-right : 1.8em;
		padding-left : 1.8em;
	}
	#products header .text {
		grid-column : 1/3;
	}
	#company > .inner > header {
		border-radius : 0;
	}
	#company > .inner > header .hl02 {
		font-size : 1.4em;
	}
	#company > .inner > .img {
		border-radius : 0;
	}

	#topinfo > .inner > header .hl02 {
		line-height : 1.2;
	}
	#topinfo > .inner > header .linkBtn {
		font-size : 0.825em;
		width : auto;
		padding-right : 1.5em;
		padding-left : 1.5em;
	}
	#topinfo ul > li {
		display : grid;
		grid-template-columns : 6.5em 1fr;
		grid-gap : 8px;
		padding-right : 0;
		padding-left : 0;
	}
	#topinfo .date {
		justify-content : flex-start;
	}
	#topinfo .category {
		justify-content : flex-start;
	}
	#topinfo .title {
		grid-column : 1 / 3;
	}

	#oem > .inner {
		display : grid;
		grid-template-columns : 1fr;
	}
	#oem .img {
		border-radius : 0;
	}
	#oem .content {
		padding : 40px;
		border-radius : 0;
	}
	#recruit > .inner {
		padding : 40px;
	}
	#recruit .content {
		width : 100%;
	}
}