@charset "utf-8";

/* Common
-------------------------------------------------------------------------------------------------*/
html {
	/*scroll-padding-top: 60px;*/
	scroll-behavior: smooth;
}
body {
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
	letter-spacing: 0.03em;
	font-optical-sizing: auto;
	font-size: clamp(90%, 3vw, 100%); 
  font-weight: 400;
  font-style: normal;
	color: #000;
	overflow-y: scroll;
}
h1 {
	font-size: 24px;
}
h2 {
	/*font-size: 20px;*/
	color: #eb5505;
	margin-bottom: .5em;
	/*border-bottom: 2px solid #eb5505;*/
}
h3 {
	display: flex;
	align-items: center;
	/*font-size: 16px;*/
	line-height: 130%;
	width: auto;
	margin-bottom: 1em;
	border-left: 8px solid #eb5505;
	padding: .3em 0 .3em .8em;
}
.nostyle {
	border-left: none!important;
	padding-left: 0!important;
}
h4 {
	display: flex;
	align-items: center;
	line-height: 140%;
	margin: .3em 0;
}
h5 {
	font-size: 100%;
	line-height: 140%;
	display: flex;
	align-items: center;
}
span.step {
	background: #eb5505;
	padding: .8em ;
	margin-right: .8em;
	border-radius: .3em;
	font-size: 90%;
	font-weight: 400;
	line-height: 100%;
	color: #fff;
}
.icon-disc {
	display: inline-flex;
	align-items: center;
}
.icon-disc::before {
	display: inline-flex;
	content: "";
	width: 4.4vw;
	max-width: 18px;
	height: 4.4vw;
	max-height: 18px;
	background: url("../../common/img/icon-disc.svg") no-repeat;
	margin: 0 .5em -.1em 0;
	filter: invert(35%) sepia(96%) saturate(3060%) hue-rotate(9deg) brightness(100%) contrast(100%);
}

p {
	line-height: 170%;
}
hr {
	border-top: 2px solid #ccc;
	margin: 2em 0;
}
hr.dotted {
	border-top: 2px dotted #ccc;
	margin: 2em 0;
}
.border-bottom {
	border-bottom: 1px solid #ccc!important;
	padding-bottom: .5em;
	margin-bottom: 1em;
}
.border-left {
	border-left: 8px solid currentColor;
	padding: .3em .5em;
	margin-bottom: .5em;
}
h1 {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-align: center
}
@media (max-width: 400px) {
	br.w400 {
		display: block;
	}
}
@media (min-width: 400px) {
	br.w400 {
		display: none;
	}
}

h1.guide::before {
	content: "";
	width: 40px;
	height: 40px;
	background: url("../../common/img/icon-cart.svg") no-repeat;
	margin-right: .5em;
	margin-top: 0;
	/*vertical-align: middle;*/
	filter: invert(99%) sepia(99%) saturate(0%) hue-rotate(296deg) brightness(113%) contrast(100%);
}
h1.support::before {
	content: "";
	width: 40px;
	height: 40px;
	background: url("../../common/img/icon-inquiry.svg") no-repeat;
	margin-right: .5em;
	margin-top: 0;
	/*vertical-align: middle;*/
	filter: invert(99%) sepia(99%) saturate(0%) hue-rotate(296deg) brightness(113%) contrast(100%);
}
h1.help::before {
	content: "";
	width: 30px;
	height: 30px;
	background: url("../../common/img/icon-help.svg") no-repeat;
	margin-right: .5em;
	margin-top: 0;
	/*vertical-align: middle;*/
	filter: invert(99%) sepia(99%) saturate(0%) hue-rotate(296deg) brightness(113%) contrast(100%);
}
.center {
	display: block;
	text-align: center;
	margin: 0 auto;
}

