/*=============================================================================
	アプリ情報表示用スタイル
=============================================================================*/

.app {
	padding:0;
}
.app .data {
	box-sizing:border-box;
	margin-bottom:1.5em;
	padding:5%;
	border-radius:15px;
	background:#f6f6f6;
}
.app .data .i {
	width:40%;
	display:inline-block;
}
.app .data .i img {
	border-radius: 20%;-moz-border-radius: 20%;-webkit-border-radius: 20%;
	max-width:100%;
}
.app .data .d {
	box-sizing: border-box;
	width:60%;
	display:inline-block;
	vertical-align:top;
	padding-left:1em;
}

.app .data .d .title {
	font-size:1.6em;
	font-weight:bold;
	margin-bottom:0.6em;
}
.app .link {
	display:inline-block;
	width:50%;
	padding-left:2%;
}

.app div:nth-child(2) {
	padding-left:0%;
	padding-right:2%;
}
.app .link .btn a {
	border:1px solid #ccc;
	background:#fff;
	color:#999;
	font-size:1em;
	padding:2px;
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	text-align:center;
	width:100%;
	line-height:150%;
	margin:0em 0 1em 0;
	border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
}
.app .link .btn a:hover {
	background-color: #f6f6f6;
	border-color: #adadad;
}

.app .link .btn a:focus {
	border-color: #66afe9;
	outline: 0;
}

.app .link .btn a:active {
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
	box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}
.app .icon-apple, .app .icon-android {
	display:inline-block;
	font-size:2.4em;
	margin-right:0.3em;
	line-height:140%;
}
.app .link .btn .btn-txt {
	display:inline-block;
}
.app .link .balloon {
	position: relative;
	display: inline-block;
	padding: 10px;
	width: 100%;
	line-height: 0px;
	text-align: center;
	background: #fff;
	border: 1px solid #ccc;
	z-index: 0;
	border-radius:10px;
	margin:10px 0 1em 0;
	box-sizing:border-box;
}
.app .link .balloon:before {
	content: "";
	position: absolute;
	top: -30px; left: 50%;
	margin-left: -15px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border:15px solid transparent;
	border-bottom:15px solid #fff;
	z-index: 0;
}
.app .link .balloon:after {
	content: "";
	position: absolute;
	top: -32px; left: 50%;
	margin-left: -16px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border:16px solid transparent;
	border-bottom:16px solid #ccc;
	z-index: -1;
}
.app .link .balloon img {
	max-width:100%;
}

@media screen and (max-width:1023px) {
	.app {
		padding:0;
	}
}
@media screen and (max-width:899px) {
	.app .data .d .title {
		font-size:1.2em;
	}
	.app .data .d .info {
		font-size:0.8em;
	}
}
@media screen and (max-width:720px) {
	.app .data .d .title {
		font-size:1.4em;
	}
	.app .data .d .info {
		font-size:1em;
	}
}
@media screen and (max-width:650px) {
	.app .data .d .info {
		font-size:0.8em;
	}
}

@media screen and (max-width:540px) {
	.app .data {
		padding:5% 3%;
	}
	.app .data .d {
		padding-left:0.6em;
		line-height:140%;
	}
	.app .data .d .title {
		font-size:1.2em;
		margin-bottom:0.4em;
	}
	.app .data .d .g_date, .app .data .d .i_date {
		display:none;
	}
	.app .link {
		display:block;
		width:100%;
		padding:0;
	}
	.app div:nth-child(2) {
		padding-right:0;
	}
	.app .link .btn a {
		margin:0em 0 1em 0;
	}
	.app .link .balloon {
		display:none;
	}
}