@charset "utf-8";
/*bg-image-setting-------------------------------------------*/
#app-bg {
	position: relative;
	overflow: hidden;
	height: 100%;
}
#app-bg:before,
#app-bg:after {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	top: -90px;
	bottom: 0;
	right: 0;
	background-position: center top;
}
#app-bg:before {
	background-repeat: repeat;
}
#app-bg:after {
	background-repeat: no-repeat;
}
body[data-cover-pattern-fixed='1'] #app-bg:before,
body[data-cover-visual-fixed='1'] #app-bg:after {
	top: 0;
	position: fixed;
}
#app-content {
	height: 100%;
	width: 320px;
	margin: 0 auto;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 1;
	color: #000;/*accent color alternate*/
	background-color: #fff;/*base color alternate*/
	background-image: none;
	background-position: center top;
	background-repeat: repeat;
	/*background-size: 320px auto;*/
}

@media ( min-width : 640px ) {
#app-content {
	width: 640px;
	/*background-size: 640px auto;*/
}
}
/*common-----------------------------------------------------*/
#app-content hr {
	border: none;
	padding: 0;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.2);
	height: 2px;
	width: 300px;
}
main a {
	color: inherit;
}
.app-h3 {
	min-height: 70px;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.15em;
	text-align: center;
	line-height: 40px;
	padding: 15px 0px;
	color: #fff;
	background-color: rgba(0,0,0,0.5);
	overflow: hidden;
}
.app-h4 {
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 5px;
	font-weight: bold;
	font-size: 16px;
	background-color: rgba(0,0,0,0.1);
}
#app-content .text {
	padding: 20px;
	margin: 0px auto;
	letter-spacing: 0em;
	word-break:normal;
	word-wrap:break-word;
	overflow-wrap : break-word;
}
#app-content .btn-l a,
#app-content .btn-l button {
	background-color: #af0000;
}
#app-content .btn-s a {
	background-color: rgba(0,0,0,0.5);
}

@media ( min-width : 640px ) {
#app-content hr {
	border: none;
	padding: 0;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.2);
	height: 2px;
	width: 600px;
}
#app-content .app-h3 {
	padding: 15px 20px;
	text-align: left;
}
#app-content .text {
	padding: 20px;
	margin: 0px auto;
	letter-spacing: 0.1em;
}
}
#counter {
	text-align: center;
	letter-spacing: -0.4em;
}
#counter span {
	display: inline-block;
	width: 29px;
	height: 37.5px;
	background-size: 290px 37.5px;
	margin: 0 1px;
	text-indent: -9999px;
	background-repeat: no-repeat;
}
#counter .num0 {
	background-position: 0 0;
}
#counter .num1 {
	background-position: -29px 0;
}
#counter .num2 {
	background-position: -58px 0;
}
#counter .num3 {
	background-position: -87px 0;
}
#counter .num4 {
	background-position: -116px 0;
}
#counter .num5 {
	background-position: -145px 0;
}
#counter .num6 {
	background-position: -174px 0;
}
#counter .num7 {
	background-position: -203px 0;
}
#counter .num8 {
	background-position: -232px 0;
}
#counter .num9 {
	background-position: -261px 0;
}

