@charset "UTF-8";

#pageBody > section#mainVisual {
	position : relative;
	overflow : hidden;
	height : 800px;
	margin-bottom : 0;
}
#mainVisual .copy {
	z-index : 2;
	position : absolute;
	top : 50%;
	left : 50%;
	font-size : 1.4em;
	width : 90%;
	transform : translateX(-50%) translateY(-50%);
	text-align : center;
	color : #ffffff;
}
#mainVisual .copy .en {
	display : block;
	font-family : "Noto Serif JP", serif;
	font-size : 2em;
	font-style : italic;
}


#mvslide {
	z-index : 0;
	position : absolute;
	top : 0;
	left : 0;
	overflow : hidden;
	width : 100%;
	height : 100%;
}
#mvslide .slide {
	display : flex;
	width : 100%;
	height : 100%;
}
#mvslide .jqSlideshow_indicator {
	display : none;
	/* display : flex; */
	z-index : 2;
	position : absolute;
	bottom : 10px;
	justify-content : center;
	width : 100%;
}
#mvslide .jqSlideshow_indicator a {
	display : block;
	overflow : hidden;
	width : 8px;
	height : 8px;
	margin : 0 5px;
	transition : 0.3s ease-out;
	text-indent : 9999px;
	border : 1px solid #000000;
	border-radius : 50%;
}
#mvslide .jqSlideshow_indicator a:hover {
	background-color : #000000;
}
#mvslide .jqSlideshow_indicator a.__select {
	background-color : #cc0000;
}


#solving {
	text-align : center;
	color : #ffffff;
	background : url(/wp/wp-content/themes/pgg_bogo/top/img/bg_solving.jpg) 50% 50% no-repeat;
	background-size : cover;
}
#pageBody > section#solving > .inner {
	padding-top : 140px;
	padding-bottom : 140px;
}
#solving h2 {
	font-family : "Noto Serif JP", serif;
	font-size : 2em;
	font-style : italic;
	margin-bottom : 1em;
	transform : rotate(-10deg);
}
#solving .text {
	display : flex;
	justify-content : center;
	margin-bottom : 32px;
	text-align : left;
}
#solving .copy {
	font-family : "Noto Serif JP", serif;
	font-size : 1.4em;
	margin-bottom : 32px;
	color : #919190;
}
#solving .link {
	display : flex;
	justify-content : center;
}

#pageBody > section#business {
	margin-bottom : 0;
}
#pageBody > section#business header:first-of-type {
	display : grid;
	grid-template-columns : auto 1fr;
	grid-gap : 40px;
	margin-bottom : 80px;
}
#business header .content {
	font-size : 1.15em;
}
#business header .content h3 {
	font-size : 1.2em;
	font-weight : bold;
	margin-bottom : 1em;
	color : #103e9a;
}
#business header .content .copy {
	font-family : "Noto Serif JP", serif;
	font-size : 1.4em;
	margin-bottom : 16px;
}
#business ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 40px;
	margin-bottom : 60px;
}
#business ul > li {
	display : block;
	position : relative;
	height : 25vw;
}
#business ul > li .content {
	display : flex;
	z-index : 1;
	position : absolute;
	top : 0;
	left : 0;
	flex-direction : column;
	justify-content : center;
	width : 100%;
	height : 100%;
	padding : 32px;
	color : #ffffff;
}
#business ul > li .content h2 {
	font-size : 1.2em;
	font-weight : bold;
	margin-bottom : 32px;
}
#business ul > li .content .caption {
	font-size : 0.875em;
}

#business ul > li .img {
	z-index : 0;
	position : absolute;
	top : 0;
	left : 0;
	overflow : hidden;
	width : 100%;
	height : 100%;
}
#business ul > li .img img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#business ul > li .link {
	z-index : 1;
	position : absolute;
	right : 0;
	bottom : 0;
}
#business .link {
	display : flex;
	justify-content : center;
}
#business .spacer {
	margin-top : 100px;
}
#business .spacer img {
	width : 100%;
}

#pageBody > section#product {
	margin-bottom : 0;
	padding-top : 100px;
	padding-bottom : 100px;
	background-color : #103e9a;
}
#pageBody > section#product header:first-of-type {
	display : block;
	margin-bottom : 80px;
	text-align : center;
	color : #ffffff;
}
#product h2 {
	color : #ffffff;
}
#product h2 .en {
	color : #919190;
}
#product ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
	grid-gap : 40px;
	padding : 0 60px;
}
#product ul > li a {
	display : block;
	position : relative;
	height : 16vw;
}
#product ul > li a .name {
	z-index : 1;
	position : absolute;
	bottom : 1em;
	left : 1em;
}
#product ul > li .img {
	z-index : 0;
	position : absolute;
	top : 0;
	left : 0;
	overflow : hidden;
	width : 100%;
	height : 100%;
	background-color : #ffffff;
}
#product ul > li .img img {
	width : 100%;
	height : 100%;
	padding : 20px;
	object-fit : contain;
}


