@charset "utf-8";
/* CSS Document */

/*----------------------------------------
	LHT_viewer
-----------------------------------------*/



#LHT_viewer {
	/*min-width: 1200px;
	width: 100%;*/
	height: 100%;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background-image: url("../images/loader.gif");
	background-repeat: no-repeat;
	background-position: 50% 80px;
}

.LHT_shadow{
	width:100%;
	min-width:1200px;
	position:absolute;
	bottom:0px;
	left:0px;
	background-repeat:repeat-x;
	background-position:top left;
}


#LHT_viewer ul {
	margin:0px;
	padding:0px;
	list-style:none;
    width:100%;
    height:100%;
 
}

#LHT_viewer li {
    position:absolute;
    display:none;
    left:0px;
    top:0px;
    height:auto;
    width:100%;
}


#LHT_viewer img {
     width:100%;
     height:auto;
}

/*トップページ内　お知らせ
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new {
	width: 100%;
	margin: 30px 0px 30px 0px;
	padding:20px 0px 20px 0px;
	background-color: #f5f5f5;  /*テスト的に背景色をいれてます */ 
}

#new #newbox {
	max-width: 1000px;
	width: 100%;  
	margin-right: auto;
	margin-left: auto;
	background-color: #999999;  /*テスト的に背景色をいれてます */
}

#new #newtitle {
	float:left;
	/*width: 130px;*/
	/*background-color: #888888;  テスト的に背景色をいれてます */
	margin-right: 10px;
	text-decoration: underline;
	font-size: 1.5em;
}

#new #newinfo {
	float:left;
	line-height: 1.5;
	/*background-color: #999999;  テスト的に背景色をいれてます */
}
#new #newinfo .newday {
    float:left;
    width: 100px;
	vertical-align:middle;
	padding: 0px 0px 12px 0px;
}
#new #newinfo .newicon {
    float:left;
    width: 130px;
	vertical-align:middle;
	padding: 0px 0px 12px 0px;
}
#new #newinfo .newcomment {
    float:left;
    width: 700px;
	vertical-align:middle;
	padding: 0px 0px 12px 0px;
}

#new #newinfo .newcomment a {
	color: #000000;	
}

#new #newinfo .newcomment a:hover {
	color: #9d9d9d;	
}

#new .newinfo_kako {
	width: 100%;
	text-align: right;
	margin-bottom: 20px;
}

#new .newinfo_kako a {
	color: #416d42;	
}

/* お知らせは768px(スマホ)は改行して下線追加 */
@media(max-width: 1050px){
	#new #newinfo {
		margin: 0px 6px 0px 6px;
		width: 99%;
	}

	#new #newinfo .newday {
		padding: 12px 0px 0px 0px;
	}
	#new #newinfo .newicon {
		padding: 12px 0px 0px 0px;
	}    
	#new #newinfo .newcomment {
	    width: 100%;
		padding: 0px 0px 0px 0px;
		border-bottom: solid 1px #000000;
		clear: both;
	}
	#new #newtitle {
		width: 100%;
		text-align: center;
		margin: 0px;
		clear: both;
	}
}


/*トップページ内　おすすめ
---------------------------------------------------------------------------*/
.osusume {
	 margin:0px auto;
}
.osusume_aria {
     width:32%;
	 float:left;
}
.osusume_aria img {
     width:100%;
}

.osusume .space {
     margin: 0 2%;

}

/*トップページ内　おすすめマスク関係
---------------------------------------------------------------------------*/
.osusume_aria {
     overflow: hidden;
     position: relative;
}
.osusume_aria .caption {
	font-size: 110%;
	text-align: center;
	color: #fff;
}
.osusume_aria .mask1 {
	width: 96%;
	height: 96%;
	position: absolute;
	top: 2%;
	left: 2%;
	opacity: 0;	/* マスクを表示しない */
	background-color: rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition: all 0.6s ease;
}