@media ( min-width : 640px ) {
#counter span {
	width: 58px;
	height: 75px;
	background-size: 580px 75px;
	margin: 0 2px;
}
#counter .num0 {
	background-position: 0 0;
}
#counter .num1 {
	background-position: -58px 0;
}
#counter .num2 {
	background-position: -116px 0;
}
#counter .num3 {
	background-position: -174px 0;
}
#counter .num4 {
	background-position: -232px 0;
}
#counter .num5 {
	background-position: -290px 0;
}
#counter .num6 {
	background-position: -348px 0;
}
#counter .num7 {
	background-position: -406px 0;
}
#counter .num8 {
	background-position: -464px 0;
}
#counter .num9 {
	background-position: -522px 0;
}
}
#period {
	display: inline-block;
	max-width: 300px;
	margin: 0 10px;
	font-size: 14px;
	line-height: 1.4;
	padding: 11px 15px;
	letter-spacing: 0;
	background-color: rgba(0,0,0,0.2);
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
}
#period span{
	display: inline-block;
}
@media ( min-width : 640px ) {
#period {
	right: 20px;
	float: right;
	margin: 0 -5px 0 0;
}
}
/* idの頭にbtn-twitterが付いていれば適用するように修正 17.09.20*/
[id|='btn-twitter'] a {
	background-color: #55acee !important;
	font-size: 16px !important;
	letter-spacing: 0.1em !important;
}
[id|='btn-twitter'] a:before {
	display: inline-block;
	content: '';
	width: 30px;
	height: 20px;
	background: url(../img/app/twitter_icon_white.svg) no-repeat left top;
	background-size: contain;
	vertical-align: middle;
	margin-right: 5px;
}
/* Facebook用投稿ボタンスタイルを追加 17.09.20*/
#btn-facebook a {
	background-color: #3B5998 !important;
	font-size: 16px !important;
	letter-spacing: 0.1em !important;
}
#btn-facebook a:before {
	position: relative;
	top:-1px;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	background: url(../img/app/facebook_icon_white.svg) no-repeat center top;
	background-size: contain;
	vertical-align: middle;
	margin-right:5px;
}
.btn-dimmed {
	text-align: center;
	padding: 15px;
	font-weight: bold;
	margin: 0 10px;
	border: 2px solid rgba(0,0,0,1);
}

@media ( min-width : 640px ) {
.btn-dimmed {
	margin: 0 20px;
}
}
.btn-dimmed strong {
	display: block;
	font-size: 18px;
}
.btn-dimmed span {
	display: inline-block;
}
.modal-app {
	margin: 0 auto;
	background-color: rgba(255,255,255,1);	
	background-image: none;
	background-position: center top;
	background-repeat: repeat;
}
.modal-app h1 {
	height: 60px;
	text-align: center;
	font-size: 20px;
	line-height: 60px;
	font-weight: bold;
	color: #fff;
	background-color: rgba(0,0,0,0.5);
	letter-spacing: 0.2em;
}
.modal-app .content {
	padding: 10px;
	color: rgba(0,0,0,1);
}

@media ( min-width : 640px ) {
.modal-app {
	max-width: 640px;
}
.modal-app .content {
	padding: 20px;
}
}

#video{
width:320px;
height:180px;
margin: 0 0 20px;
}
@media ( min-width : 640px ) {
#video{
width:640px;
height:360px;
}
}


.campaign-item {
	margin: 20px 10px;
	border-color: rgba(0,0,0,0);
}
.campaign-item~.campaign-item {
	border-color: rgba(0,0,0,0.2);
}
.campaign-item .campaign-banner {
	width: 300px;
	height: 150px;
}
.campaign-item p {
	text-align: center;
	margin-top: 10px;
	line-height: 1;
}
.campaign-item h4,
.campaign-item .btn-more {
	display: none;
}
.campaign-item .btn-more a {
	display: inline-block;
	height: 34px;
	line-height: 34px;
	background-color: rgba(0,0,0,0.5);
	padding: 0 15px;
	border-radius: 17px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.2em;
	white-space: nowrap;
	text-decoration: none;
}
.campaign-item .btn-more a:hover {
	text-decoration: underline;
}
.campaign-item .btn-more a:before {
	display: inline-block;
	content: '';
	background: url(../img/app/icon_more.png) no-repeat left top;
	width: 14px;
	height: 16px;
	background-size: contain;
	vertical-align: middle;
	margin-right: 7px;
}