.blank::after {
	display: inline-block;
	content: "";
	width: 4vw;
	max-width: 14px;
	height: 4vw;
	max-height: 14px;
	/*background: url("../../common/img/icon-external-link.svg") no-repeat;*/
	/*background-color: currentColor;*/
	background-color: #999;
	margin-left: .3em;
	vertical-align: middle;
	/*filter: invert(47%) sepia(68%) saturate(3831%) hue-rotate(356deg) brightness(90%) contrast(105%);
	color: currentColor;*/
	mask-image: url("../../common/img/icon-external-link.svg");
	mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.blank:hover::after {
	background: currentColor;
}

a {
	color: #eb5505;
}
a:hover {
	text-decoration: none;
}

.arrow::before {
	display: inline-flex;
	align-items: center;
	content: "";
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	width: 7px;
	height: 7px;
	margin: -.2em .5em 0 0;
	padding: 0;
	vertical-align: middle;
	/*transition: .2s;*/
}

.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 400px;
	color: #fff;
	background: #eb5505;
	line-height: 120%;
	margin: 0 auto;
	padding: 1em;
	border-radius: .5em;
	text-decoration: none;
	transition: .2s;
}
.btn a:hover {
	background: #ff560b;
	transition: .2s;
}
.btn a::after {
	display: inline-flex;
	align-items: center;
	content: "";
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	width: 8px;
	height: 8px;
	margin: .1em 0 0 .8em;
	padding: 0;
	line-height: 100%;
}

#page-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 3em 0 0 0;
}
#page-nav div a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 120%;
	margin: 0 auto;
	text-decoration: underline;
}
#page-nav div a:hover {
	text-decoration: none;
}
#page-nav div a::before {
	display: inline-flex;
	align-items: center;
	content: "";
	border-top: 2px solid #eb5505;
	border-right: 2px solid #eb5505;
	transform: rotate(-135deg);
	width: 6px;
	height: 6px;
	margin: .2em .5em 0 0;
	padding: 0;
	line-height: 100%;
}

ul.asterisk {
	position: relative;
	font-weight: 400;
}
ul.asterisk li {
	position: relative;
	content: "※";
	padding: 0 0 .4em 1.2em;
}
ul.asterisk li::before {
	position: absolute;
	content: "※";
	margin: 0 0 0 -1.2em;
}

ul.disc li {
	position: relative;
	content: "※";
	padding: 0 0 .4em 1.2em;
}
ul.disc li::before {
	position: absolute;
	content: "•";
	margin: 0 0 0 -.9em;
}

ul li ul.tree li {
	position: relative;
	content: "※"!important;
	padding: 0 0 .4em 1.2em;
}

ol {
	list-style: none;
	counter-reset: number;
}
ol li {
	position: relative;
  padding: 0 0 .4em 1.5em;
}
ol li::before {
  counter-increment: number;
  content: counter(number)".";
  position: absolute;
  left: 0;
}

ol.asterisk {
	list-style: none;
	counter-reset: number;
}
ol.asterisk li {
	position: relative;
  padding: 0 0 .2em 2em;
}
ol.asterisk li::before {
  counter-increment: number;
  content: '※' counter(number);
  position: absolute;
  left: 0;
}

ol.list-none {
  list-style: none;
}
ol.list-none li {
	margin-bottom: .5em;
  padding-left: 1.2em;
	text-indent: -1.2em;
}
ol.list-none li:last-child {
	margin-bottom: 0;
}
ol.list-none li::before{
  content: "";
}

.orange {
	color: #eb5505;
}
.gray {
	color: #999;
}
.small {
	font-size: 90%;
	line-height: 140%;
}
.bold {
	font-weight: 700;
}
.normal {
	font-weight: 400;
}
.txt-left {
	text-align: left;
}
.txt-right {
	text-align: right;
}
.txt-center {
	text-align: center;
}

.capture {
	border: 2px solid #eee;
	border-radius: .5em;
}
.app-icon {
	border: 2px solid #ccc;
	border-radius: 1em;
}
.app-badge {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin: 1.5em 0
}
.app-badge img {
	max-height: 70px;
}

.flex {
	display: flex;
	align-items: center;
	gap: 1em;
	border: none;
}

ul.flex {
	display: flex;
	flex-flow: wrap;
	gap: 1em;
	align-items: center;
}
ul.flex.three-colmn {
	justify-content: center;
	text-align: center;
}
ul.flex.three-colmn li {
	width: 30%;
	text-align: center;
}
ul.flex-img {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
}
.flex-img img {
	display: block;
	width: 100%;
	max-width: 300px;
}

