.ptph
{
	top: -360px;
}


#midbox01
{
	margin-bottom: 108px;
}


#catbox
{
	display: block;
	position: relative;
	width: 960px;
	height: 200px;
	list-style: none;
	margin: 100px auto 0px auto;
	padding: 0px;
	font-size: 0px;
	line-height: 0px;
	text-align: center;
}


#catbox li
{
	display: inline-block;
	width: 140px;
	height: 200px;
	margin: 0px 28px 0px 28px;
	font-size: 0px;
	line-height: 0px;
}


#catbox li:first-child
{
	margin-left: 0px;
}


#catbox li:last-child
{
	margin-right: 0px;
}


#catbox li a
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
	text-align: center;
	vertical-align: top;
}


#catbox li a::before, #catbox li a::after
{
	content: '';
	display: block;
	position: absolute;
	bottom: 12px;
	width: 40px;
	height: 0px;
	border-top: solid 12px #717071;
}


#catbox li a::before
{
	left: calc( 50% - 40px );
	-webkit-transform: skewY( 12deg );
	transform: skewY( 12deg );
}


#catbox li a::after
{
	right: calc( 50% - 40px );
	-webkit-transform: skewY( -12deg );
	transform: skewY( -12deg );
}


#catbox li a img, #catbox li a svg
{
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 66px;
	margin: auto;
	width: 100%;
}


#catbox li a p
{
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 45px;
	margin: auto;
	width: 100%;
	height: 13px;
	font-size: 13px;
	font-weight: 900;
	line-height: 13px;
	text-align: center;
	vertical-align: top;
	color: #717071;
}


#catbox li a:hover
{
	/*
	background-color: #F18E38;
	text-shadow: 0px 0px 6px rgba( 255, 255, 255, 0.6 );
	*/
}


#catbox li a:hover::before, #catbox li a:hover::after
{
	border-top-color: #F18E38;
}


#catbox li a:hover .st0, #catbox li a:hover .st2
{
	fill: #F18E38;
}


#catbox li a:hover p
{
	color: #F18E38;
}


.cgbox
{
	display: block;
	position: relative;
	width: 960px;
	height: auto;
	margin: 120px auto 0px auto;
}


.cgbhead
{
	position: relative;
	height: 22px;
	padding: 0px 2px 5px 2px;
	font-size: 0px;
	border-bottom: solid 1px #000000;
}


.cgbhleft
{
	display: inline-block;
	position: relative;
	width: 50%;
}


.cgbhright
{
	display: inline-block;
	position: relative;
	width: 50%;
	text-align: right;
}


.cgbhleft h3
{
	display: inline-block;
	font-size: 22px;
	font-weight: 500;
	line-height: 22px;
	vertical-align: top;
}


.cgbhleft p
{
	display: inline-block;
	margin-left: 14px;
	margin-top: 9px;
	font-size: 10px;
	font-weight: 500;
	line-height: 10px;
	vertical-align: top;
	letter-spacing: 0.2em;
}


.cgbhright p
{
	display: inline-block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 500;
	line-height: 11px;
	vertical-align: top;
}


.cgbcont
{
	display: block;
	position: relative;
	list-style: none;
	min-height: 578px;
	/*max-height: 2250px;*/
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 32px 0px;
	font-size: 0px;
	line-height: 0px;
	border-bottom: solid 1px #000000;
}


.cgbcont::before
{
	content: '';
	display: block;
	position: absolute;
	left: -2048px;
	top: 0px;
	right: -2048px;
	bottom: 0px;
	margin: auto;
	width: 3072px;
	height: 100%;
	background-color: #EFEFEF;
}


.cgbcont li
{
	display: inline-block;
	position: relative;
	width: 320px;
	height: 514px;
	padding: 0px;
	margin: 32px 0px 0px 0px;
	font-size: 0px;
	line-height: 0px;
}


.cgbitem
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px auto 0px auto;
	text-decoration: none;
	color: #000000;
	-webkit-perspective: 500px;
	perspective: 500px;
	transition-duration: 150ms;
}


.cgbic
{
	display: block;
	position: absolute;
	left: -100px;
	top: -100px;
	right: -100px;
	bottom: -100px;
	margin: auto;
	width: 256px;
	height: 420px;
}


.cgbitem:hover
{
	background-color: #FFFFFF;
}


.cgbitagbox
{
	position: relative;
	height: 19px;
}


.cgbitagbox p
{
	display: inline-block;
	margin-left: 6px;
	padding: 0px 10px 0px 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	vertical-align: top;
	color: #FFFFFF;
}


.cgbitagbox p:first-child
{
	margin-left: 0px;
}


.cgbitagbox p.tag
{
	background-color: #000000;
}


.cgbitagbox p.new
{
	background-color: #E83928;
}


