@charset 'UTF-8';

.position-center{
	text-align:center;
	margin:35px 0 120px;
}

.roboto{
	font-family: 'Roboto', sans-serif;
}
.example-text{
	font-size:.7rem;
	margin:10px 0 0 auto;
	text-align:right;
}

.wallet{
	font-size:.8rem;
}
@media screen and (min-width:1000px){
.wallet{
	font-size:1rem;
	}
}
/*----------------------------------------------------------------------------

アンカーリンク

-----------------------------------------------------------------------------*/
.anc-list{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	
}
.anc-list li{
	width:calc(100% / 2);
	text-align:center;
	position:relative;

}
.anc-list li a{
	font-weight:700;
	padding:22px 0px ;
	display:block;
	background:#f3f3f3;
	font-size:.8rem;
	color:#333;
	line-height:1.2;
	border:1px solid #fff;
}
.anc-list li .apg{
	font-size:.65rem;
	font-family: 'Roboto', sans-serif;
}
.anc-list li a:hover{
	color:#F64F95;
	background:#FCE9EF;
}
@media screen and (min-width:1000px){
.anc-list{
	flex-wrap:nowrap;

}
.anc-list li{
	width:calc(100% / 4);
}
.anc-list li a{
	font-size:1rem;
	}
.anc-list li .apg{
	font-size:1rem;
	}
}

/*----------------------------------------------------------------------------

タイトル（h2）

-----------------------------------------------------------------------------*/
.heading {
  position: relative;
  padding: 20px 20px 20px;
  text-align: center;
  font-weight:700;
	font-size:1.1rem;


}

.heading:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #000;
}
.heading span {
  position: relative;
  padding: 0 0em;
  background: #fff;
  display:block;
  max-width:70%;
  margin: 0 auto;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.heading {
	font-size:1.25rem;
	}
}
@media screen and (min-width:1281px){
.heading {
	font-size:1.6rem;
	}
.heading span {
  padding: 0 2em;
  display:inline-block;
  max-width:100%;
	}
}
.space-margin{
	margin:25px auto 0;
}
.text-center{
	text-align:center;
}


/*----------------------------------------------------------------------------

Apple Pay Google Pay 注釈

-----------------------------------------------------------------------------*/

.heading-sub{
	margin:30px 0 ;
	padding:.5em;
	font-weight:500;
	text-align:left;
}

.apple-lbl{border-left:10px solid #FEE2EE;}
.google-lbl{border-left:10px solid #FDEDE2;}

@media all and (min-width: 769px) and (max-width: 1280px) {
.heading-sub{
	font-size:1.2rem;
	}

}

@media screen and (min-width:1281px){
.heading-sub{
	font-size:1.4rem;

	}
}
.a-g-list{
	margin:20px 0 15px;
}
.a-g-list dt{
	font-weight:500;
}
.a-g-list dd{
	text-indent:-1em;
	padding-left:1em;
	font-size:.9rem;
}

.a-g-list dd:before{
	content:"●";
	padding-left:5px;
}
.a-g-list a{
	color:#666;
}

.number-icon{
	font-weight:700;
	font-size:1.9rem;
}
.pay-root{
	position:relative;
}

.pay-root div{
	box-sizing: border-box;
	padding:2em 1.5em;
	position: relative;
}
.root-text{
	max-width:57%;
	font-weight:700;
	font-size:1rem;
	
}
.root-text .small-text{
	display:block;
	font-size:.85rem;
	font-weight:300;
}

@media screen and (min-width:1000px){
.pay-root{
	display:flex;
}
.pay-root div{
	width:calc(100% / 3);
}
.root-text{
	max-width:75%;
	}
}


/*-----apple----*/
.fnt-color_a{
	color:#E95283;
}
.a-div_01{
	background:url(../images/apple-icon01.png) no-repeat 95% 50% #FDEEF1;
}
.a-div_01::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 20px solid #FDEEF1;
  border-bottom: 0;
  position:absolute;
  left:45%;
  bottom:-20px;
  z-index:1;
}
.a-div_02{
	background:url(../images/apple-icon02.png) no-repeat 95% 50% #FBE5EA;
}
.a-div_02::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 20px solid #FBE5EA;
  border-bottom: 0;
  position:absolute;
  left:45%;
  bottom:-20px;
  z-index:1;
}