.bg {
	background: #f9f2ea;
	padding: 1.2em;
	border-radius: .5em;
}

.mt0 {
	margin-top: 0em!important;
}
.mt05em {
	margin-top: .5em!important;
}
.mt1em {
	margin-top: 1em!important;
}
.mt2em {
	margin-top: 2em!important;
}
.mt3em {
	margin-top: 3em!important;
}
.mt4em {
	margin-top: 4em!important;
}
.mt5em {
	margin-top: 5em!important;
}
.mr05em {
	margin-right: .5em!important;
}
.mr1em {
	margin-right: 1em!important;
}
.mb0 {
	margin-bottom: 0em!important;
}
.mb1em {
	margin-bottom: 1em!important;
}
.mb2em {
	margin-bottom: 2em!important;
}
.ml1em {
	margin-left: 1.5em!important;
}
.pt0 {
	padding-top: 0!important;
}
.pc-exmg {
	margin-top: -2em!important;
}
.sp-mt2em {
	margin-top: 2em!important;
}


header {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 60px;
	margin: 0;
	padding: 0;
	z-index: 100;
}
header .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #ccc;
	width: 100%;
	max-width: 980px;
	height: 60px;
	margin: 0;
	padding: 0 1em;
}
img.logo-aupay {
	position: relative;
	width: 120px;
	z-index: 9999;
}
img.logo-aupay.white {
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(296deg) brightness(255%) contrast(100%);
}
img.logo-kddi {
	display: block;
	width: 60px;
	margin: auto;
}


/* Swiper */

.swiper {
	margin: 2em 0 1em;
}
.swiper img {
	border: 2px solid #eee;
	border-radius: .5em;
}
.swiper-slide figure {
	position: relative;
}
.swiper-slide figure::after {
	position: absolute;
	right: -19%;
	bottom: 45%;
	display: inline-flex;
	content: "";
	border-top: .8vw solid #ccc;
	border-right: .8vw solid #ccc;
	width: 6vw;
	max-width: 50px;
	height: 6vw;
	max-height: 50px;
	transform: rotate(45deg)
}
.swiper-slide:last-child figure::after {
	display: none;
}
.swiper-slide figcaption {
	margin: 1em 0 1em 0;
	text-indent: 0;
	line-height: 140%;
	font-size: 90%;
}
.swiper-slide figcaption.indent {
	margin: 1em 0 1em 1em;
	text-indent: -1em;
	line-height: 140%;
	font-size: 90%;
}
.swiper-pagination {
	position: relative;
	bottom: 0;
	display : flex;
	justify-content: center;
	align-items: center;
	padding: 1em 0 0 0;
	width: 100%;
	z-index: 10;
}
.swiper-pagination-bullet {
	display: block;
	background: #ccc;
	width: 12px;
	height: 12px;
	border-radius: 100%;
	margin: 0 .5em!important;
	padding: 0;
	cursor: pointer;
	transition: .2s;
}
.swiper-pagination-bullet-active {
	background: #eb5505!important;
	transition: .2s;
}


/* Tab */

.tabs {
  display: flex;
  flex-wrap: wrap;
	gap: .3em;
	vertical-align: middle;
}
.tab-label {
  color: #eb5505;
	/*font-size: 2.6vw;*/
	font-size: clamp(0.675rem, 0.391rem + 1.42vw, 1.5rem);
  font-weight: bold;
	letter-spacing: 0;
  border: solid 2px #ccc;
	border-radius: .3em .3em 0 0;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  padding: 15px 0;
  margin: 0;
	text-align: center;
	transition: .2s;
}
.tab-label:hover {
  background: #fff2eb;
}
.tab-content {
  flex: 100%;
  display: none;
  overflow: hidden;
	border: 2px solid #ccc;
	border-radius: 0 0 .3em .3em;
	margin: -6px 0 1em 0;
	padding: 1em;
}
input[name="tab-switch"] {
  display: none;
}
.tabs input:checked + .tab-label {
  color: #fff;
  background-color: #eb5505;
	border-color: #eb5505;
}
.tabs input:checked + .tab-label::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #eb5505 transparent transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.2s ease 0s;
}
#tab01:checked ~ #tab01-content,
#tab02:checked ~ #tab02-content,
#tab03:checked ~ #tab03-content {
  display: block;
}
.tab-content {
  position: relative;
  animation: fadeIn 1s ease;
}