.osusume_aria .caption h4 {
	font-size: 98%;
	padding: 30px 0px 12px 0px;
	color: #FFFFFF;
	line-height: 120%;
	font-weight: bold;
}

.osusume_aria .caption p {
	width: 96px;
	font-size: 82%;
	margin: 30px auto 0px auto;
	color: #FFFFFF;
	line-height: 160%;
	border: 1px solid #FFFFFF;	/*font-weight: bold;*/
}

.osusume_aria .mask2 {
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}

.osusume_aria:hover .mask1 {
	opacity:		1;	/* マスクを表示する */
}
.osusume_aria:hover .mask2 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		20px;	/* ホバーで下にずらす */
}



/* トップヘッダー 1200ピクセル以上は広がらないように */
@media(max-width: 1200px){
	.osusume {
		width: 100%;
	}
}

@media(min-width: 1200px){
	.osusume {
		 width: 1200px;
	}
}

/* おすすめは768px(スマホ)は改行して１列表示 */
@media(max-width: 768px){
	.osusume_aria {
		 width:100%;
		 clear: both;
	}
	.osusume .space {
		 margin: 2% 0;
	
	}
	.osusume_aria .caption {
		 visibility: visible;	/* 文字を表示する */
	}
	.osusume_aria .caption h4 {
		opacity: 1;
		font-size: 100%;
		padding-top: 48%;
		/*line-height: 120%;*/
		font-weight: bold;
		
	}
	.osusume_aria:hover .caption h4 {
		 opacity: 1; /* 文字を表示する */
	}


	.osusume_aria .caption p {
		opacity: 0;	/* 文字を表示する */

	}

	.osusume_aria:hover .caption p {
		 opacity: 0;	/* 文字を表示する */
	}

	.osusume_aria .mask1,.osusume_aria:hover .mask1 {
		/*top: -50%;	 枠の上に置いて表示させない */
	}

	.osusume_aria .mask2 {
	    /*bottom: -30%;  枠の下に置いて表示させない */
    }
	.osusume_aria:hover .mask2 {
	    /*bottom: -30%;  上にずらして表示する */
    }

	.osusume_aria .mask1 {
		 width: 100%;
		 left: 0;
	}
	
	.osusume_aria .mask1 {
		opacity: 1;	/* マスクを表示する */
		top: 85%;	/* 枠の上に置いて表示させない */
		height: 15%;
	}

	.osusume_aria .caption h4 {
		padding-top: 2%;
	}	

	.osusume_aria:hover .mask2 {
		padding-top: 0px;	/* ホバーで下にずらす */
	}

}


/*トップページ内　カテゴリーに直リンク
---------------------------------------------------------------------------*/
.categorylink {
	 margin:0px auto;
}
.categorylink_aria_wide {
     width:32.92%;
	 float:left;
	 overflow: hidden;
     position: relative;
	 margin-left: 0.1%;
	 margin-bottom: 0.1%;
}
.categorylink_aria_mini {
     width:16.466666665%;
	 float:left;
	 overflow: hidden;
     position: relative;
	 margin-left: 0.1%;
	 margin-bottom: 0.1%;
}
.categorylink img {
     width: 100%;
	 height: 100%;
}

.categorylink_aria_wide .category_linkcaption {
     width: 100%;
     height: 100%;
     padding: 30px 10px 0px 10px;
	 visibility: visible;
     top: 0;
     left: 0;
     position: absolute;
     text-align: center;
	 font-weight: bold;
}

.categorylink_aria_wide .caption, .categorylink_aria_mini .caption {
     text-align: center;
}

.categorylink_aria_wide .caption h4, .categorylink_aria_mini .caption h4 {
	font-size: 98%;
	padding-top: 30px;
	padding-left: 0px;
	margin-bottom: 6px;
	border-bottom: solid 1px #FFFFFF;
	color: #FFF;
	line-height: 120%;
	font-weight: bold;
}

.categorylink_aria_wide .caption p, .categorylink_aria_mini .caption p {
	font-size: 70%;
	padding-top: 50px;
	color: #FFF;
	line-height: 100%;
	border-bottom: solid 1px #FFFFFF;
}


