@charset "utf-8";
/* CSS Document */

/*html,body{
  overflow: auto;
  height: 100%;
}*/	
header #header {
     position:static!important; 
}
.lineup{
	margin-top: 50px;
	position: relative;
}
.lineup_box{
	width: 90%!important;
	margin: auto;
}
footer{
	margin-top: 80px!important;
}


.cate_wrap2 .top_img{
	cursor: pointer;
}
.cate_wrap2 .top_img::after{
	cursor: pointer;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	transition: all 1s;
	background-color: rgba(51,51,51,1);
	z-index: 9;
}
.cate_wrap2 .cate_title_box{
	 width: 90%;
    height: 50%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}
.cate_wrap2 .top_img h3{
	cursor: pointer;
	opacity: 0;
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #fff;
	z-index: 99;
	transition: all 1s;
	top: 0;
	position: absolute;
}
.cate_wrap2 .top_img h4{
	cursor: pointer;
	opacity: 0;
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #fff;
	z-index: 99;
	transition: all 1s;
	bottom: 0;
	position: absolute;
}
.cate_wrap2 .top_img:hover h3{
	opacity: 1;
}
.cate_wrap2 .top_img:hover h4{
	opacity: 1;
}
.cate_wrap2 .top_img:hover::after{
	opacity: 0.3;
}
.cate_img1{
	margin-right: 7.5px!important;
	margin-left: 7.5px;
}
.cate_item{
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 99999999;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
.cate_item::-webkit-scrollbar{
	 display:none;
}

/*.cate_item > .item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: auto;
}*/
.cate_item .close{
	position: fixed;
	top:50px;
	right: 50px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 9999999;
}
.item{
	top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}
.cate_item .close span{
	position: absolute;
	top: 50%;
	width: 100%;
	height: 1px;
	background-color: #0f284b;
}
.cate_item .close span:first-of-type{
	transform: rotate(45deg);
}
.cate_item .close span:last-of-type{
	transform: rotate(-45deg);
}
.cate_item .main_show{
	width: 100%;
	height: 500px!important;
	max-height: 500px!important;
	margin: auto;
	position: relative;
	margin-bottom: 30px;
	margin-top: 50px;
	text-align: center;
}
.cate_item .main_show figure{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
}
/*.cate_item .main_show .normal img{
	max-height: 500px!important;
	
}*/
/*.cate_item .main_show img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
}*/
.cate_item .thumbnail .cate_box{
	width: 100%;
	overflow: hidden;
}
.cate_item .thumbnail .cate_box .view{
	position: relative;
	z-index: 1;
}
.cate_item .thumbnail .cate_box .view::after{
	position: absolute;
/*	content: "view";*/
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	color: #fff;
}
.cate_item .thumbnail .cate_box .view img:hover{
	transition: all 0.3s;
	opacity: 0.5;
}
.cate_item .thumbnail .cate_box .view img{}
.square{
	position: relative;
	overflow: hidden;
	transition: all 0.5s;
/*	background-color: #000;*/
}
.square img{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.box_item{
	border:1px solid #ababab;
	padding: 20px 25px;
}
.cate_txt3{
	
}
.cate_box figure {
	border:1px solid #fff;
}
#lineup_wrap{
	display: none;
	position: fixed;
	/*max-width: 800px;
	max-height: 450px;*/
	width: 100%;
	height: 100%;
	background-color:rgba(51,51,51,0.3);
	z-index: 9999999;
	margin: auto;
	left: 0;
	right:0;
		top:0;
	bottom:0;
}

.lineup:first-of-type{
	padding-top: 0px!important;
}
@supports (-ms-ime-align:auto) { 
html,body{
  overflow: auto;
  height: 100%;
}	
body .cate_item {
   overflow: hidden;
  height: 100%;
}
body .item {
   overflow: auto;
  height: 100%;
	-ms-overflow-style:none;
}
p{
	transform: rotate(0.05deg);	
}
.item h3{
	transform: rotate(0.05deg);	
}
.item h4{
	transform: rotate(0.05deg);	
}
}
/*ここからタブレット用（768px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
.cate_item .main_show{
	height: 390px!important;
	max-height: 390px!important;
}
}
/*ここからスマホ用（667px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
html, body {
  overflow: auto;
  height: 100%;
}	
.news{
	margin-top: 60px;
}
.cate_img1{
	margin-right: 2px!important;
	margin-left: 2px;
}
.cate_img1 .cate_title1{
		display: none;
}
.cate_img1 .cate_txt1{
		display: none;
}
.cate_item{
	width: 95%;
	height: 80vh;
}
.cate_item .main_show{
	height: 220px!important;
	max-height: 220px!important;
}
.cate_item .close{
	position: absolute;
	top:10px;
	right: 20px;
}
.item{
	top: 40px;
	}
@supports (-ms-ime-align:auto) {
.cate_item .main_show {
    height: 350px !important;
    max-height: 350px !important;
}
}
}
@media screen and (max-width: 667px) and (-ms-high-contrast: none){
.cate_item .main_show {
    height: 350px !important;
    max-height: 350px !important;
}
}