/* Accordion Line Type */

ul.accordion {
  width: 100%;
  margin: 0;
	color: #000;
}
ul.accordion li {
  list-style: none;
	border-bottom: 2px solid #ccc;
}
ul.accordion li.noline {
  list-style: none;
	border-bottom: none;
}
ul.accordion li.noline ul li {
	border-bottom: none;
}
ul.accordion li ul li {
	border-bottom: none;
}
ul.accordion .ac-head {
  position: relative;
  margin: 0;
	display: flex;
	align-items: center;
  padding: .8em 0;
  cursor: pointer;
	transition: .2s;
}
ul.accordion .ac-head::after {
  content: "";
  position: absolute;
  right: .8em;
  /*top: 32%;*/
  transition: all 0.2s ease-in-out;
  display: flex;
	width: 2vw;
  max-width: 10px;
	height: 2vw;
  max-height: 10px;
  border-top: solid 2px #666;
  border-right: solid 2px #666;
  transform: rotate(135deg);  
}
ul.accordion .ac-head p {
  padding-right: 40px;
}
ul.accordion .ac-head img {
  width: 6vw;
	max-width: 30px;
	height: 6vw;
	max-height: 30px;
	margin: .2em .5em 0 0;
}
ul.accordion .ac-head.open::after {
  transform: rotate(-45deg);
  top: 45%;
}
ul.accordion .ac-content {
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.3s ease-in-out, visibility 0s linear 0.3s;
}
ul.accordion .ac-content .inner {
  margin: 0;
  padding: 1em;
	border-top: 2px solid #ccc;
}
ul.accordion .ac-content.open {
  visibility: visible;
}

/* Accordion Button Type */

ul.accordion-btn {
  width: 100%;
  margin: 0;
	padding: 0;
	color: #000;
}
ul.accordion-btn li {
  list-style: none;
	border: 2px solid #ccc;
	border-radius: .5em;
	padding: 0;
}
ul.accordion-btn li.noline {
  list-style: none;
	border-bottom: none;
}
ul.accordion-btn li.noline ul li {
	border-bottom: none;
}
ul.accordion-btn li ul li {
	border-bottom: none;
}
ul.accordion-btn .ac-head {
  position: relative;
  margin: 0;
	padding: .8em;
	display: flex;
	align-items: center;
  cursor: pointer;
	transition: .2s;
}
ul.accordion-btn .ac-head::after {
  content: "";
  position: absolute;
  right: 1.2em;
  /*top: 32%;*/
  transition: all 0.2s ease-in-out;
  display: flex;
	width: 2vw;
  max-width: 10px;
	height: 2vw;
  max-height: 10px;
  border-top: solid 2px #666;
  border-right: solid 2px #666;
  transform: rotate(135deg);  
}
ul.accordion-btn .ac-head p {
  padding-right: 30px;
}
ul.accordion-btn .ac-head img {
  width: 6vw;
	max-width: 30px;
	height: 6vw;
	max-height: 30px;
	margin: .2em .5em 0 0;
}
ul.accordion-btn .ac-head.open::after {
  transform: rotate(-45deg);
  top: 45%;
}
ul.accordion-btn .ac-content {
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.3s ease-in-out, visibility 0s linear 0.3s;
}
ul.accordion-btn .ac-content .inner {
  margin: 0;
  padding: 1em;
	border-top: 2px solid #ccc;
}
ul.accordion-btn .ac-content.open {
  visibility: visible;
}



/* Smart Phone
-------------------------------------------------------------------------------------------------*/

.sp {
	display: block;
}
.pc {
	display: none;
}

.pc-center {
	display: block;
	text-align: left;
}