.categorylink_aria_wide .mask1, .categorylink_aria_mini .mask1 {
	width: 96%;
	height: 96%;
	position: absolute;
	top: 2%;
	left: 2%;
	opacity: 0;	/* マスクを表示しない */
	background-color: rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition: all 0.6s ease;
}

.categorylink_aria_wide .mask2, .categorylink_aria_mini .mask2 {
	-webkit-transition:	all 0.6s ease;
	transition: all 0.6s ease;
}

.categorylink_aria_wide:hover .mask1, .categorylink_aria_mini:hover .mask1  {
	opacity: 1;	/* マスクを表示する */
}
.categorylink_aria_wide:hover .mask2, .categorylink_aria_mini:hover .mask2 {
	opacity: 1;	/* マスクを表示する */
	padding: 20px 0px 0px 0px;	/* ホバーで下にずらす */
}

/* トップヘッダー 1200ピクセル以上は広がらないように */
@media(max-width: 1000px){
	.categorylink_aria_wide {
		 width:49.6%;
	}
	.categorylink_aria_mini {
		 width:24.8%;
	}
}
/* カテゴリーに直リンク １列表示 */
@media(max-width: 768px){
	.categorylink_aria_wide {
		 width:100%;
	     margin-left: 0%;
	     margin-bottom: 0%;
	}
	.categorylink_aria_mini {
		 width:50%;
	     margin-left: 0%;
	     margin-bottom: 0%;
	}

	.categorylink_aria_wide .category_linkcaption h4 {
		 font-size: 140%;
		 line-height: 160%;
	}
	
	.categorylink_aria_wide .category_linkcaption p {
		 font-size: 110%;
		 line-height: 140%;
	}
	
	.categorylink_aria_wide .caption, .categorylink_aria_mini .caption {
		 visibility: visible;	/* 文字を表示する */
	}
	.categorylink_aria_wide .caption h4 {
		opacity: 1;
		font-size: 100%;
		padding-top: 43%;
		/*line-height: 120%;*/
		font-weight: bold;
		
	}
	.categorylink_aria_mini .caption h4 {
		opacity: 1;
		font-size: 100%;
		padding-top: 86%;
		/*line-height: 120%;*/
		font-weight: bold;
		
	}
	.categorylink_aria_wide:hover .caption h4, .categorylink_aria_mini:hover .caption h4 {
		 opacity: 1; /* 文字を表示する */
	}


	.categorylink_aria_wide .caption p, .categorylink_aria_mini .caption p {
		opacity: 0;	/* 文字を表示する */

	}

	.categorylink_aria_wide:hover .caption p, .categorylink_aria_mini:hover .caption p {
		 opacity: 0;	/* 文字を表示する */
	}


	.categorylink_aria_wide .mask1, .categorylink_aria_mini .mask1 {
		 width: 100%;
		 left: 0;
	}

	.categorylink_aria_wide:hover .mask1, .categorylink_aria_mini:hover .mask1  {
		opacity: 1;	/* マスクを表示する */
	}
	.categorylink_aria_wide:hover .mask2, .categorylink_aria_mini:hover .mask2 {
		opacity: 1;	/* マスクを表示する */
		padding: 0px 0px 0px 0px;	/* ホバーで下にずらす */
	}
	
	.categorylink_aria_wide .mask1, .categorylink_aria_mini .mask1  {
		opacity: 1;	/* マスクを表示する */
		top: 85%;	/* 枠の上に置いて表示させない */
		height: 15%;
	}

	.categorylink_aria_wide .caption h4, .categorylink_aria_mini .caption h4 {
		padding-top: 2%;
	}

}


/* トップヘッダー 1200ピクセル以上は広がらないように */
@media(max-width: 1200px){
	.categorylink {
		width: 100%;
	}
}

@media(min-width: 1200px){
	.categorylink {
		 /*width: 1200px;*/
		 width: 100%;
	}
}