@charset "utf-8";

.mt1em {
	margin-top: 1em!important;
}
.mt2em {
	margin-top: 2em!important;
}
.mt3em {
	margin-top: 3em!important;
}

body {
  width: 100%;
  background-size: 100%;
  font-weight: 400;
  background-color: #fff;
  background-position: top center;
  background-repeat: repeat-y;
  -webkit-text-size-adjust: 100%;
  font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
	letter-spacing: 0.03em;
  color: #623300;
	overflow-x: hidden;
}

p {
	line-height: 160%;
}

.left {
	text-align: left!important;
}
.center {
	text-align: center!important;
	display: block;
	margin: auto;
}
.orange {
	color: #eb5505;
}
.balloon {
	overflow: hidden;
}

h2 {
	overflow: hidden;
}
h3 {
	overflow: hidden;
}

header {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	padding: 1em;
	border-bottom: 1px solid #ccc;
}
header img{
	width: 316px;
	height: 28px;
}

.inner {
	width: 100%;
	max-width: 980px;
	margin: auto;
	padding: 0 1em;
}

#mv {
	width: 100%;
	background: url("../img/mv-bg.png");
	background-size: contain;
	background-position: top center;
	overflow: hidden;
}
#mv .inner {
	position: relative;
	padding: 0;
}
#mv .inner img {
	width: 100%;
}
#mv .inner img.mv-balloon { /*balloon*/
	position: absolute;
	top: 0;
	animation-delay: 1.8s;
	z-index: 2;
}
#mv .inner img.mv-h1 { /*h1*/
	position: absolute;
	top: 0%;
	animation-delay: 0s;
	z-index: 1;
}
#mv .inner img.mv-copy { /*10,000 Pontaポイント*/
	position: absolute;
	top: 20%;
	animation-delay: .8s;
	z-index: 1;
}
#mv .inner img.mv-sp { /*スマートフォン*/
	position: absolute;
	top: 0%;
	animation-delay: .7s;
	z-index: 1;
}
#mv .inner img.mv-ponta { /*Ponta*/
	position: absolute;
	bottom: 0;
	animation-delay: .7s;
	z-index: 2;
}
#mv .inner img.mv-period { /*キャンペーン期間*/
	position: absolute;
	bottom: 0;
	animation-delay: 1.2s;
	z-index: 2;
}
#mv .inner img.mv-bg { /*背景*/
	/*position: absolute;*/
	bottom: 0%;
	z-index: 0;
}

article {
	background: url("../img/article-bg.png") no-repeat;
	background-size: contain;
	background-position: top;
}

table {
	width: 100%;
	font-size: 20px;
	text-align: center;
}
table, td, th {
	border: 1px solid #ccc;
	border-collapse: collapse;
	vertical-align: middle;
}
td, th {
	padding: 1em;
	line-height: 130%;
}
th {
	background: #ffebe1;
	font-weight: 700;
	font-size: 22px;
}

#step {
	margin-top: 1em;
}

#overview ul.asterisk {
	font-size: 130%;
	font-weight: 700;
}
#overview, #notes {
	width: 100%;
}
#overview h2, #notes h2 {
	width: 100%;
	background: #eb5505;
	font-size: 50px;
	color: #fff;
	text-align: center;
	font-weight: 700;
	padding: .5em;
	overflow: hidden;
}
#overview h3, #notes h3 {
	width: 100%;
	font-size: 40px;
	color: #eb5505;
	font-weight: 700;
	margin: 1.5em 0 .5em 0;
	overflow: hidden;
}
#overview p {
	font-size: 32px;
	font-weight: 700;
}
#overview p.notes {
	font-size: 28px;
	font-weight: 700;
	text-indent: -1em;
	margin: .7em 0 0 1em;
}

ul.disc {
	font-size: 32px;
	font-weight: 700;
}

#howto {
	width: 100%;
}
h2 {
	width: 100%;
	background: #eb5505;
	font-size: 50px;
	color: #fff;
	text-align: center;
	font-weight: 700;
	margin: 0 0 1em 0;
	padding: .5em;
}

#notes .inner ul {
	font-size: 22px;
}


