@charset "UTF-8";

/*=====Popup=====*/
.potali {
	padding: 3%;
	width: 94%;
	background: url(../images/potali/bg.png) no-repeat top center;
	-webkit-background-size: cover;
	color: #FFF;
	text-align: left;
}
.potali a, a:visited {
	color: #FFF; 
}
.potali a:active, a:hover {
	color: #FFF; 
}

.potali h2 {
	padding: 5% 0 0 0;
}
.potali h3 {
	padding: 0;
}
.potali h2 img, .potali h3 img {
	width: 100%;
	height: auto; 
}
.potali h3 {
	font-size: 130%; 
}
.potali .marker {
	background: linear-gradient(transparent 0%, #fff100 0%);
	display: inline; 
	color: #221815;
}
.potali .copy {
	margin: 30px 0 10% 0;
	text-align: left;
}

.potali .liveinfo1 {
	display: block; 
	margin: 2.5% 4% 2.5% 0;
	text-align: center;
}
.potali .liveinfo1 img {
	width: 30%;
}
.potali .liveinfo2 {
	display: block; 
	height: auto; 
	margin: 2.5% 0;
}

/*ボタン*/
.potali .btn a{
	background: #fff100 url(../images/btn_bg2.png) no-repeat 15px center;
	background-size: auto 30%;
	color: #221815;
	text-decoration: none;
}
.potali .btn a:hover{
	background-color: #ffdd00;
}

/* タブレットレイアウト : 481 px 〜 768 px。モバイルレイアウトからスタイルを継承。 */
@media only screen and (min-width: 481px) {
}

/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */
@media only screen and (min-width: 769px) {
.potali h2 img, .potali h3 img {
	width: 70%;
}
.potali h2 {
	padding: 0;
}
.potali h3 {
	font-size: 160%; 
}
.potali .copy {
	margin: 30px 0 10% 0;
	text-align: center;
}

.potali .liveinfo1 {
	display: inline-block; 
	vertical-align: top;
	width: 15%;
	margin: 2.5% 4% 2.5% 0;
}
.potali .liveinfo1 img {
	width: auto;
}
.potali .liveinfo2 {
	display: inline-block; 
	vertical-align: top;
	width: 75%;
	height: auto; 
	margin: 2.5% 0;
}
/*ボタン*/
.potali .btn a{
	min-width: 300px;
}
}