.table-wrap {
  overflow-x: scroll;
}
table {
	width: 100%;
  border-collapse: collapse;
	font-size: 90%;
	line-height: 120%;
	text-align: left;
	background: #fff;
}
table.slide {
	width: 100%;
	min-width: 800px;
  border-collapse: collapse;
  /*white-space: nowrap;*/
	font-size: 70%;
	text-align: center;
	background: #fff;
	box-sizing: border-box;
}
table, tr, td {
	border: 1px solid #ccc;
	margin: 0;
	padding: .5em;
}
table.slide img {
	margin-bottom: .5em;
}
table .gray {
	color: #000;
	background: #f5f5f5!important;
}
table .left {
	text-align: left;
}
.publisher td {
	width: 70px;
	background: #f5f5f5;
	}

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

#mv {
	position: relative;
	display: flex;
	height: 200px;
	overflow: hidden;
	/*background: #ffae00;*/
	background: linear-gradient(-45deg, #ffb400, #eb5505) fixed;
  background-size: 1500% 100%;
  animation: GradietionAnimation 30s ease infinite;
}
@keyframes GradietionAnimation { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

#guide #mv p {
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	margin-top: .5em;
	}
#guide #mv p::before {
	content: "ー";
	margin-right: .5em;
}
#guide #mv p::after {
		content: "ー";
		margin-left: .5em;
	}

#main-menu {
}
#main-menu a::after {
	margin-top: -.2em;
}
#main-menu #aupay {
	margin-bottom: 2em;
	padding-bottom: 2em;
	border-bottom: 2px dotted #ccc;
}
#main-menu #aupay h2 {
	display: flex;
	align-items: center;
	font-size: 24px;
	font-weight: 700;
	margin: .5em 0;
	color: #eb5505;
}
#main-menu #aupay h2::before {
	display: inline-flex;
	vertical-align: middle;
	content: "";
	width: 24px;
	height: 24px;
	background: url("../../common/img/icon-aupay.svg") no-repeat;
	margin: 0 .5em -.1em 0;
	filter: invert(35%) sepia(96%) saturate(3060%) hue-rotate(9deg) brightness(100%) contrast(100%);
}

#main-menu ul li {
	font-size: 16px;
	margin: 1em 0 1em 1em;
	padding: .0;
	vertical-align: middle;
	line-height: 140%;
	text-indent: -1em;
}
#main-menu ul li.h {
	font-weight: 700;
	color: #333;
	text-indent: 0;
	margin-left: 0;
}
#main-menu ul li a {
	display: block;
	color: #000;
	text-decoration: none;
}
#main-menu ul li a::before {
	display: inline-flex;
	align-items: center;
	content: "";
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg);
	width: 7px;
	height: 7px;
	margin: -.2em .5em 0 0em;
	padding: 0;
	vertical-align: middle;
}

#main-menu ul li a:hover {
	color: #eb5505;
	text-decoration: underline;
}

#main-menu ul li ul.tree {
	font-weight: 400;
	margin: 0 0 0 0em;
	padding: 0;
}

#main-menu ul li ul.tree li a::before {
	display: inline-flex;
	align-items: center;
	content: "";
	border: none;
	border-left: 2px solid #333;
	border-bottom: 2px solid #333;
	transform: rotate(0deg);
	width: 7px;
	height: 7px;
	margin: -.5em .5em 0 0;
	padding: 0;
	vertical-align: middle;
	/*transition: .2s;*/
}
#main-menu ul li ul.tree li a:hover::before {
	border-left: 2px solid #eb5505;
	border-bottom: 2px solid #eb5505;
}

#main-menu #prepaid {
	margin-bottom: 2em;
	padding-bottom: 2em;
	border-bottom: 2px dotted #ccc;
}
#main-menu #prepaid h2::before {
	display: inline-flex;
	vertical-align: middle;
	content: "";
	width: 24px;
	height: 24px;
	background: url("../../common/img/icon-prepaid.svg") no-repeat;
	margin: 0 .5em -.2em 0;
	filter: invert(35%) sepia(96%) saturate(3060%) hue-rotate(9deg) brightness(100%) contrast(100%);
}

#main-menu #card {
}
#main-menu #card h2::before {
	display: inline-flex;
	vertical-align: middle;
	content: "";
	width: 24px;
	height: 24px;
	background: url("../../common/img/icon-card.svg") no-repeat;
	margin: 0 .5em -.3em 0;
	filter: invert(35%) sepia(96%) saturate(3060%) hue-rotate(9deg) brightness(100%) contrast(100%);
}