.a-div_03{
	background:url(../images/apple-icon03.png) no-repeat 95% 50% #FADCE3;
}

@media screen and (min-width:1000px){
.a-div_01{
	background:url(../images/apple-icon01.png) no-repeat 95% 50% #FDEEF1;
	background-size:120px;
}
.a-div_01::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid #FDEEF1;
  border-right: 0;
  position:absolute;
  left:100%;
  bottom:40%;
}
.a-div_02{
	background-size:55px;
}
.a-div_02::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid #FBE5EA;
  border-right: 0;
  position:absolute;
  left:100%;
  bottom:40%;
}
.a-div_03{
		background-size:55px;
	}
}
/*-----google----*/
.fnt-color_g{
	color:#EE7641;
}

.a-div_04{
	background:url(../images/google-icon01.png) no-repeat 95% 50% #FDEDE2;
}
.a-div_04::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 20px solid #FDEDE2;
  border-bottom: 0;
  position:absolute;
  left:45%;
  bottom:-20px;
  z-index:1;
}
.a-div_05{
	background:url(../images/google-icon02.png) no-repeat 95% 50% #FCE4D3;
}
.a-div_05::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 20px solid #FCE4D3;
  border-bottom: 0;
  position:absolute;
  left:45%;
  bottom:-20px;
  z-index:1;
}
.a-div_06{
	background:url(../images/google-icon03.png) no-repeat 95% 50% #FBD9C2;
}
@media screen and (min-width:1000px){
.a-div_04{
	background:url(../images/google-icon01.png) no-repeat 95% 50% #FDEDE2;
	background-size:55px;
}
.a-div_04::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid #FDEDE2;
  border-right: 0;
  position:absolute;
  left:100%;
  bottom:40%;
}
.a-div_05{
	background:url(../images/google-icon02.png) no-repeat 95% 50% #FCE4D3;
	background-size:55px;
}
.a-div_05::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 15px solid #FCE4D3;
  border-right: 0;
  position:absolute;
  left:100%;
  bottom:40%;
}
.a-div_06{
	background-size:55px;
	}
}



/*----------------------------------------------------------------------------

エリア

-----------------------------------------------------------------------------*/
.preparation_div-area{
	background:#ECF0F9;
	padding:30px 30px 30px;
	border-radius:10px;
	margin:0px 0 20px;
}
@media screen and (min-width:980px){
.preparation_div-area{
	padding:30px 30px 30px;
	margin:0px auto 20px;
	max-width:900px;
	}
}

/*----------------------------------------------------------------------------

事前準備

-----------------------------------------------------------------------------*/
.preparation_div{
	background: url(../images/tag_bg.png) no-repeat 50% 95% #ECF0F9;
	background-size:180px;
	padding:30px 30px 200px;
	border-radius:10px;
	position:relative;
}
@media screen and (min-width:980px){
.preparation_div{
	background: url(../images/tag_bg.png) no-repeat 95% 50% #ECF0F9;
	background-size:210px;
	padding:30px 30px 30px;
	}
}

.preparation_text{
	font-size:1rem;
	font-weight:700;
	text-align:center;
	margin:0 0 20px;
}
@media screen and (min-width:980px){
.preparation_text{
	font-size:1.4rem;
	text-align:left;
	}
}

.preparation_div ul{
	margin:20px 0 ;
}
.preparation_div ul li{
		max-width:100%;
		margin:8px 0 ;
		position: relative;
}

@media screen and (min-width:980px){
.preparation_div ul li{
		max-width:350px;
	}
}

.btnarrow-anc{
	display:block;
	color:#333;
}

