@charset "Shift_JIS";

@import url("reset.css");
@import url("common.css");
@import url("style.css");

/*-----キービジュアル(TOP）-----*/


#keyVisual-top {
	width: 100%;
	height: 600px;
	padding:0;
	margin: 0 auto;
}

/*----- TOPロゴ -----*/

.logo {
	width: 135px;
	height: 463px;
	position: absolute;
	top: 0px;
	left: 18%;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background:url(../images/logo.png) no-repeat left;
	z-index: 999;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

.logo a{
	width: 135px;
	height: 463px;
	display: block;
}

.logo a:hover {
	width: 135px;
	height: 463px;
	display: block;
	opacity: 0.5;
	background:url(../images/logo.png) no-repeat left;
}


/*-----news-----*/

#news-All {
	width: 100%;
	height: 365px;
	padding-top: 35px;
	margin: 0 auto;
	background: url(../images/news-bg.png) no-repeat center;
}

#news-All h1{
	width: 1000px;
	height: 56px;
	margin: 0 auto;
	margin-bottom: 20px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background:url(../images/news-title.png) no-repeat center;
}

#news-Block {
	width: 1000px;
	height: 250px;
	margin: 0 auto;
	padding-top: 20px;
	background:url(../images/news-text-bg.png) no-repeat center;
}

#news-Block p{
	width: 945px;
	height: 40px;
	margin: 5px 20px 0px 20px;
	text-indent: 100%;
	overflow: hidden;
	white-space:nowrap; 
	background:url(../images/news-sub-title.png) no-repeat center;
}

#news-All dd{
	font-size: 13px;
	margin: 10px 20px 0px 10px;
	float: left;
}

#news-All dt{
	display: none;
}


/*new*/

#new h2{
	width: 130px;
	font-size:13px;
	float: left;
	margin: 10px 20px 0px 20px;
	clear: left;
}

.news-area {
	width: 1000px;
	height: 38px;
	border-bottom: 1px dotted #999999;
}

.news-area a{
	color:#660066;
}


/*-----アイテム-----*/

#item {
	width: 100%;
	height: 520px;
	margin: 0 auto;
	background: url(../images/item-bg.png) no-repeat center;
}

#item ul{
	width: 1000px;
	height: 250px;
	margin: 0 auto;
}

#item li{
	width: 220px;
	height: 420px;
	margin-top:50px;
	float: left;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#item li a{
	width: 220px;
	height: 420px;
	display: block;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#item li a:hover {
	opacity:0.2;
	background:#333333;
}

.item-1 {
	width: 220px;
	height: 420px;
	margin-right: 40px;
	background:url(../images/item-1-bg.png) no-repeat center;
}

.item-2 {
	width: 220px;
	height: 420px;
	margin-right: 40px;
	background:url(../images/item-2-bg.png) no-repeat center;
}

.item-3 {
	width: 220px;
	height: 420px;
	margin-right: 40px;
	background:url(../images/item-3-bg.png) no-repeat center;
}

.item-4 {
	width: 220px;
	height: 420px;
	background:url(../images/item-4-bg.png) no-repeat center;
}

/*----- アクセス -----*/

#access {
	width: 1000px;
	margin: 0 auto;
	margin-top: 40px;
}

#access a{
	color:#000000;
	text-decoration: none;
	text-shadow: -1px 1px 1px #a4a4a4;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#access a:hover {
	color: #c500ad;
	text-decoration: underline;
}



#access h1 {
	width: 936px;
	height: 64px;
	margin: 0 auto;
	padding: 0px 0px 0px 60px;
	line-height: 64px;
	font-size: 25px;
	font-weight: bold;
	color: #f7f7f7;
	background:url(../images/title-bg-black.png) no-repeat left;
}

.access-left {
	width: 450px;
	margin: 20px 0px 0px 0px;
	line-height: 50px;
	float: left;
}

.access-left dl{
	border-bottom: 1px dotted #999999;
	text-shadow: -1px 1px 1px #a4a4a4;
}

.access-left dt{
	letter-spacing: 5px;
	font-size: 20px;
	font-weight: bold;
}

.access-left dd{
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 20px;
}

.access-right {
	float: right;
}

.access-right iframe {
	width: 520px;
	margin: 20px 2px 0px 10px;
}

/*----- 作家紹介 -----*/

#info {
	width: 1000px;
	margin: 0 auto;
	margin-top: 40px;
}

#info h1 {
	width: 1000px;
	height: 64px;
	margin: 0 auto;
	padding: 0px 0px 0px 60px;
	line-height: 64px;
	font-size: 25px;
	font-weight: bold;
	color: #f7f7f7;
	background:url(../images/title-bg-black.png) no-repeat left;
}

