@charset "UTF-8";

main > section#mainVisual {
	height : clamp(540px, 40vw, 1360px);
	margin-bottom : 120px;
}
#mainVisual {
	position : relative;
}
#mainVisual .copy {
	position : absolute;
	top : 50%;
	left : 50%;
	width : 90%;
	transform : translateX(-50%) translateY(-50%);
	text-align : center;
	color : #ffffff;
}
#mainVisual .copy h2 {
	font-size : 2.4em;
	font-weight : bold;
	margin-bottom : 0.25em;
}

#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 : 7em;
	justify-content : center;
	width : 100%;
}
#jqslideshow .jqSlideshow_indicator a {
	display : block;
	overflow : hidden;
	width : 16px;
	height : 16px;
	margin : 0 5px;
	transition : 0.3s ease-out;
	text-indent : 9999px;
	border : 2px solid #ffffff;
	border-radius : 50%;
	background-color : #999999;
}
#jqslideshow .jqSlideshow_indicator a:hover {
	background-color : #418582;
}
#jqslideshow .jqSlideshow_indicator a.__select {
	background-color : #356260;
}


#mainVisual .info {
	display : grid;
	grid-template-columns : auto 1fr;
	grid-gap : 24px;
	position : absolute;
	right : 0;
	bottom : 0;
	align-items : center;
	width : 60%;
	padding : 1.5em;
	border-top : 4px solid #2d64af;
	border-left : 4px solid #2d64af;
	border-radius : 1em 0 0 0;
	background-color : #ffffff;
}
#mainVisual .info h3 {
	font-size : 1em;
	font-weight : bold;
	padding-right : 1em;
	color : #2d64af;
	border-right : 1px solid #dddddd;
}
#mainVisual .info ul > li {
	display : grid;
	grid-template-columns : 7em 1fr;
	grid-gap : 1em;
}
#mainVisual .info ul > li:not(:last-child) {
	margin-bottom : 0.5em;
}
#mainVisual .info h3 {
	font-family : "Oswald";
}
#mainVisual .info .date {
	font-weight : bold;
}
#mainVisual .info .title {
	overflow : hidden;
	width : 100%;
}
#mainVisual .info a {
	display : block;
	overflow : hidden;
	width : 100%;
	cursor : pointer;
	text-decoration : none;
	text-overflow : ellipsis;
	white-space : nowrap;
}
#mainVisual .info a:hover {
	text-decoration : underline;
}
#mainVisual .info_popup {
	display : none;
}

#merit header {
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	margin-bottom : 40px;
	text-align : center;
}
#merit header h2 {
	font-size : 2em;
	font-weight : bold;
	margin-bottom : 0.5em;
}
#merit .img {
	z-index : -1;
	position : relative;
}
#merit .img img {
	width : 100%;
}
#merit .text {
	position : relative;
	margin : 0 60px;
	margin-top : -80px;
	padding : 2.5em 2em 4em;
	text-align : center;
	border : 4px solid #2d64af;
	border-radius : 32px;
	background-color : #ffffff;
}
#merit .text::before {
	display : block;
	position : absolute;
	top : 0;
	right : 0;
	content : url("/wp/wp-content/themes/paginagrafico/top/img/img_merit_illust.png");
	transform : translateX(50%) translateY(-50%);
}
#merit .text h3 {
	font-size : 1.4em;
	margin-bottom : 0.5em;
}
#merit .link {
	display : flex;
	z-index : 1;
	position : relative;
	justify-content : center;
	margin-top : -2em;
}
#merit .link a {
	font-weight : bold;
	padding : 1em 3em;
	text-align : center;
	text-decoration : none;
	color : #2d64af;
	border : 4px solid #2d64af;
	border-radius : 32px;
	background-color : #ffffff;
}


#business {
	margin-bottom : 0;
	padding : 140px 0;
	background : url("/wp/wp-content/themes/paginagrafico/top/img/bg_business_text.png") 90% 95% no-repeat;
	background-color : #f0f9ff;
}
#business > .inner {
	display : grid;
	grid-template-columns : 1fr 40%;
	grid-gap : 40px;
	position : relative;
}
#business > .inner::before {
	display : block;
	position : absolute;
	top : -160px;
	right : 0;
	content : url("/wp/wp-content/themes/paginagrafico/top/img/img_business_illust.png");
}
#business h2 {
	font-size : 2em;
	font-weight : bold;
	margin-bottom : 1.5em;
}
#business .copy {
	font-size : 1.4em;
	font-weight : bold;
	margin-bottom : 1em;
}
#business .link {
	margin-top : 2em;
}
#business .link a {
	display : inline-block;
	font-weight : bold;
	padding : 1em 3em;
	text-align : center;
	text-decoration : none;
	color : #2d64af;
	border : 4px solid #2d64af;
	border-radius : 32px;
	background-color : #ffffff;
}
#business .imgs {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 32px;
}
#business .imgs img {
	width : 100%;
}


#separator img {
	width : 100%;
}