.border-gray {
	border: 2px solid #ccc;
	border-radius: .5em;
	margin: 1em 0;
	padding: 1em;
}
.border-orange {
	border: 2px solid #eb5505;
	border-radius: .5em;
	margin: 1em 0;
	padding: 1em;
}
.head {
	display: inline-flex;
	align-items: center;
	font-size: 110%;
	font-weight: 700;
	margin-bottom: .5em;
}
/*.head.check:before {
	display: inline-flex;
	content: "";
	width: 5vw;
	max-width: 20px;
	height: 5vw;
	max-height: 20px;
	background: url("../../common/img/icon-check.svg") no-repeat;
	margin: .3em .5em 0 0;
}*/
.caution {
	position: relative;
	margin-left: 1.8em;
}
.caution:before {
	position: absolute;
	display: inline-flex;
	content: "";
	width: 6vw;
	max-width: 24px;
	height: 6vw;
	max-height: 24px;
	background: url("../../common/img/icon-caution.svg") no-repeat;
	background-size: contain;
	margin: .1em 0 0 -1.8em;
}
.check {
	position: relative;
	margin-left: 1.5em;
	display: flex;
	align-items: center;
}
.check:before {
	position: absolute;
	display: inline-flex;
	content: "";
	width: 4vw;
	max-width: 18px;
	height: 4vw;
	max-height: 18px;
	background: url("../../common/img/icon-check.svg") no-repeat;
	margin: .2em 0 0 -1.5em;
}
.tips {
	position: relative;
	margin-left: 1.8em;
}
.tips:before {
	position: absolute;
	display: inline-flex;
	content: "";
	width: 5vw;
	max-width: 20px;
	height: 5vw;
	max-height: 20px;
	background: url("../../common/img/icon-tips.svg") no-repeat;
	margin: .2em 0 0 -1.8em;
}

footer {
	margin-top: 2em;
}
footer .inner {
	width: 100%;
	max-width: 980px;
	margin: auto;
	padding: 0;
}
footer #au {
	margin: 0;
	padding: 0;
	/*background: #fff6f1;*/
}
footer #au ul {
	gap: .5em;
	color: #666;
}
footer #au ul li {
	line-height: 100%;
	padding-right: .5em;
	padding-bottom: .3em;
	border-right: 1px solid #999;
}
footer #au ul li a {
	color: #666
}
footer #kddi {
	border-top: 1px solid #ccc;
	margin: 0;
	padding: 1em 0;
}
footer #kddi a {
	color: #666;
}
footer #kddi a:hover {
	color: #0e0d6a;
}
footer ul {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	gap: .1em 1em;
	padding: 1em;
	font-size: 13px;
}

.copy {
	font-size: 11px;
	letter-spacing: 0;
	text-align: center;
	color: #666;
}

.app-overview {
	display: block;
	align-items: center;
	gap: 1em;
	margin-top: 1.5em
}
.app-overview img {
	width: 200px;
	margin: auto;
	margin-bottom: 1.5em;
}


/* Drawe Menu */