.info-left {
	width: 400px;
	height: 400px;
	margin-top: 20px;
	float: left;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background:url(../images/yuki-pic.png) no-repeat;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

.info-right {
	width: 590px;
	margin: 20px 0px 0px 10px;
	float:right;
}

.info-right dl{
	padding-left: 20px;
	border-bottom: 1px dotted #999999;
	text-shadow: -1px 1px 1px #a4a4a4;
}

.info-right dt{
	padding: 0px 0px 5px 0px;
	letter-spacing: 5px;
	font-size: 20px;
	font-weight: bold;
	line-height: 50px;
}

.info-right dd{
	padding: 5px 0px 5px 0px;
	letter-spacing: 1px;
	font-size: 14px;
	line-height: 25px;
}


/*----- リンク -----*/

#link {
	width: 1000px;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 30px;
}

#link h1 {
	width: 1000px;
	height: 64px;
	margin: 0 auto;
	padding: 0px 0px 0px 60px;
	line-height: 64px;
	font-size: 25px;
	font-weight: bold;
	color: #f7f7f7;
	background:url(../images/title-bg-black.png) no-repeat left;
}

#link ul {
	width: 1000px;
	margin-top: 8px;
}

#link li {
	float: left;
}

#link a{
	width: 244px;
	height: 176px;
	display: block;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#link a:hover {
	opacity: 0.2;
	background:#444444;
}

.link-Block-1 {
	width: 244px;
	height: 180px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: url(../images/link-Block-1.png) no-repeat;
}

.link-Block-2 {
	width: 244px;
	height: 180px;
	margin-left: 8px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: url(../images/link-Block-2.png) no-repeat;
}

.link-Block-3 {
	width: 244px;
	height: 180px;
	margin-left: 8px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: url(../images/link-Block-3.png) no-repeat;
}

.link-Block-4 {
	width: 244px;
	height: 180px;
	margin-left: 8px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: url(../images/link-Block-4.png) no-repeat;
}




/********************************** タブレット **********************************/



@media screen and (max-width: 980px) {

#keyVisual-top {
	height: 97%;
	height: 325px;
	margin: 0 auto;
	margin-bottom: 115px;
	background:url(../images/news-bg.png) center;

}

#theTarget {
	width: 97%;
	height: 280px;
	margin: 0 auto;
	background:url(../images/keyVisual-index.png) center;
	border: 1px solid #333333;
}


.logo {
	width: 100%;
	height: 135px;
	margin: 0 auto;
	margin-bottom: 10px;
	position: static;
	background-image: url(../mobile-images/logo.png) ;
	background-position: center;
	box-shadow: none;
}

.logo a{
	width: 100%;
	height: 135px;
	margin: 0 auto;
	display: block;
}

.logo a:hover {
	width: 100%;
	height: 135px;
	display: block;
	opacity: 0.5;
	background: none;
}


/*-----news-----*/


#news-All {
	width: 97%;
	height: 100%;
	margin: 0 auto;
	margin-top: 20px;
	padding-top: 0px;
	background: none;

}

#news-All h1{
	display: none;
}

#news-Block {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	background:url(../mobile-images/news-text-bg.png) no-repeat center;
	border: 1px solid #333333;
}


#news-Block p{
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	padding: 0px 0px 20px 0px;
	margin: 0px 0px 10px 0px;
	text-indent: inherit;
	overflow: visible;
	white-space: normal;
	background: none;
	border-bottom: 2px solid #333333;
}

#news-All dd{
	width: 100%;
	text-align: left;
	font-size: 14px;
	line-height: 14px;
	margin: 10px 15px 10px 0px;
	float: none;
}

#news-All dt{
	display: none;
}


/*new*/

#new h2{
	width: 100%;
	text-align: left;
	font-size:13px;
	line-height: 13px;
	float: none;
	margin: 10px 0px 0px 0px;
}

.news-area {
	width: 95%;
	height: 100%;
	padding-left: 15px;
	border-bottom: 1px dotted #999999;
}

.news-area a{
	color:#660066;
}


/*-----アイテム-----*/


#item {
	width: 100%;
	height: 490px;
	margin: 0 auto;
	padding-top: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	background: url(../images/item-bg.png) no-repeat top center;
}

#item ul{
	width: 100%;
	margin: 0 auto;
}

#item li{
	width: 97%;
	height: 103px;
	margin: 0 auto;
	margin-top: 0px;
	margin-bottom: 20px;
	float: none;
}

#item li a{
	width: 97%;
	height: 103px;
	margin-left: 0px;
	text-indent: -9999px;
	display: block;

}

#item li a:hover {
	opacity:;
	background: none;
}

.item-1 {
	width: 100%;
	height: 103px;
	margin-right: 0px;
	background:url(../mobile-images/item-1-bg.png) no-repeat center;

}

.item-2 {
	width: 100%;
	height: 103px;
	margin-right: 0px;
	background:url(../mobile-images/item-2-bg.png) no-repeat center;
}

.item-3 {
	width: 100%;
	height: 103px;
	margin-right: 0px;
	background:url(../mobile-images/item-3-bg.png) no-repeat center;
}

.item-4 {
	width: 100%;
	height: 103px;
	background:url(../mobile-images/item-4-bg.png) no-repeat center;
}


