/* ****************************************************

	Style for MAYSLOT PAGE
	/japanese/myslot/css/compatiblemodel.css

***************************************************** */


/* main title
***************************************************** */

.mainvisual {
	background-color: #f3e4d1;
	background-image: url(/japanese/myslot/common/img/bg_myslot_main.png);
	background-repeat: no-repeat;
	text-align: center;
}
.myslot-wrap .ttl-skin01 {
	background: #3ebafc;
}
.mypachi-wrap .ttl-skin01 {
	background: #ec880e;
}

.mypachi-wrap .model-wrap .ttl-year.open a {
	border-left: 9px solid #fbe5d6;
	background-color: #fbe5d6;
}

.mypachi-wrap .model-wrap .model-list-wrap .model-clm .ttl {
	border-left: 6px solid #ec880e;
}

.model-wrap {
	margin-top: 20px;
}
.model-wrap .ttl-year {
	border: 1px solid #3ebafc;
}
.mypachi-wrap .model-wrap .ttl-year {
	border: 1px solid #ec880e;
}
.model-wrap .ttl-year.close a {
	display: block;
	border-left: 9px solid #c1e6fa;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f0f0f0));
	background: -webkit-linear-gradient(top, #ffffff, #f0f0f0);
	background: linear-gradient(to bottom, #ffffff, #f0f0f0);
}
.mypachi-wrap .model-wrap .ttl-year.close a {
	display: block;
	border-left: 9px solid #ec880e;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f9cdaf));
	background: -webkit-linear-gradient(top, #ffffff, #f9cdaf);
	background: linear-gradient(to bottom, #ffffff, #f9cdaf);
}
.model-wrap .ttl-year.close a:hover {
	background-image: none;
}
.model-wrap .ttl-year.close a .year {
	display: inline-block;
	padding: 15px 0 15px 18px;
	font-size: 133.3%;
	font-weight: bold;
	color: #000000;
}
.model-wrap .ttl-year a .toggle {
	position: relative;
	float: right;
	padding: 18px 40px 18px 0;
	color: #0670bc;
}
.model-wrap .ttl-year a .toggle:after {
	position: absolute;
	content: '';
	top: 22px;
	right: 15px;
	width: 15px;
	height: 10px;
	background: url(/common/img/icn_arrow2.png) no-repeat 80% center;
	background-size: 15px 10px;
}
.model-wrap .ttl-year.open a .toggle:after {
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	transform:rotate(180deg);
}
.ie8 .model-wrap .ttl-year a .toggle:after {
	background: url(/common/img/ie8/icn_arrow2_1.png) no-repeat 80% center;
}
.ie8 .model-wrap .ttl-year.open a .toggle:after {
	background: url(/common/img/ie8/icn_arrow2_2.png) no-repeat 80% center;
}

.model-wrap .ttl-year.open {
	border: 1px solid #e4f6ff;
}

.mypachi-wrap .model-wrap .ttl-year.open {
	border: 1px solid #ec880f;
}
.model-wrap .ttl-year.open a {
	display: block;
	border-left: 9px solid #e4f6ff;
	background-color: #e4f6ff;
}
.model-wrap .ttl-year.open a .year {
	display: inline-block;
	padding: 15px 0 15px 18px;
	font-size: 133.3%;
	font-weight: bold;
	color: #000000;
}
.model-wrap .ttl-year.open a .toggle {
	float: right;
	padding: 18px 40px 18px 0;
	color: #0670bc;
}

.model-wrap .model-list-wrap {
	display: none;
	border-left: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
}

.model-wrap .model-list-wrap .model-clm {
	position: relative;
	border-bottom: 1px solid #e6e6e6;
	padding: 15px 28px;
}
.model-wrap .model-list-wrap .model-clm .ttl {
	padding-left: 6px;
	border-left: 6px solid #3ebafc;
	font-size: 116.7%;
	font-weight: bold;
}
.model-wrap .model-list-wrap .model-clm .tag-category {
	display: inline-block;
	margin: 10px 0;
	border-radius: 3px;
	padding: 6.5px 9px;
	color: #ffffff;
	font-size: 91.7%;
	text-align: center;
	text-decoration: none;
}
.model-wrap .model-list-wrap .model-clm .myslo {
	background: #007dd4;
}
.model-wrap .model-list-wrap .model-clm .mypachi {
	background: #ec880e;
}
.model-wrap .model-list-wrap .model-clm .txt {
	margin-top: 5px;
	padding-left: 12px;
	color: #7d7d7d;
}
.model-wrap .model-list-wrap .model-clm .txt {
	margin-top: 5px;
	padding-left: 12px;
	color: #7d7d7d;
}
.model-wrap .model-list-wrap .model-clm .logo {
	position: absolute;
	top: 15px;
	right: 18px;
}
.model-wrap .model-list-wrap .model-clm .logo.sammy img {
	width: 60px;
	height: 17px;
}
.model-wrap .model-list-wrap .model-clm .logo.rodeo img {
	width: 36px;
	height: 17px;
}
.model-wrap .model-list-wrap .model-clm .logo.taiyo img {
	width: 70px;
	height: 17px;
}
.model-wrap .model-list-wrap .model-clm .logo.ginza img {
	width: 30px;
	height: 17px;
}
.model-wrap .model-list-wrap .model-clm .clm2-wrap {
	margin-top: 10px;
}

.model-wrap .model-list-wrap .model-clm .img-copy-area {
	float: left;
	width: 330px;
}
.model-wrap .model-list-wrap .model-clm .img-copy-area .img {
}
.model-wrap .model-list-wrap .model-clm .img-copy-area .img img {
	width: 322px;
	height: auto;
}
.model-wrap .model-list-wrap .model-clm .img-copy-area .copyright {
	margin-top: 3px;
	color: #7d7d7d;
	font-size: 75%;
}
.model-wrap .model-list-wrap .model-clm .function-list-wrap {
	float: left;
	margin-left: 15px;
	width: 320px;
}
.model-wrap .model-list-wrap .model-clm .function-list-wrap .func-list {
}
.model-wrap .model-list-wrap .model-clm .function-list-wrap .func-list li {
	float: left;
	width: 48px;
	margin-right: 4px;
	margin-bottom: 5px;
}
.model-wrap .model-list-wrap .model-clm .function-list-wrap .func-list li img {
	width: 48px;
	height: 48px;
}



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

	.mainvisual img {
		width: 100%;
		height: auto;
	}

	.model-wrap {
		margin-top: 5px;
	}

	.model-wrap .ttl-year.close a {
		border-left: 5px solid #c1e6fa;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f0f0f0));
		background: -webkit-linear-gradient(top, #ffffff, #f0f0f0);
		background: linear-gradient(to bottom, #ffffff, #f0f0f0);
	}
	.model-wrap .ttl-year.close a .year {
		display: inline-block;
		padding: 10px 0 10px 15px;
		font-size: 14px;
		font-weight: bold;
		color: #000000;
	}
	.model-wrap .ttl-year a .toggle {
		position: relative;
		visibility: hidden;
		float: right;
		padding: 10px 40px 10px 0;
		color: #0670bc;
	}
	.model-wrap .ttl-year a .toggle:after {
		position: absolute;
		visibility: visible;
		content: '';
		top: 15px;
		right: 10px;
		width: 15px;
		height: 10px;
		background: url(/common/img/icn_arrow2.png) no-repeat 80% center;
		background-size: 15px 10px;
	}

	.model-wrap .ttl-year.open a {
		border-left: 5px solid #e4f6ff;
	}
	.model-wrap .ttl-year.open a .year {
		display: inline-block;
		padding: 10px 0 10px 15px;
		font-size: 14px;
		font-weight: bold;
		color: #000000;
	}
	.model-wrap .ttl-year.open a .toggle {
		float: right;
		padding: 10px 40px 10px 0;
		color: #0670bc;
	}

	.model-wrap .model-list-wrap {
		border-left: none;
		border-right: none;
	}
	.model-wrap .model-list-wrap .model-clm {
		padding: 10px 15px 15px;
	}
	.model-wrap .model-list-wrap .model-clm:last-child {
		border-bottom: none;
	}
	.model-wrap .model-list-wrap .model-clm .ttl {
		padding-left: 6px;
		border-left: 6px solid #3ebafc;
		font-size: 14px;
		font-weight: bold;
		width: 80%;
	}
	.model-wrap .model-list-wrap .model-clm .txt {
		margin-top: 5px;
		padding-left: 12px;
		color: #7d7d7d;
	}
	.model-wrap .model-list-wrap .model-clm .logo {
		position: absolute;
		top: 10px;
		right: 15px;
	}
	.model-wrap .model-list-wrap .model-clm .logo img {
		width: 100%;
		height: auto;
	}
	.model-wrap .model-list-wrap .model-clm .clm2-wrap {
		margin-top: 10px;
	}

	.model-wrap .model-list-wrap .model-clm .img-copy-area {
		float: none;
		width: 100%;
	}
	.model-wrap .model-list-wrap .model-clm .img-copy-area .img img {
		width: 100%;
		height: auto;
	}
	.model-wrap .model-list-wrap .model-clm .img-copy-area .copyright {
		font-size: 10px;
	}
	.model-wrap .model-list-wrap .model-clm .function-list-wrap {
		float: none;
		margin-top: 5px;
		margin-left: 0;
		width: 100%;
	}
	.model-wrap .model-list-wrap .model-clm .function-list-wrap .func-list {
	}
	.model-wrap .model-list-wrap .model-clm .function-list-wrap .func-list li {
		width: 40px;
	}
	.model-wrap .model-list-wrap .model-clm .function-list-wrap .func-list li img {
		width: 40px;
		height: 40px;
	}


}