/*#################################################*/
/*################　3Dカードエリア　###############*/
/*#################################################*/
.content_card { width: 100%; height:100%; text-align:center; padding:15px 0; border-radius: 15px; }	/*（親包括要素）*/
video { width:85vw; height:auto; display:block; }
#category_1,#category_2,#category_3,#category_4,#category_5 { 					/*（カテゴリエリア共通プロパティ）*/
 	border:#CCC solid 1px;
	width: 728px; height: 354px;
	padding:15px 10px;
	background-color: #FFF;
	position:relative;
	z-index:0;
	display:inline-block;
	text-align:left;
	margin:3px 0;
	box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.3);
	border-radius: 15px;
	corner-shape: bevel;
	opacity: 0.9;
}
.title { font-size:18px; }
.annotation { font-size:9px; position:absolute; right:70px; bottom:5px; }
.card {																/*（カード共通プロパティ）*/
	width:320px;
	height:180px;
	background-color: rgba(0,133,178,0.2);
	border-radius: 7px;
	position:absolute;
	transition: all 1s 0s ease;
	transform: skewY(20deg);
}
.card_tag { position:absolute; left:10px; background-color:#FC0; font-size:12px; line-height:14px; } 			/*（カード文字共通プロパティ）*/
.card img { position:absolute; top:18px; width:80%; margin-left:10%; opacity:0.3; } 			/*（カード画像共通プロパティ）*/
.card video { width:90%; margin-top:8px; margin-left:15px; opacity:0.3; }
.card-01 { left:25px; bottom:57px; z-index:10; }
.card-02 { left:67px; bottom:67px; z-index:9; }
.card-03 { left:109px; bottom:77px; z-index:8; }
.card-04 { left:151px; bottom:87px; z-index:7; }
.card-05 { left:193px; bottom:97px; z-index:6; }
.card-06 { left:235px; bottom:107px; z-index:5; }
.card-07 { left:277px; bottom:117px; z-index:4; }
.card-08 { left:319px; bottom:127px; z-index:3; }
.card-09 { left:361px; bottom:137px; z-index:2; }
.card-10 { left:403px; bottom:147px; z-index:1; }
.card:hover {  background-color: rgba(0,133,178,0.6); z-index:11; }	/*（カード共通プロパティ）*/
.card:hover img { opacity:0.8; }	/*（カード共通プロパティ）*/
.card:hover video { opacity:1; }
.card-01:hover { transform:perspective(120px) translate3d(111px,-26px,50px) skewY(0deg); }
.card-02:hover { transform:perspective(120px) translate3d(86px,-20px,50px) skewY(0deg); }
.card-03:hover { transform:perspective(120px) translate3d(61px,-15px,50px) skewY(0deg); }
.card-04:hover { transform:perspective(120px) translate3d(37px,-9px,50px) skewY(0deg); }
.card-05:hover { transform:perspective(120px) translate3d(13px,-3px,50px) skewY(0deg); }
.card-06:hover { transform:perspective(120px) translate3d(-12px,3px,50px) skewY(0deg); }
.card-07:hover { transform:perspective(120px) translate3d(-36px,9px,50px) skewY(0deg); }
.card-08:hover { transform:perspective(120px) translate3d(-61px,15px,50px) skewY(0deg); }
.card-09:hover { transform:perspective(120px) translate3d(-85px,21px,50px) skewY(0deg); }
.card-10:hover { transform:perspective(120px) translate3d(-110px,27px,50px) skewY(0deg); }
/*　カテゴリ分けされた10枚一組の透過カードを3Dアニメーションさせる（サムネイル画像など）*/

@media screen and (min-width:565px) and (max-width:1024px){	.content_card { border-radius: 10px; } } /*（タブレット横、タブレット縦、スマホ横画面）*/
@media screen and (max-width:785px){
	#category_1,#category_2,#category_3,#category_4,#category_5 { width:529px; height: 261px; }
	.title { font-size:16px; }
	.annotation { font-size:8px; }
	.card {																/*（カード共通プロパティ）*/
		width:240px;
		height:135px;
		border-radius: 5px;
	}
	.card_tag { left:7px; font-size:11px; line-height:13px; }
	.card img { top:15px; }
	.card video { margin-top:6px; margin-left:12px; }
	.card-01 { left:15px; bottom:42px; }
	.card-02 { left:46px; bottom:50px; }
	.card-03 { left:77px; bottom:58px; }
	.card-04 { left:108px; bottom:66px; }
	.card-05 { left:139px; bottom:74px; }
	.card-06 { left:170px; bottom:82px; }
	.card-07 { left:201px; bottom:90px; }
	.card-08 { left:232px; bottom:98px; }
	.card-09 { left:263px; bottom:106px; }
	.card-10 { left:294px; bottom:114px; }
	.card-01:hover { transform:perspective(110px) translate3d(76px,-19px,50px); }
	.card-02:hover { transform:perspective(110px) translate3d(59px,-15px,50px); }
	.card-03:hover { transform:perspective(110px) translate3d(42px,-11px,50px); }
	.card-04:hover { transform:perspective(110px) translate3d(25px,-6px,50px); }
	.card-05:hover { transform:perspective(110px) translate3d(8px,-2px,50px); }
	.card-06:hover { transform:perspective(110px) translate3d(-9px,2px,50px); }
	.card-07:hover { transform:perspective(110px) translate3d(-26px,7px,50px); }
	.card-08:hover { transform:perspective(110px) translate3d(-42px,11px,50px); }
	.card-09:hover { transform:perspective(110px) translate3d(-59px,16px,50px); }
	.card-10:hover { transform:perspective(110px) translate3d(-76px,20px,50px); }
}
@media screen and (max-width:585px){
	#category_1,#category_2,#category_3,#category_4,#category_5 { width:378px; height:176px; padding:10px 5px; }
	.title { font-size:14px; }
	.annotation { font-size:7px; }
	.card {																/*（カード共通プロパティ）*/
		width:144px;
		height:81px;
		border-radius: 4px;
	}
	.card_tag { left:5px; font-size:10px; line-height:12px; }
	.card img { top:12px; }
	.card video { margin-top:4px; margin-left:7px; }
	.card-01 { left:5px; bottom:26px; }
	.card-02 { left:31px; bottom:33px; }
	.card-03 { left:57px; bottom:40px; }
	.card-04 { left:83px; bottom:47px; }
	.card-05 { left:109px; bottom:54px; }
	.card-06 { left:135px; bottom:61px; }
	.card-07 { left:161px; bottom:68px; }
	.card-08 { left:187px; bottom:75px; }
	.card-09 { left:213px; bottom:82px; }
	.card-10 { left:239px; bottom:89px; }
	.card-01:hover { transform:perspective(100px) translate3d(58px,-15px,50px); }
	.card-02:hover { transform:perspective(100px) translate3d(45px,-12px,50px); }
	.card-03:hover { transform:perspective(100px) translate3d(32px,-8px,50px); }
	.card-04:hover { transform:perspective(100px) translate3d(19px,-5px,50px); }
	.card-05:hover { transform:perspective(100px) translate3d(6px,-1px,50px); }
	.card-06:hover { transform:perspective(100px) translate3d(-7px,2px,50px); }
	.card-07:hover { transform:perspective(100px) translate3d(-20px,6px,50px); }
	.card-08:hover { transform:perspective(100px) translate3d(-33px,9px,50px); }
	.card-09:hover { transform:perspective(100px) translate3d(-46px,13px,50px); }
	.card-10:hover { transform:perspective(100px) translate3d(-59px,16px,50px); }
}
@media screen and (max-width:564px){ .content_card { border-radius: 5px; } } /*これを下回ると横幅一杯に表示*/
@media screen and (max-width:424px){
	#category_1,#category_2,#category_3,#category_4,#category_5 { width:285px; height:116px; padding:8px 3px;border-radius:10px; }
	.title { font-size:11px; }
	.annotation { font-size:4px; }
	.card {																/*（カード共通プロパティ）*/
		width:96px;
		height:54px;
		border-radius: 3px;
	}
	.card_tag { left:5px; font-size:5px; line-height:5px; }
	.card img { top:5px; }
	.card video { margin-top:3px; margin-left:5px; }
	.card-01 { left:3px; bottom:16px; }
	.card-02 { left:24px; bottom:21px; }
	.card-03 { left:45px; bottom:26px; }
	.card-04 { left:66px; bottom:31px; }
	.card-05 { left:87px; bottom:36px; }
	.card-06 { left:108px; bottom:41px; }
	.card-07 { left:129px; bottom:46px; }
	.card-08 { left:150px; bottom:51px; }
	.card-09 { left:171px; bottom:56px; }
	.card-10 { left:192px; bottom:61px; }
	.card-01:hover { transform:perspective(90px) translate3d(42px,-10px,50px); }
	.card-02:hover { transform:perspective(90px) translate3d(33px,-8px,50px); }
	.card-03:hover { transform:perspective(90px) translate3d(23px,-6px,50px); }
	.card-04:hover { transform:perspective(90px) translate3d(14px,-4px,50px); }
	.card-05:hover { transform:perspective(90px) translate3d(4px,-1px,50px); }
	.card-06:hover { transform:perspective(90px) translate3d(-5px,1px,50px); }
	.card-07:hover { transform:perspective(90px) translate3d(-14px,3px,50px); }
	.card-08:hover { transform:perspective(90px) translate3d(-24px,5px,50px); }
	.card-09:hover { transform:perspective(90px) translate3d(-33px,8px,50px); }
	.card-10:hover { transform:perspective(90px) translate3d(-42px,10px,50px); }
}

@media screen and (max-width:326px){
	#category_1,#category_2,#category_3,#category_4,#category_5 { width:224px; height:93px; padding:5px 3px; border-radius:5px; }
	.title { font-size:9px; }
	.annotation { font-size:4px; }
	.card {																/*（カード共通プロパティ）*/
		width:64px;
		height:36px;
		border-radius: 3px;
		font-size:7px;
	}
	.card_tag { left:2px; font-size:4px; line-height:4px; }
	.card img { top:4px; }
	.card video { margin-top:1.5px; margin-left:3px; }
	.card-01 { left:2px; bottom:11px; }
	.card-02 { left:20px; bottom:16px; }
	.card-03 { left:38px; bottom:21px; }
	.card-04 { left:56px; bottom:26px; }
	.card-05 { left:74px; bottom:31px; }
	.card-06 { left:92px; bottom:36px; }
	.card-07 { left:110px; bottom:41px; }
	.card-08 { left:128px; bottom:46px; }
	.card-09 { left:146px; bottom:51px; }
	.card-10 { left:164px; bottom:56px; }
	.card-01:hover { transform:perspective(80px) translate3d(31px,-8px,50px); font-size:x-small; }
	.card-02:hover { transform:perspective(80px) translate3d(24px,-7px,50px); font-size:x-small; }
	.card-03:hover { transform:perspective(80px) translate3d(17px,-5px,50px); font-size:x-small; }
	.card-04:hover { transform:perspective(80px) translate3d(11px,-3px,50px); font-size:x-small; }
	.card-05:hover { transform:perspective(80px) translate3d(4px,-1px,50px); font-size:x-small; }
	.card-06:hover { transform:perspective(80px) translate3d(-3px,1px,50px); font-size:x-small; }
	.card-07:hover { transform:perspective(80px) translate3d(-10px,3px,50px); font-size:x-small; }
	.card-08:hover { transform:perspective(80px) translate3d(-16px,5px,50px); font-size:x-small; }
	.card-09:hover { transform:perspective(80px) translate3d(-23px,7px,50px); font-size:x-small; }
	.card-10:hover { transform:perspective(80px) translate3d(-30px,9px,50px); font-size:x-small; }
}