/*----- アクセス -----*/


#access {
	width: 97%;
	height: 100%;
	margin: 0 auto;
	margin-top: 20px;
}

#access a{
	color:#000000;
	text-decoration: none;
	text-shadow: -1px 1px 1px #a4a4a4;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#access a:hover {
	color: #c500ad;
	text-decoration: underline;
}


#access h1 {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	line-height: 54px;
	font-size: 20px;
	font-weight: bold;
	color: #f7f7f7;
	text-align: center;
	background:url(../mobile-images/title-bg-black.png) repeat-x left;
}

.access-left {
	width: 100%;
	margin: 0px 0px 0px 0px;
	line-height: 30px;
	float: none;
}

.access-left dl{
	margin-top: 10px;
	border-bottom: 1px dotted #999999;
	text-shadow: -1px 1px 1px #a4a4a4;
}

.access-left dt{
	letter-spacing: 5px;
	font-size: 16px;
	font-weight: bold;
}

.access-left dd{
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 20px;
}

.access-right {
	float: none;
}

.access-right iframe {
	width: 100%;
	margin: 20px 0px 0px 0px;
}


/*----- 作家紹介 -----*/


#info {
	width: 97%;
	margin: 0 auto;
	margin-top: 15px;
}

#info h1 {
	width: 100%;
	height: 64px;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	line-height: 64px;
	font-size: 20px;
	font-weight: bold;
	color: #f7f7f7;
	text-align: center;
	background:url(../mobile-images/title-bg-black.png) repeat-x left;
}

.info-left {
	width: 100%;
	height: 400px;
	margin-top: 10px;
	padding: 20px 0px 20px 0px;
	float: none;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: #eeeeee url(../images/yuki-pic.png) no-repeat center;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
	font-size: 14px;
}

.info-right {
	width: 100%;
	margin: 20px 0px 0px 0px;
	float: none;
}

.info-right dl{
	padding-left: 0px;
	border-bottom: 1px dotted #999999;
	text-shadow: -1px 1px 1px #a4a4a4;
}

.info-right dt{
	padding: 10px 0px 5px 0px;
	letter-spacing: 3px;
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
}

.info-right dd{
	padding: 5px 0px 5px 0px;
	letter-spacing: 1px;
	font-size: 14px;
	line-height: 25px;
}

/*----- リンク -----*/

#link {
	width: 97%;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

#link h1 {
	width: 100%;
	height: 64px;
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	line-height: 64px;
	font-size: 20px;
	font-weight: bold;
	color: #f7f7f7;
	text-align: center;
	background:url(../mobile-images/title-bg-black.png) repeat-x left;
}

#link ul {
	width: 100%;
	margin-top: 8px;
}

#link li {
	float: none;
}

#link a{
	width: 100%;
	height: 100%;
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#link a:hover {
	opacity: 0.8;
	background:#222222;
}

.link-Block-1 {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align:center;
	margin-left: 0px;
	text-indent: inherit;
	overflow: inherit;
	white-space: normal;
	background: #695d86;
}

.link-Block-2 {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align:center;
	margin-top: 5px;
	margin-left: 0px;
	text-indent: inherit;
	overflow: inherit;
	white-space: normal;
	background: #564a73;
}

.link-Block-3 {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align:center;
	margin-top: 5px;
	margin-left: 0px;
	text-indent: inherit;
	overflow: inherit;
	white-space: normal;
	background: #483f5f;
}

.link-Block-4 {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align:center;
	margin-top: 5px;
	margin-left: 0px;
	text-indent: inherit;
	overflow: inherit;
	white-space: normal;
	background: #342b49;
}

}

/********************************** スマートホン **********************************/


@media screen and (max-width: 500px) {

/*-----アイテム-----*/

#item {
	width: 97%;
	height: 405px;
	margin: 0 auto;
	padding-top: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	background: url(../images/item-bg.png) no-repeat top center;
}


#item li{
	width: 97%;
	height: 91px;
	margin: 0 auto;
	margin-top: 0px;
	margin-bottom: 10px;
	float: none;
}

#item li a{
	width: 97%;
	height: 91px;
	margin-left: 0px;
	text-indent: -9999px;
	display: block;

}

#item li a:hover {
	opacity:;
	background: none;
}

.item-1 {
	width: 97%;
	height: 91px;
	margin-right: 0px;
	background: url(../mobile-images/item-1-2-bg.png) no-repeat center;

}

.item-2 {
	width: 97%;
	height: 91px;
	margin-right: 0px;
	background:url(../mobile-images/item-2-2-bg.png) no-repeat center;
}

.item-3 {
	width: 97%;
	height: 91px;
	margin-right: 0px;
	background:url(../mobile-images/item-3-2-bg.png) no-repeat center;
}

.item-4 {
	width: 97%;
	height: 91px;
	background:url(../mobile-images/item-4-2-bg.png) no-repeat center;
}



}