.btnarrow-anc::after{
	content: '';
	position: absolute;
	top:20%;
	right: 0%;
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	transition: all .3s;
/*-----設定より差し替え（色味）-----*/
	border-bottom: 1px solid #333;
	border-right: 1px solid #333;
}
.btnarrow-anc:hover::after{
	top: 80%;
	border-bottom: 1px solid #F64F95;
	border-right: 1px solid #F64F95;
}
@media screen and (min-width:980px){
.btnarrow-anc::after{
	content: '';
	position: absolute;
	top:20%;
	right: 18px;
	width: 7px;
	height: 7px;
}
.btnarrow-anc:hover::after{
	top: 60%;
	}
}
.preparation_div_flex div{
		position: relative;
}

@media screen and (min-width:980px){
.preparation_div_flex{
	display:flex;
	justify-content:space-between;
	}
}

.preparationImg{
	margin:30px 0 ;
	text-align:center;
}
.preparation_div_flex div{
	margin:30px 0 30px;
	background:#ECF0F9;
	padding:30px 30px 10px;
	border-radius:10px;
}
@media screen and (min-width:980px){
.preparation_div_flex div{
	padding:30px 20px ;
	width:calc(97% / 2);
	}
}

.preparation_div_flex ul{
	font-size:.9rem;
	margin:0 0 10px;
}
.preparation_div_flex ul li:before{
	content:"※";
}
.preparation_div_flex span{
	color:#f00;
	font-weight:700;
}

.text-center_sp{
	text-align:center;
}
@media screen and (min-width:980px){
.text-center_sp{
	text-align:left;
	}
}
.preparation_a{
	position:relative;
}
.preparation_a::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 20px solid #ECF0F9;
  border-bottom: 0;
  position:absolute;
  left:45%;
  bottom:-20px;
  z-index:1;
}
@media screen and (min-width:1281px){
.preparation_a::after {
	content:"";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 15px solid #ECF0F9;
  border-right: 0;
  position:absolute;
  left:100%;
  bottom:50%;
	}
}
/*----------------------------------------------------------------------------

カードを作る

-----------------------------------------------------------------------------*/
.card-face{
	margin:45px auto 0;
}
.card-face dl{
	text-align:center
}
.card-face dl dt{
	max-width:270px;
	margin: 0 auto;
}
.card-text{
	margin:15px auto 0;

}
.card-text .free{
	display:block;
	color:#E95283;
	font-size:1.8rem;
	font-weight:700;
}
.pinkbg{
	background:#F8E7EA;
	padding:5px 20px 20px 20px;
	margin:20px 0  ;
}
.con-btn{
	margin:20px auto 0;
	text-align:center;
}
.con-btn-text{
	margin:10px auto 0;
	text-align:center;
	font-size:.8rem;
}
@media screen and (min-width:1281px){
.pinkbg{
	padding:0px 20px 20px 20px;
	margin:0px 0  ;
}
.card-face{
	display:flex;
	justify-content:center;
	align-items:center;
	}
.card-face dl dt{
	max-width:300px;
	margin: 0 auto;
}
.card-face div{
	width:calc(90% / 2);

	margin:0px;
	}

}
/*----------------------------------------------------------------------------

画像アイコン設定

-----------------------------------------------------------------------------*/
.icon-position{
	position:absolute;
}
.icon01{
	left:0px;
	top:50px;
}
.icon02{
	right:0px;
	bottom:-30px;
}
.icon03{
	right:10px;
	top:-70px;
}
.icon04{
	left:10px;
	bottom:10px;
}
.icon05{
	right:10px;
	top:-30px;
}
.icon06{
	right:10px;
	bottom:5px;
}

.icon06 img ,.icon04 img ,.icon03 img ,.icon05 img {
	max-width:50px;
}
.icon01 img ,.icon02 img{
	max-width:55px;
}


@media screen and (min-width:900px){
.icon06 img ,.icon04 img ,.icon03 img ,.icon05 img {
	max-width:70px;
}
.icon01 img , .icon02 img{
	max-width:100px;
}
.icon01{
	left:0px;
	top:80px;
	}
.icon02{
	right:10px;
	bottom:-60px;
	}
.icon03 , .icon05{
	top:-80px;
	}
.icon04{
	left:10px;
	bottom:10px;
	}
.icon06{
	right:10px;
	bottom:90%;
	}



}