button.drawer-btn {
	/*position: fixed;
	top: 0;
	right: 0;*/
	position: absolute;
	right: 1em;
	width: 60px;
	height: 60px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	align-items: center;
	z-index: 999;
}
button.drawer-btn span {
	width: 24px;
	height: 4px;
	background: #eb5505;
	display: inline-block;
	border-radius: 2px;
}
button#drawer-btn.active span {
  background-color: #fff;
}
button#drawer-btn.active span:nth-child(1) {
  transform: translate(0, 8px) rotate(45deg);
}
button#drawer-btn.active span:nth-child(2) {
  transform: scaleX(0);
	opacity: 0;
}
button#drawer-btn.active span:nth-child(3) {
  transform: translate(0, -8px) rotate(-45deg);
}
.overlay-bg {
  position: fixed;
  background: #eb5505;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
	transition: .5s;
	z-index: 998;
}
.overlay-bg.open {
  opacity: 1;
  visibility: visible;
}
.overlay-bg nav.global-menu-sp ul {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.overlay-bg nav.global-menu-sp ul li {
  text-align: center;
  padding: 20px 0;
}
.overlay-bg nav.global-menu-sp ul li a {
	display: inline-flex;
	align-items: center;
  color: #fff;
  font-size: 18px; 
  font-weight: bold;
  text-decoration: none;
}
nav.global-menu-sp ul li a.beginner:before {
	display: inline-flex;
	content: "";
	width: 5vw;
	max-width: 20px;
	height: 5vw;
	max-height: 20px;
	background: url("../../common/img/icon-beginner.svg") no-repeat;
	margin: .2em .4em 0 0;
	filter: invert(99%) sepia(99%) saturate(0%) hue-rotate(296deg) brightness(113%) contrast(100%);
}
nav.global-menu-sp ul li a.guide:before {
	display: inline-flex;
	content: "";
	width: 5vw;
	max-width: 20px;
	height: 5vw;
	max-height: 20px;
	background: url("../../common/img/icon-cart.svg") no-repeat;
	margin: -.1em .4em 0 0;
	filter: invert(99%) sepia(99%) saturate(0%) hue-rotate(296deg) brightness(113%) contrast(100%);
}
nav.global-menu-sp ul li a.help:before {
	display: inline-flex;
	align-items: center;
	content: "";
	width: 5vw;
	max-width: 20px;
	height: 5vw;
	max-height: 20px;
	background: url("../../common/img/icon-help.svg") no-repeat;
	margin: .1em .4em 0 0;
	filter: invert(99%) sepia(99%) saturate(0%) hue-rotate(296deg) brightness(113%) contrast(100%);
}
nav.global-menu-sp ul li a.support:before {
	display: inline-flex;
	align-items: center;
	content: "";
	width: 5vw;
	max-width: 20px;
	height: 5vw;
	max-height: 20px;
	background: url("../../common/img/icon-inquiry.svg") no-repeat;
	margin: .1em .4em 0 0;
	filter: invert(99%) sepia(99%) saturate(0%) hue-rotate(296deg) brightness(113%) contrast(100%);
}
nav.global-menu-pc ul {
	display: none;
}


@media (min-width: 600px) {
	
	.pc-exmg {
		margin-top: 0em!important;
	}
	.sp-mt2em {
		margin-top: 1em!important;
	}
	
	ul.flex-3col img {
		width: 60%;
		margin: auto;
	}
	
	#main-menu div.pc-view {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		flex-wrap: wrap;
		/*flex-direction: column;*/
		margin: 0 0 0 0;
		padding: 0 0;
	}
	#main-menu #aupay ul {
		align-items: flex-start;
		justify-content: flex-start;
		width: 50%;

	}
	#main-menu #prepaid ul {
		align-items: flex-start;
		justify-content: flex-start;
		width: 50%;
	}
	.tree {
		width: 100%!important;
	}
	
	.app-overview {
		display: flex;
		align-items: center;
		gap: 1em;
		margin-top: 1.5em
	}
	.app-overview img {
		width: 24vw;
		max-width: 300px;
		margin: 0;
	}
	
	/* Tab */
	.tab-label {
		font-size: 16px;
		padding: 20px 0;
	}
	
}



/* PC
-------------------------------------------------------------------------------------------------*/