/*スライダー タブ切り替え*/
.tab-area {
  display: flex;
	justify-content: space-between;
  cursor: pointer;
}
.tab {
	position: relative;
	z-index: 10;
	width: 100%;
	margin: 0;
  padding: 1em;
	color: #623300;
	font-size: 36px;
	font-weight: 700;
	line-height: 120%;
  text-align: center;
	background: #f6dc9a;
	border: 10px solid #f6dc9a;
	border-bottom: 0px;
	border-radius: 16px 16px 0 0;
}
.tab:first-child {
	margin-right: 20px;
}
.tab.active {
  background: #fffcef;
  color: #eb5505;
}
.panel-area {
	overflow: hidden;
	background: #fffcef;
	border: 10px solid #f6dc9a;
	border-radius: 0 0 16px 16px;
	margin: -10px 0 0 0;
	padding: 2em;
}

@keyframes SlideUp {
	0% {
		transform: translateY(30px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.panel {
  display: none;
  text-align: center;
	animation-name: SlideUp;
	animation-duration: 1s;
}
.panel.active {
  display: block;
	animation-name: SlideUp;
	animation-duration: 1s;
}

#app {
	width: 100%;
	overflow: hidden;
}
#app ul.dl-btn {
	display: flex;
	justify-content: center;
	margin: 2em 0;
}
#app ul.dl-btn li:first-child {
	margin-right: 1em;
}
#app ul.asterisk {
	margin-bottom: 3em;
}

footer {
	width: 100%;
	background: #fff;
	color: #999;
	font-size: 18px;
	text-align: center;
	margin: 2em 0 8em;
	padding: 1em 0!important;
}
footer ul {
	width: 100%;
	color: #999;
	text-align: center;
	padding: .5em;
}
footer ul li {
	line-height: 140%;
	margin-top: .5em;
}
footer ul li a {
	color: currentColor;
}
footer ul li.copyright {
	font-weight: 700;
}