.cgbib
{
	display: block;
	position: relative;
	width: 256px;
	height: 207px;
	margin: 0px -6px 0px -6px;
	overflow: hidden;
	text-decoration: none;
	border: solid 6px #EFEFEF;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	transition-duration: 300ms;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}


.cgbitem:hover .cgbib
{
	border-color: #FFFFFF;
	-webkit-transform: scale( 1.0 ) rotate3d( 4, -3, 2, 40deg );
	transform: scale( 1.0 ) rotate3d( 4, -3, 2, 40deg );
	-moz-transform: scale( 0.98 ) perspective( 500px ) rotate3d( 7, -5, 3, 51deg );
	-ms-transform: scale( 0.98 ) perspective( 500px ) rotate3d( 7, -5, 3, 51deg );
	box-shadow: 24px 24px 16px -4px rgba( 0, 0, 0, 0.3 );
}


.cgbib img
{
	display: block;
	position: absolute;
	left: -200px;
	top: -200px;
	right: -200px;
	bottom: -200px;
	margin: auto;
	height: calc( 100% + 2px );
	border: 0px;
	transition-duration: 1400ms;
}


.cgbitem:hover img
{
	-webkit-transform: scale( 1.1 );
	transform: scale( 1.1 );
}


.cgbiinfo
{
	display: block;
	position: relative;
	width: 100%;
	height: 140px;
	margin-top: 16px;
}


.cgbititle
{
	display: block;
	width: 100%;
	height: 36px;
	margin: 0px 0px 0px 0px;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	vertical-align: top;
}


.cgbicom
{
	display: block;
	width: 100%;
	height: 28px;
	margin-top: 4px;
	font-size: 10px;
	font-weight: 400;
	line-height: 14px;
	text-align: justify;
	vertical-align: top;
}


.cgbicom a
{
	text-decoration: none;
	color: #38A1DB;
}


.cgbilink
{
	display: block;
	position: relative;
	height: 11px;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 11px;
	text-decoration: none;
	color: #38A1DB;
	white-space: nowrap;
}


.cgbicheck
{
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	margin: auto;
	width: 100%;
	height: 40px;
	font-size: 13px;
	font-weight: 500;
	line-height: 40px;
	text-align: center;
	vertical-align: top;
	text-decoration: none;
	color: #000000;
	border-left: solid 1px #000000;
	border-top: solid 1px #000000;
	border-right: solid 1px #000000;
	transition-duration: 300ms;
}


.cgbitem:hover .cgbicheck
{
	height: 60px;
}


.cgbicheck:hover
{
	background: -webkit-linear-gradient( top, rgba( 240, 240, 240, 1.0 ), rgba( 240, 240, 240, 0.0 ) );
	background: linear-gradient( to bottom, rgba( 240, 240, 240, 1.0 ), rgba( 240, 240, 240, 0.0 ) );
}


.cgbichiranbtn
{
	display: block;
	position: relative;
	width: 116px;
	height: 29px;
	margin: 16px 0px 0px auto;
	font-size: 17px;
	font-weight: 700;
	line-height: 29px;
	text-align: center;
	vertical-align: top;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #000000;
	transition-duration: 150ms;
}


.cgbichiranbtn:hover
{
	background-color: #333333;
	text-shadow: 0px 0px 6px rgba( 255, 255, 255, 0.3 );
}


.cgbbtn
{
	display: none;
}


.pnbox
{
	display: block;
	position: relative;
	width: 480px;
	height: 37px;
	margin: 90px auto 0px auto;
	padding: 0px;
	font-size: 0px;
	line-height: 0px;
	list-style: none;
	font-size: 0px;
	line-height: 0px;
	text-align: center;
}


.pnbox li
{
	display: inline-block;
	width: 37px;
	height: 37px;
	margin: 0px 5px 0px 5px;
	padding: 0px;
	font-size: 0px;
	line-height: 0px;
	vertical-align: top;
}


.pnbox li a.pn, .pnbox li p.pn, .pnbox li p.pn_hellip
{
	display: block;
	position: relative;
	width: 37px;
	height: 37px;
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 37px;
	text-align: center;
	vertical-align: top;
	color: #FFFFFF;
	border-radius: 11px;
	text-decoration: none;
}


.pnbox li p.pn
{
	background-color: #000000;
}


.pnbox li a.pn, .pnbox li p.pn_hellip
{
	background-color: #F18E38;
}


.pnbox li p.pn_hellip
{
	line-height: 25px;
}


.pnbox li a.pa
{
	display: block;
	position: relative;
	width: 37px;
	height: 37px;
	font-size: 19px;
	line-height: 37px;
}


.pnbox li a.pa::after
{
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 8px;
	bottom: 0px;
	width: 8px;
	height: 8px;
	margin: auto;
	border-left: solid 3px #F18E38;
	border-top: solid 3px #F18E38;
	border-right: solid 3px transparent;
	border-bottom: solid 3px transparent;
	-webkit-transform: scaleY( 1.2 ) rotate( 45deg );
	transform: scaleY( 1.2 ) rotate( 45deg );
}


.pnbox li a.pa_prev
{
	-webkit-transform: rotate( -90deg );
	transform: rotate( -90deg );
}


.pnbox li a.pa_next
{
	-webkit-transform: rotate( 90deg );
	transform: rotate( 90deg );
}