@media ( min-width : 640px ) {
.campaign-item {
	width: 600px;
	margin: 20px 20px;
	overflow: hidden;
	position: relative;
	border-color: rgba(0,0,0,0);
}
.campaign-item~.campaign-item {
	border-color: rgba(0,0,0,0.2);
}
.campaign-item .campaign-banner {
	width: 230px;
	height: 115px;
	float: left;
	margin-right: 15px;
}
.campaign-item h4 {
	display: block;
	font-size: 18px;
	font-weight: bold;
}
.campaign-item h4 a {
	text-decoration: none;
}
.campaign-item h4 a:hover {
	text-decoration: underline;
}
.campaign-item p {
	position: absolute;
	text-align: left;
	bottom: 0;
	line-height: 34px;
	left: 245px;
}
.campaign-item .btn-more {
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 10px;
}
}
#campaign-items {
	width: 300px;
	margin: 20px auto;
	overflow: hidden;
}

@media ( min-width : 640px ) {
#campaign-items {
	width: 600px;
	margin: 20px auto;
	overflow: hidden;
}
}
#share ul {
	padding: 20px 0;
	text-align: center;
	letter-spacing: -0.4em;
}
#share li {
	display: inline-block;
	margin: 0 5px;
}
#share li > * {
	vertical-align: top;
}
#breadcrumb > div {
	min-width: 100%;
	display: inline-block;
	white-space: nowrap;
	background-color: rgba(0,0,0,0.5);
}
#gb-footer > div {
	background-color: rgba(0,0,0,0.5);
}

/*reward-----------------------------------------------*/
aside.reward{
margin: 20px auto; 
padding:0 10px;
}
aside.reward img{
display: block;
max-width: 300px;
margin: 0 auto;
}
@media ( min-width : 640px ) {
aside.reward{
padding:0 20px;
}
aside.reward img{
max-width: 600px;
}
}

/*introduction-------------------------------------------*/
.introduction{
padding: 20px 0px;	
}
.introduction img{
max-width: 300px;
margin: 0 auto;
display: block;
}
@media ( min-width : 640px ) {
.introduction img{
max-width: 600px;
}
}

/*common-store-link-------------------------------------*/
.store-link{
text-align:center;
letter-spacing:-0.4em;
}
.store-link ul {
	margin-top: 5px;
	font-size: 0;/* inline-block hack*/
}
.store-link li{
	margin-top: 5px;
display:inline-block;
letter-spacing:0;
width:150px;
}
.store-link li~li{
margin-left:5px;
}
.store-link li img{
width:100%;
height:auto;
}
.store-link li.store-enza{
width:128px;
}
@media ( min-width : 640px ) {
.store-link ul {
	margin-top: 10px;
}
.store-link li {
margin-top: 10px;
width: 200px;
}
.store-link li~li{
margin-left:10px;
}
.store-link li.store-enza{
width:170px;
}
}

/*extra-banner------------------------------------*/

.extra-banner{
padding:20px 10px;
text-align: center;
overflow: hidden;
}

.extra-banner ul li{
margin-top:20px;
}
.extra-banner ul li:first-child{
margin-top:0;
}

/*banner-area------------------------------------*/
.banner-area{
padding:10px;
text-align: center;
overflow: hidden;
}

.banner-area ul li{
margin-top:10px;
}
.banner-area ul li:first-child{
margin-top:0;
}

@media ( min-width : 640px ) {
.banner-area{
padding:20px;
}
}

/*no-js------------------------------------*/
#no-js:not(:target) {
	padding: 15px;
	background-color: #fff;
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100%;
	border-bottom: solid 1px #444;
}

#no-js:target {
  display: none;
}

.no-js-trigger {
  display: block;
  position: absolute;
  top: 3px;
  right: 40px;
  text-decoration: none;
  z-index: 11;
}

.no-js-close {
  position:absolute;
  display:inline-block;
  top:0px;
  left:0px;
  width:32px;
  height:32px;
  border:0;
  background-color:black;
  border-radius:32px;
  margin:0;
  padding:0;
  transform:scale(0.5);
  cursor:pointer;
}