#contentList {
	padding-bottom : 100px;
	background-color : #f2f2f2;
}
#contentList .container {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 60px;
	padding : 80px;
	transform : translateY(-40px);
	background-color : #ffffff;
}
#contentList .container > .content {
	display : flex;
	position : relative;
	flex-direction : column;
	justify-content : center;
	padding : 40px 40px 65px;
	color : #ffffff;
	background-color : #000000;
}
#contentList .container > .content h2 .en {
	color : #919190;
}
#contentList .container > .content .link {
	z-index : 1;
	position : absolute;
	right : 0;
	bottom : 0;
}
#contentList .container > .content:nth-child(1) {
	grid-column : 1/3;
	grid-row : 1/2;
	background-image : url(/wp/wp-content/themes/pgg_bogo/top/img/bg_content_list_01.jpg);
	background-size : cover;
}
#contentList .container > .content:nth-child(2) {
	grid-column : 1/2;
	grid-row : 2/3;
	background-image : url(/wp/wp-content/themes/pgg_bogo/top/img/bg_content_list_02.jpg);
	background-size : cover;
}
#contentList .container > .content:nth-child(3) {
	grid-column : 2/3;
	grid-row : 2/3;
	background-image : url(/wp/wp-content/themes/pgg_bogo/top/img/bg_content_list_03.jpg);
	background-size : cover;
}
#contentList .container h2 {
	font-size : 1.4em;
	color : #ffffff;
}

#information .inner {
	display : grid;
	grid-template-columns : 12em 1fr;
	grid-gap : 60px;
}
#information .right ul > li {
	display : grid;
	grid-template-columns : auto auto 1fr;
	grid-gap : 25px;
	margin-bottom : 1em;
}
#information .right ul > li > * {
	display : flex;
	justify-content : flex-start;
	align-items : center;
}
#information .right ul > li .category span {
	display : inline-block;
	font-size : 0.825em;
	min-width : 6em;
	padding : 0.5em 0.5em;
	text-align : center;
	color : #ffffff;
	background-color : #103e9a;
}

/* --- for 2K or more pc --- */
@media screen and (min-width: 1980px) {
}

/* --- for HD pc --- */
@media screen and (min-width: 1440px) and (max-width: 1979px) {
}

/* --- for normal pc --- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
}

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#product ul {
		grid-gap : 16px;
		padding : 0 24px;
	}
	#product ul > li a {
		height : 16vw;
	}
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	#mainVisual .copy .en {
		font-size : 1.6em;
		margin-bottom : 40px;
	}
	#solving .link .linkBtn {
		width : 22em;
	}
	#pageBody > section#business header:first-of-type {
		grid-template-columns : 1fr;
	}
	#business ul {
		grid-template-columns : 1fr;
	}
	#business ul > li {
		height : 72vw;
	}
	#product ul {
		grid-template-columns : 1fr 1fr;
		grid-gap : 16px;
		padding : 0 24px;
	}
	#product ul > li a {
		height : 42vw;
	}
	#pageBody > section#product header:first-of-type {
		padding : 0 32px;
	}
	#contentList .container {
		grid-template-columns : 1fr;
		grid-gap : 24px;
		padding : 24px;
	}
	#contentList .container > .content {
		height : 72vw;
		padding : 24px;
	}
	#contentList .container > .content:nth-child(1) {
		grid-column : unset;
		grid-row : unset;
	}
	#contentList .container > .content:nth-child(2) {
		grid-column : unset;
		grid-row : unset;
	}
	#contentList .container > .content:nth-child(3) {
		grid-column : unset;
		grid-row : unset;
	}
	#information .inner {
		grid-template-columns : 1fr;
	}
	#information .right ul > li {
		grid-template-columns : 6em 1fr;
		grid-gap : 0.5em 1em;
		padding : 1em 0;
	}
	#information ul > li .date {
		grid-column : 1/2;
		grid-row : 1/2;
	}
	#information ul > li .category {
		grid-column : 2/3;
		grid-row : 1/2;
	}
	#information ul > li .text {
		grid-column : 1/3;
		grid-row : 2/3;
		padding : 0;
	}
}