#products > .inner {
	max-width : 100%;
}
#products header {
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	margin-bottom : 40px;
	text-align : center;
}
#products header h2 {
	display : flex;
	font-size : 2em;
	font-weight : bold;
	align-items : center;
	margin-bottom : 1em;
}
#products header h2 span {
	position : relative;
	margin : 0 2em;
	padding-bottom : 0.5em;
}
#products header h2 span::after {
	display : block;
	position : absolute;
	bottom : 0;
	left : 50%;
	width : 2em;
	height : 4px;
	content : "";
	transform : translateX(-50%);
	border-radius : 2px;
	background-color : #2d64af;
}
#products .imgs {
	display : flex;
}
#products .imgs > li:not(:last-child) {
	margin-right : 24px;
}
#products .imgs img {
	width : 100%;
}


#menu {
	padding : 100px 0;
	background-color : #f0f9ff;
}
#menu > .inner {
	display : grid;
	grid-gap : 32px;
}
#menu > .inner > .content {
	padding : 60px 40px;
	color : #ffffff;
	background-color : #aaaaaa;
}
#menu > .inner > .content:nth-child(1) {
	display : flex;
	grid-column : 1 / 3;
	grid-row : 1 / 2;
	align-items : center;
	background : url(/wp/wp-content/themes/paginagrafico/top/img/img_quality.jpg) 0 0 no-repeat;
	background-size : cover;
}
#menu > .inner > .content:nth-child(1) * {
	width : 50%;
}
#menu > .inner > .content:nth-child(2) {
	grid-column : 1 / 2;
	grid-row : 2 / 3;
	background : url(/wp/wp-content/themes/paginagrafico/top/img/img_company.jpg) 0 0 no-repeat;
	background-size : cover;
}
#menu > .inner > .content:nth-child(3) {
	grid-column : 2 / 3;
	grid-row : 2 / 3;
	background : url(/wp/wp-content/themes/paginagrafico/top/img/img_recruit.jpg) 0 0 no-repeat;
	background-size : cover;
}
#menu h2 {
	font-size : 1.6em;
	font-weight : bold;
}



#topinfo {
	margin-bottom : 180px;
}
#topinfo header {
	display : grid;
	grid-template-columns : 1fr auto;
	grid-gap : 32px;
	margin-bottom : 32px;
}
#topinfo header h2 {
	font-size : 2em;
	font-weight : bold;
}
#topinfo header .link a {
	display : inline-block;
	font-weight : bold;
	padding : 1em 3em;
	text-align : center;
	text-decoration : none;
	color : #2d64af;
	border : 4px solid #2d64af;
	border-radius : 32px;
	background-color : #ffffff;
}
#topinfo ul {
	border-top : 1px solid #999999;
}
#topinfo ul > li {
	display : grid;
	grid-template-columns : 7.5em auto 1fr;
	grid-gap : 1.5em;
	padding : 1.5em;
	border-bottom : 1px solid #999999;
}
#topinfo ul > li .date {
	font-weight : bold;
	text-align : center;
	color : #777777;
}
#topinfo ul > li .category span {
	padding : 0.25em 1.5em;
	border : 2px solid #2d64af;
	border-radius : 1.5em;
	background : #ffffff;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
	#jqslideshow .jqSlideshow_indicator {
		bottom : 32px;
	}
	main > section#mainVisual {
		height : 72vw;
		margin-bottom : 160px;
	}
	#mainVisual .copy h2 {
		font-size : 1.4em;
	}
	#mainVisual .info {
		grid-template-columns : 1fr;
		grid-gap : 4px;
		width : 100%;
		padding : 24px;
		transform : translateY(100%);
		border-bottom : 1px solid #dddddd;
		border-left : none;
		border-radius : 0;
	}
	#mainVisual .info h3 {
		padding-right : 0;
		border-right : none;
	}

	#merit .text {
		margin-top : -32px;
		margin-right : 0;
		margin-left : 0;
	}
	#merit .text::before {
		transform : translateX(25%) translateY(-50%);
	}
	#business {
		padding : 60px 0 200px;
		background-size : 80%;
	}
	#business > .inner {
		grid-template-columns : 1fr;
		grid-gap : 32px;
	}
	#business > .inner::before {
		top : -80px;
		right : 24px;
	}

	#products header h2 img {
		display : none;
	}
	#menu > .inner > .content:nth-child(2) {
		grid-column : 1 / 3;
		grid-row : 2 / 3;
	}
	#menu > .inner > .content:nth-child(3) {
		grid-column : 1 / 3;
		grid-row : 3 / 4;
	}
	#menu > .inner > .content {
		padding : 40px 24px;
		background-color : #aaaaaa;
	}
	#menu > .inner > .content:nth-child(1) {
		display : block;
	}
	#menu > .inner > .content:nth-child(1) * {
		width : auto;
	}
	#menu h2 {
		font-size : 1.2em;
	}
	#topinfo header {
		grid-template-columns : 1fr;
	}
	#topinfo header h2 {
		margin : 0;
		text-align : center;
	}
	#topinfo header h2::after {
		left : 50%;
		transform : translateX(-50%);
	}
	#topinfo header .link {
		text-align : center;
	}
	#topinfo ul > li {
		grid-template-columns : auto 1fr;
		padding : 1em;
	}
	#topinfo ul > li .title {
		grid-column : 1/3;
		grid-row : 2/3;
	}
}