.no-js-close::before {
  content: '';
  position:absolute;
  display:inline-block;
  top:4px;
  left:13px;
  width:6px;
  height:24px;
  border:0;
  margin:0;
  padding:0;
  background-color:white;
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.no-js-close::after {
  content: '';
  position:absolute;
  display:inline-block;
  top:4px;
  left:13px;
  width:6px;
  height:24px;
  border:0;
  margin:0;
  padding:0;
  background-color:white;
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}


/*image panel-----------------------------*/
.image-items {
width: 300px;
margin: 20px auto;
overflow: hidden;
}

@media ( min-width : 640px ) {
.image-items {
width: 600px;
margin: 20px auto;
overflow: hidden;
}
}

.image-item{
max-width:260px;
height:auto;
padding:0 5px;
border-color: rgba(0,0,0,0);
}
.image-item:first-child:nth-last-child(1){
max-width:300px;
height:auto;
padding:0;
text-align: center;
border-color: rgba(0,0,0,0);
}
.image-item~.image-item {
border-color: rgba(0,0,0,0.2);
}
.image-item img:first-child:nth-last-child(1){
margin:0 auto;
}

@media ( min-width : 640px ) {
.image-item {
position: relative;
max-width: 520px;
height:auto;
margin: 20px;
padding:0 10px;
border-color: rgba(0,0,0,0);
}
.image-item:first-child:nth-last-child(1){
position: relative;
max-width: 600px;
height:auto;
margin: 20px;
padding:0;
text-align: center;
border-color: rgba(0,0,0,0);
}
.image-item~.image-item {
border-color: rgba(0,0,0,0.2);
}
.image-item img:first-child:nth-last-child(1){
margin:0 auto;
}
}


/*tool tip-----------------------------*/
.cover {
	display:none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
}
.tool-tip-wrapper {
	position: relative;
}
.tool-tip-trigger {
	cursor: pointer;
	text-decoration: underline;
}
.tool-tip-content {
	display: none;
	position: absolute;
	bottom: 2em;
	left: 50%;
	z-index: 9999;
	padding: 5px 5px 5px 15px;
	color: #000;
	background: #fef7e0;
	border-radius: 0.5em;
	width: 200px;
	text-align: left;
	margin: 0 0 0 -100px;
	font-size: 12px;
}
.tool-tip-content:after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	margin: 0 0 0 -4px;
	bottom: -8px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #fef7e0;
}

@media ( min-width : 640px ) {
.tool-tip-content:after {
	left: 65%;
}
}

/*btns-sns-footer-----------------------------*/
.btns-sns-footer{
	padding: 20px 0;
}
.sns-footer{
	text-align: center;
	font-size: 0;/* inline-block hack */
}
.sns-footer:after{
display: block;
content: '';
clear: both;
}
.sns-footer li{
display:inline-block;
width: 66px;
height: 66px;
/*line-height: 66px;*/
margin-left:15px;
overflow: hidden;
border-radius: 100%;
z-index: 1;
}
.sns-footer li:first-child{
margin:0;
}
.sns-footer li > button:hover {
overflow: hidden;
border-radius: 100%;
opacity: 0.9;
cursor: pointer;
}
.sns-footer li > button{
border: none;
outline:none;
width: 100%;
height: 100%;
text-align: center;
text-indent: -9999pt;
z-index: 0;
}
.sns-footer .line > button{
background: #00c300 url(../img/alt/icon_line.svg) no-repeat 51% 53%;
background-size: 33px auto;
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.20); 
}
.sns-footer .fb > button{
background: #3b579d url(../img/alt/icon_facebook.svg) no-repeat 50% 50%;
background-size: 16px auto;
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.20);
}
.sns-footer .tw > button{
background: #55acee url(../img/alt/icon_twitter.svg) no-repeat 57% 52%;
background-size: 32px auto;
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.20);
}

@media ( min-width : 640px ) {
.sns-footer li{
margin-left:30px;
}
.sns-footer li:first-child{
margin:0;
}
.sns-footer .line,
.sns-footer .fb,
.sns-footer .tw{
width: 80px;
height: 80px;
}
}