@media (min-width: 800px) {
	
	html {
		/*scroll-padding-top: 80px;*/
	}
	
	.sp {
		display: none;
	}
	.pc {
		display: block;
	}
	
	.pc-center {
		display: block;
		text-align: center;
		margin: 0 auto;
	}
	
	ul.flex-3col {
		display: flex;
		gap: 1em;
	}
	ul.flex-3col li {
		width: 33%;
	}
	ul.flex-3col img {
		width: 100%;
	}
	
	header {
		position: fixed;
		top: 0;
		width: 100%;
		height: 80px;
		margin: 0;
		padding: 0 1em;
		z-index: 100;
		box-sizing: border-box;
	}
	
	header .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border: 1px solid #ccc;
		border-top: none;
		border-radius: 0 0 .5em .5em;
		width: 100%;
		max-width: 980px;
		height: 80px;
		margin: 0 auto;
		padding: 0 2em;
	}
	
	img.logo-aupay.white {
		filter: none;
	}
	
	nav.global-menu-sp {
		display: none;
	}
	
	nav.global-menu-pc ul {
		position: relative;
		display: flex;
		gap: 1.5em;
		align-items: center;
		height: 80px;
		font-weight: 700;
	}
	nav.global-menu-pc ul li {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;
		text-decoration: none;
		line-height: 100%;
	}
	nav.global-menu-pc ul li a {
		display: inline-flex;
		align-items: center;
		height: 80px;
		padding: 1em 0;
		color: #000;
		text-align: center;
		text-decoration: none;
		margin: 0;
		/*border-bottom: 4px solid transparent;*/
		/*transition: all .2s;*/
	}
	nav.global-menu-pc ul li a:hover {
		filter: invert(35%) sepia(96%) saturate(3060%) hue-rotate(9deg) brightness(100%) contrast(100%);
		/*transition: .2s;*/
	}
	/*nav.global-menu-pc ul li a:hover {
		border-bottom: 4px solid #eb5505;
		color: #000;
		transition: .2s;
	}*/
	nav.global-menu-pc ul li a.active {
		filter: invert(35%) sepia(96%) saturate(3060%) hue-rotate(9deg) brightness(100%) contrast(100%);
		/*border-bottom: 4px solid #eb5505;*/
	}
	.active {
		filter: invert(35%) sepia(96%) saturate(3060%) hue-rotate(9deg) brightness(100%) contrast(100%);
	}
	nav.global-menu-pc ul li a.beginner:before {
		display: inline-flex;
		align-items: center;
		content: "";
		width: 4vw;
		max-width: 20px;
		height: 4vw;
		max-height: 20px;
		background: url("../../common/img/icon-beginner.svg") no-repeat;
		margin-right: .3em;
	}
	nav.global-menu-pc ul li a.guide:before {
		display: inline-flex;
		content: "";
		width: 4vw;
		max-width: 20px;
		height: 4vw;
		max-height: 20px;
		background: url("../../common/img/icon-cart.svg") no-repeat;
		margin-right: .3em;
	}
	nav.global-menu-pc ul li a.help:before {
		display: inline-flex;
		content: "";
		width: 4vw;
		max-width: 20px;
		height: 4vw;
		max-height: 20px;
		background: url("../../common/img/icon-help.svg") no-repeat;
		margin-right: .3em;
	}
	nav.global-menu-pc ul li a.support:before {
		display: inline-flex;
		content: "";
		width: 4vw;
		max-width: 20px;
		height: 4vw;
		max-height: 20px;
		background: url("../../common/img/icon-inquiry.svg") no-repeat;
		margin-right: .3em;
	}
	
	main {
		/*margin-top: 80px;*/
		margin-top: 0;
	}
	#overlay-bg, .overlay-bg {
		display: none;
	}
	#mv {
		height: 280px;
	}
	#mv h1 {
		color: #fff;
		margin: 8% 0 0 0;
		font-size: 24px;
		text-align: center;
	}

	img.logo-aupay {
		width: 140px;
	}
	button#drawer-btn, button.drawer-btn {
		display: none;
	}
	
	#main-menu div.pc-view {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1em;
		width: 100%;
		flex-wrap: nowrap;
		/*flex-direction: column;*/
		margin: 0 0 0 0;
		padding: 0 0;
	}

	#main-menu #aupay ul {
		align-items: flex-start;
		justify-content: flex-start;
		width: 33.333%;
	}
	#main-menu #prepaid ul {
		align-items: flex-start;
		justify-content: flex-start;
		width: 33.333%;
	}
	.tree {
		width: 100%!important;
	}
	
	
	.pc-exmg {
		margin-top: 2em!important;
	}
	
	/* Swiper */
	.swiper-slide figure::after {
		right: -22%;
		border-top: .2em solid #ccc;
		border-right: .2em solid #ccc;
		width: 4vw;
		max-width: 30px;
		height: 4vw;
		max-height: 30px;
	}
	.swiper .pc-none {
		display: none;
	}
	
}