/* app_DL */
.apps_dl {
	position: fixed;
	bottom: 0px;
	left: 0px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: 1em;
	border-top: 1px solid #ccc;
	z-index: 100;
	background: rgba(255, 255, 255, 1);
	display: none;
}
.apps_dl a {
	text-decoration: none;
}
.apps_dl ul {
  width: 100%;
	max-width: 950px;
	margin: auto;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.apps_dl ul li {
	display: flex;
	align-items: center;
}
.apps_dl ul li img {
	width: 50px;
	margin-right: 0.5em;
}
.apps_dl ul li p {
	line-height: 120%;
	font-weight: 700;
}
.apps_dl ul li .btn {
	position: relative;
	background: #eb5505;
	border-radius: 4px;
	padding: 0.8em;
	padding-right: 2em;
}
.apps_dl ul li .btn::after {
	position: absolute;
	transform: translate(-50%, -50%);
	right: 0.5em;
	top: 50%;
	content: url("../img/icon-blank.png")
}
.apps_dl ul li .btn p {
	font-size: 16px;
	color: #fff;
	line-height: 120%;
}


/*swiper*/
.swiper-slide {
}
.swiper-slide img {
  height: auto;
  width: 100%;
}
.swiper-pagination {
	display : flex;
	justify-content: center;
	width: 100%;
	margin: 2em 0;
}
.swiper-pagination-bullet {
	display: block;
	background: #ccc;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	margin: 0 10px;
	cursor: pointer;
	transition: .2s;
}
.swiper-pagination-bullet-active {
	background: #eb5505!important;
	transition: .2s;
}
/*.swiper-button-prev {
	position: absolute;
	top: 45%;
	left: 21%;
	z-index: 10;
	display: block;
	cursor: pointer;
	background: url("../img/slide-btn-arrow.png") no-repeat;
	background-size: cover;
	transform: rotate(180deg);
	width: 50px;
	height: 50px;
	transition: .2s;
}
.swiper-button-next {
	position: absolute;
	top: 45%;
	right: 21%;
	z-index: 10;
	display: block;
	cursor: pointer;
	background: url("../img/slide-btn-arrow.png") no-repeat;
	background-size: cover;
	width: 50px;
	height: 50px;
	transition: .2s;
}
.swiper-button-disabled {
	pointer-events: none;
	filter: grayscale(100%);
  opacity: 0.2;
	transition: .2s;
}*/

.btn a {
	display: block;
	width: 100%;
	font-size: 48px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: #eb5505;
	border-radius: .5em;
	margin: 1em 0 0 0;
	padding: 1.5em .5em;
	text-decoration: none;
	transition: .1s;
}
.btn a::after {
	display: inline-block;
	content:"";
	background: url("../img/icon-arrow.png") no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	margin: 0 0 0 0.5em;
	vertical-align: -3px;
}
.btn a:hover {
	background: #ff5900;
	transition: .1s;
}


/*@media screen and (min-width:600px) and ( max-width:800px){
	h2 {
		font-size: 6.8vw!important;
	}
	h3 {
		font-size: 6vw!important;
	}
	#anchor ul li a {
		padding: 1em;
		font-size: 3.8vw;
		border-bottom: 8px solid #f4d892;
	}
	.tab {
		font-size: 4.2vw;
	}
}*/


/* SP
------------------------------------------------------------------------------------------------ */

@media (max-width: 800px) {
	
	h2 {
		font-size: 6.5vw!important;
	}
	h3 {
		font-size: 5vw!important;
	}
	
	table {
		font-size: 3.2vw;
		letter-spacing: 0;
	}
	table, td, th {
		border: 1px solid #ccc;
		border-collapse: collapse;
		vertical-align: middle;
	}
	td, th {
		padding: .5em;
	}
	th {
		font-size: 3.4vw;
	}
	
	header img{
		width: 50%;
		max-width: 316px;
		height: 50%;
		max-height: 28px;
	}
	
	.inner {
		padding: 0 .5em;
	}
	
	#anchor {
		padding-top: .5em;
	}
	#anchor ul li a {
		padding: .8em;
		font-size: 2.9vw;
		border-radius: 8px;
	}
	#anchor ul li a::after {
		right: .5em;
		top: 38%;
		width: 3vw;
		height: 3vw;
	}
	#anchor ul li {
		border-radius: 8px;
		margin-right: .5em;
	}
	
	#overview ul.asterisk {
		font-size: 3vw;
	}
	#overview p {
		font-size: 4vw;
	}
	#overview p.notes {
		font-size: 3.5vw;
	}
	ul.disc {
		font-size: 4vw;
	}
	
	#notes .inner ul {
		font-size: 3.4vw;
	}
	
	.tab-area {
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}
	.tab {
		padding: 1em .5em;
		color: #623300;
		font-size: 4.2vw;
		border: 4px solid #f6dc9a;
		border-bottom: 0;
		border-radius: 12px 12px 0 0;
	}
	.tab:first-child {
		margin-right: 10px;
	}
	.panel-area {
		border: 4px solid #f6dc9a;
		border-radius: 0 0 12px 12px;
		margin: -4px 0 0 0;
		padding: 1em;
	}
	
	#app ul.dl-btn {
		display: flex;
		justify-content: center;
		margin: 1em 0;
	}
	#app ul.dl-btn li:first-child {
		margin-right: .5em;
	}
	
	.swiper-pagination {
		margin: 1em 0;
	}
	.swiper-pagination-bullet {
		width: 12px;
		height: 12px;
	}

	.btn a {
		font-size: 5vw;
		margin: .5em 0 0 0;
		padding: 1.5em .5em;
		border-bottom: .3 solid #bf4200;
	}
	.btn a::after {
		width: 4.5vw;
		height: 4.5vw;
		margin: 0 0 0 0.3em;
		vertical-align: -0.5vw;
	}
	
	footer {
		margin-top: 0em;
		padding: 0em;
		font-size: 3vw;
	}
	
	.apps_dl {
		padding: 0.5em;
	}
	.apps_dl ul li img {
		width: 48px;
		margin-right: 0.5em;
	}
	.apps_dl ul li p {
		line-height: 120%;
		font-size: 3vw;
		font-weight: 700;
	}

	.apps_dl ul li .btn {
		padding: 8px 10px;
		padding-right: 30px;
	}
	.apps_dl ul li .btn p {
		font-size: 13px;
		line-height: 130%;
	}
	.apps_dl ul li .btn::after {
		right: 0;
	}
	
}