/* BASE =====================================================*/
html{font-size: 62.5%;}
a img:hover,a img:active, a:hover, a:active{filter:alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; -moz-opacity:0.8; opacity: 0.8;}
.app_section a img:hover,.app_section a img:active,.sns_linkset a img:hover,.sns_linkset a img:active,.sns_linkset a:hover,.sns_linkset a:active{filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1; opacity: 1;}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.8rem;
	line-height: 1.5rem;
}

:root {
  --main-color1: #B50081;
  --main-color2: #F86ACF;
  --main-color3: #F9F0F3;
  --sub-color: #D13F93;
  --mono-tone1: #F0F0F0;
  --mono-tone2: #676767;
  --mono-tone3: #707070;
  --sub-color2: #FFF8CA;
}

img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

h1{
	margin: 0;
}
h2{
	margin: 0;
	padding: 6rem 0;
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
  flex-wrap: wrap;
}
h2 span{position: relative;line-height: 3rem;font-size: 2.4rem; width: 80%;}
h2 span::before{
	content: "";
	width: 100%;
	height: 6px;
	background-color: var(--main-color1);
	position: absolute;
	bottom: -10px;
	left: 0;
	z-index: 0;
}
h2 img{
	padding-right: 1rem;
	width: 100px!important;
}

figure{
	margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    /*vertical-align: baseline;*/
    background: transparent;
    list-style: none;
    display: block;
}

/* .contents =====================================================*/
#contents{
	text-align: center;
	margin: auto;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
	background: none;
  background-color: transparent;
	position: relative;
}


/* header =====================================================*/
#header {
	padding-top: 2vw;
	width: 100%;
	/*background-color: var(--main-color1);*/
}
#header-inner {
	margin: auto;
	width: 100%;
	text-align: center;
}
.back_link{
	margin: 2rem auto;
	padding: 1rem 0;
	background-color: white;
	display: inline-block;
	text-decoration: none;
	color: var(--main-color1);
	border-radius: 2rem;
	width: 80%;
	position: relative;
}

/* footer =====================================================*/


/* appFooter-inner -----*/
#appFooter .appFooter-inner .appFooter-title{margin-bottom: 4.533vw;width: 14.667vw;line-height: 1;}
#appFooter .appFooter-inner .appFooter-list{font-size: 0;margin-bottom: 5.6vw;}
#appFooter .appFooter-inner .appFooter-list li{position: relative;display: inline-block;font-size: 1.2rem;margin: 0 3.467vw 3.467vw 0;}
#appFooter .appFooter-inner .appFooter-list li:after{content: '';position: absolute;top: 13%;right: 0;display: block;width: 0.267vw;height: 1.2rem;background: #C1C1C1;}
#appFooter .appFooter-inner .appFooter-list li:nth-last-child(-n+2){margin-bottom: 0;}
#appFooter .appFooter-inner .appFooter-list li > a{padding-right: 3.467vw;color: #333333;}

/* appFooter-company -----*/
/* #appFooter .appFooter-company{background: url("../img/sp-footer_bg01.png") top/cover no-repeat;border: 1px solid #C3D4DE;border-radius: 4px;font-size: 1.2rem;padding: 3.733vw 4.267vw;margin-bottom: 5.333vw;} */
#appFooter .appFooter-company .company-name{font-weight: bold;margin-bottom: 1.867vw;color: #333333;}
#appFooter .appFooter-company a{color: #333333;}


/* appFooter-company -----*/
#appFooter .appFooter-aeonlist-wrapper{margin-bottom: 4.533vw;}
#appFooter .appFooter-aeonlist-wrapper .appFooter-aeonlist{font-size: 0;}
#appFooter .appFooter-aeonlist-wrapper .appFooter-aeonlist li{display: inline-block;font-size: 1.1rem;width: 41.6vw;margin-bottom: 1.333vw;}
#appFooter .appFooter-aeonlist-wrapper .appFooter-aeonlist li:last-child{margin-bottom: 0;}
#appFooter .appFooter-aeonlist-wrapper .appFooter-aeonlist li:before{content: '・';}
#appFooter .appFooter-aeonlist-wrapper .appFooter-aeonlist li a{color: #4D4D4D;}

/* appFooter-copyright -----*/
#appFooter .appFooter-copyright .appFooter-copyright-inner{display: flex;justify-content: space-between;margin-bottom: 4vw;}
#appFooter .appFooter-copyright .appFooter-copyright-inner .Footer-tree{width: 36.267vw;}
#appFooter .appFooter-copyright .copyright{font-size: 1rem;color: #808080;letter-spacing: -0.008em;}


/* parts =====================================================*/
.app_inner{
	padding-top: 1rem;
	display: flex;
  background-color: var(--main-color3);
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.app_icon{width: 20%;}
.app_txt dt{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 2.4rem;
	color: var(--main-color1);
	position: relative;
}
.app_txt dt::before{
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--main-color1);
	position: absolute;
	top: 2.4rem;
	left: 0;
}
.app_txt dd{
	margin: .7rem 0 0;
	font-size: 1.3rem;
	color: #333;
}
.app_txt dd img{width: 2rem!important;float: right;}
.app_btnset{width: 100%;order: 4; display: flex;padding: 0 2rem 1rem;box-sizing: border-box;}
.app_btnset a{margin: 0.5rem; display: inline-block;}
.app_btnset img{width: 80%!important;padding: 0 0.5rem; display:inline-block!important;}
.btn_app{width: 45.5%;text-align: right; margin:20px 0;}
.btn_play{width: 54.5%;text-align: left; margin:20px 0;}
.app_qr{width: 20%;box-sizing: border-box;}
.app_qr img{width: 100%;height: auto;}

.app_section a ,.app_inner a {display: contents; text-decoration: none;}

#movie_wrapper{
	padding: 0 2rem 2rem;
}
#movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.section_wrapper {display: flex;justify-content: start;flex-wrap: wrap;}
.grid{ width: calc(100% - 12.8vw);margin: 0 6.4vw;margin-bottom: 9.867vw;}
.grid .maru {position: absolute;top: -8px;left: -8px; height:40px;width:40px;border-radius:50%;line-height:40px;text-align:center;font-size: 2.0rem;font-weight: bold; color: #fff;}
.grid .maru.pink {background-color: var(--sub-color);}
.grid_bg {position: relative;margin-bottom: 16px;}
.grid_txt {font-size: 1.6rem;line-height: 1.5;text-align: left;}
.img_box{position: relative;}
.img01{position: absolute;top:-55vw;right:-2rem;width:30vw!important;display:inline-block!important;max-height: none;}

#pay_section .section_wrapper {display: flex;justify-content: start;flex-wrap: wrap;}
#pay_section .grid_last{ width: 90%;margin: 0 5%;padding-bottom:1.5rem;}
#pay_section .grid_last img{ width: 70%;}

.line{
	padding: 0;
	width: 100%;
	height: 0;
	border-top:1px var(--mono-tone1) solid;
	background-color: white;
}
.muted{
	color: var(--mono-tone2);
	font-size: 90%;
}

.card_attention{
	margin-bottom: 3rem;
	padding: 1rem;
	background-color: var(--sub-color2);
	overflow: hidden;
}
.card_attention_wrapper{
	display: grid;
  grid-template-rows: 1fr .5fr;
  grid-template-columns: 50% 50%;
  justify-items: center;
  align-items: center;
}
.card_attention h3{
	margin: 0;
	padding: 1.5rem;
    font-size: 2rem;
    line-height: 2.4rem;
	color: var(--main-color1);
}
.card_point{
	font-size: 2.4rem;
	padding-top: 0;
}
.card_point span{
	font-size: .8rem;
	margin-top: 2rem;
	display: inline-block;
}
.card_point strong{
	    font-size: 5rem;
    margin-top: 3rem;
	display: inline-block;
	color: var(--main-color1);
}
.card_txt{
	color: var(--main-color1);
	font-size: 1.4rem;
	line-height: 1.8rem;
	font-weight: bold;
	grid-row: 2/3;
	grid-column: 1/3;
}
.card_txt span{
	position: relative;
	display: inline-block;
}
.card_txt span::before{
	content: "";
	width: 3px;
	height: 48px;
	background-color: var(--main-color1);
	position: absolute;
	top: 0;
	bottom: 0;
	left: -2vw;
	transform: rotate(-28deg);
	transform-origin: center center;
}
.card_txt span::after{
	content: "";
	width: 3px;
	height: 48px;
	background-color: var(--main-color1);
	position: absolute;
	top: 0;
	bottom: 0;
	right: -2vw;
	transform: rotate(28deg);
	transform-origin: center center;
}
.btn_wrapper{
	padding: 3rem 0;
}
.btn{
	    min-width: 64.667vw;
    display: inline-block;
    margin: 0 auto 1.4rem;
    background: -moz-linear-gradient(top, #A83295, #D64990);
    background: -webkit-linear-gradient(top, #A83295, #D64990);
    background: linear-gradient(to bottom, #A83295, #D64990);
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
    padding: 2.933vw 4vw 3.467vw;
    border-radius: 32px;
    box-sizing: border-box;
    text-decoration: none;outline: none;
 }
.footblank{
	margin-left: .5rem;
	width: 1.6rem!important;
	vertical-align: middle!important;
	display:inline-block!important;
}


 #js-button img{
 		width: 44px;
 		height: 44px;
 }

 #app_link .app_inner{
	width: 100%;
	display: grid;
	grid-template-rows: .4fr .2fr .2fr .2fr;
  grid-template-columns: 51% 1fr;
  align-items: center;
 }
 #app_link .app_inner .app_device{
 	overflow: hidden;
  height: 70vw;
 	grid-row: 4/5;
	grid-column: 1/3;
	padding-top: 3.6rem;
 }
 #app_link .app_inner .app_device img{
	max-height:none!important;
 }
  #app_link .app_catch{
  	margin: auto;
  	width: 80%;
 	grid-row: 1/2;
	grid-column: 1/3;
 }
  #app_link .app_dlset{
  	display: flex;
  	flex-wrap: wrap;
 	grid-row: 2/3;
	grid-column: 1/3;
  }
  #app_link .app_dlset .app_btnset{
  	order: 3;
  	width: 100%;
  	display: flex;
  }
  #app_link .app_dlset dt{
      font-size: 2rem;
  }
  #app_link .app_dlset dd{
  	margin-top: 1rem;
    line-height: 1.8rem;
    font-size: 1.4rem;
  }
  #app_link .btn_app{width: 45.5%;text-align: right;}
  #app_link .btn_play{width: 54.5%;text-align: left;}
  #app_link .app_txt{
  	padding-left: 2rem;
		width: 65%;
    text-align: left;
    box-sizing: border-box;}
  #app_link .app_qr{
  	width: 35%;
    padding: 2rem;
    box-sizing: border-box;}
  #app_link .app_notes{padding: 1rem;font-size: 1rem; text-align: left;grid-row: 3/4;grid-column: 1/3;}

.sns_link{
 	background-color: var(--main-color1);
 }
 .sns_linkset{
 	padding: 2rem 0;
 	margin: auto;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 .sns_linkset a{
 	margin: 0 1rem;
 }
 .sns_linkset img{
 	width: 56px!important;
 }
  .step_img{
 	margin-top: 1rem;
 	position: relative;
 }
 .tit_img{
 	    /*max-width: 840px;*/
    margin: auto;
    padding: 4rem 0;
	background: #FEF5F8;
 }
 .tit_img_02{
	/*max-width: 840px;*/
margin: auto;
padding: 4rem 0;
background:white;
}
  #header-inner .sns_linkset{
 	padding: 1rem 0 0;
 }

#menu_step{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
}
#menu_step a{
	display: inline-block;
	width: 33%;
}
#menu_step a.step1{width: 35vw;}
#menu_step a.step2{width: 35vw;}
#menu_step a.step3{width: 30vw;}

.btn_card{
	  box-shadow: 0 0 4px rgb(0 0 0 / 15%), 0 2px 0 #fff inset;
    padding: 2rem;
    border-radius: 4rem;
    position: relative;
    background: rgb(248,248,248);
    background: linear-gradient(0deg, rgb(243 243 243) 0%, rgba(253,253,253,1) 100%);
}
.btn_card::before{
	  content: "";
	  width: calc(100% - 1rem);
	  height: calc(100% - 1rem);
	  box-shadow: 0 0 4px rgb(0 0 0 / 15%);
	  margin: .5rem;
	  position: absolute;
    top: 0;
    left: 0;
    border-radius: 4rem;	  
}

/* top_btn =====================================================*/
#tops_btn {position: fixed;opacity: 0;transition: 0.5s;right: 1vw;bottom: 4.267vw;z-index: 100;visibility: hidden;}
#tops_btn.fade-in {visibility: visible;opacity: 1.0;transition: 1.0s;}
#tops_btn .scroll-top {position: relative;}


.pc{display: none!important;}
.sp{display: block!important;}
.sp{display: block!important;}
.end_text{background-color:#909090; color:#FFFFFF; padding: 19.467vw 0 2vw 0;}
.end_text p{width:calc(100% - 12.8vw);margin:0 auto; padding:2vw 0;}

/* top navigation (3 column buttons) */
.top_nav {
  background: #FEF5F8;
  padding: 4vw 0;
  margin-top: 6vw;
}

.top_nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  width: 100%;
}

.top_nav li {
  width: 33.3%;
  text-align: center;
  position: relative;
}

.top_nav li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  width: 1px;
  height: 60%;
  background: var(--main-color1);
}

.top_nav a {
  text-decoration: none;
  color: var(--main-color1);
  font-weight: bold;
  display: block;
  font-size: 1.2rem;
}

.top_nav .icon {
  display: block;
  margin-top: 1vw;
  font-size: 1.6rem;
}


/* section title（帯デザイン） */
.section_title {
  text-align: center;
  margin: 8vw 0 5vw;
  overflow: hidden;
}

.section_title h2 {
  background: var(--main-color1);
  color: #fff;
  padding: 3vw 8vw;
  font-size: 2.2rem;
  font-weight: bold;
  position: relative;
  /*width: 100%;*/
  margin: 0;
  line-height: 1.6;
}

.section_title h2::before,
.section_title h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 100%;
  background: var(--main-color1);
  transform: translateY(-50%);
  z-index: -1;
}

.section_title h2::before {
  right: 100%;
}

.section_title h2::after {
  left: 100%;
}

/* center specific grid items */
.center-grid {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.center-grid .grid_bg {
  display: flex;
  justify-content: center;
}

/* タイトル帯（SP） */
#pay_section {
	text-align: center;
  }
  
  #pay_section h2 {
	display: inline-block;
	background: #f5e6ef;
	color: #c2007a;
	padding: 3vw 6vw;
	border-radius: 999px;
	margin: 6vw auto 6vw;
	font-size: 4vw;
  }

  #pay_section .img02 {
	max-width: 50vw;
  }

  .arrow_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 0;
	color: #c2007a;
  }

  .arrow_icon::before {
    content: "▼";
    font-size: 24px;
    text-align: center;
    display: block;
  }

  /* ▼ 矢印（SP用：中央配置） */
.arrow_icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 16px 0;
  }
  
  .arrow_icon::before {
	content: "▼";
	font-size: 24px;
	display: block;
	text-align: center;
  }

  .sp_br {
	display: block;
  }

  #movie_section {
	margin-top: 6vw;
  }

  #card_section {
	padding: 6vw 0;
  }

  #card_section h2 {
	font-size: 1.8rem;
	color: #B50081;
  }

  #register_section { background: #FEF5F8; }
#pay_section { background: #FEF5F8; }
#btn_section { background: #fff; }

.section_title {
	margin: 8vw 0 0;
	background: #FEF5F8;
  }

  .section_title_02 {
	margin: 8vw 0 0;
	background: white;
  }


  .tit_img img {
    width: 100%;
    display: block;
  }

  #charge_area{
	background: #FEF5F8;
}

.waon_section {
	background: #fff;
  }
  
  #contents .waon_section {
	background: #fff;
  }

  /* .contents =====================================================*/
.contents * {
	box-sizing: border-box;
}

.section {
	width: 100%;
	margin-top: 100px;
}

.section-inner {
	width: 924px;
	margin: 0 auto;
}

h2.ttl {
	margin-bottom: 40px;
	padding: 6px 0 4px;
	font-size: 36px;
	line-height: 46px;
	letter-spacing: 0.05em;
	text-align: center;
	background: #b60d81;
	color: #ffffff;
}

.ttl_cpday {
	text-align: center;
	font-size: 18px;
	margin-bottom: 10px;
	font-weight: 900;
	color: #B60081;
}

/* .indent {
	margin-left: 35px;
} */
.section h3 {
	font-size: 28px;
	line-height: 38px;
	text-align: center;
	color: #B60081;
}

.section p, .section li {
	font-size: 20px;
	line-height: 30px;
}

.section .note {
	padding-left: 1em;
	text-indent: -1em;
}

.list ul {
	padding-left: 1em;
	text-indent: -1em;
}

.listlist li {
	padding-left: 1em;
	text-indent: -1em;
}

.section span.sup {
	position: relative;
	font-size: 0.8em;
	top: -4px;
}

.other .linkBox {
	display: flex;
}

.other .linkBox a {
	flex: 0 0 442px;
	box-shadow: 0 0 8px #CBB790;
}

.other .linkBox a:nth-child(1) {
	margin-right: 40px;
}

.section .period-text {
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: bold;
	line-height: normal;
	text-align: center;
	letter-spacing: 0.05em;
}
.section .period-text_2 {
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	letter-spacing: 0.05em;
	width: 47%;
}

.detail {
	width: 100%;
	margin: 50px auto 0;
}

/* SPフッター */
@media screen and (max-width: 640px) {
    #appFooter {
        padding: 9.067vw 6.4vw 5.867vw;
        font-size: 12px;
    }
}

.contact .list li {
	font-size: 18px;
	line-height: 30px;
	text-align: left;
	position: relative;
}
.contact .list li {
	font-size: 16px;
	line-height: 26px;
}

.contact .list li a {
	color: #b60081;
}

@media screen and (max-width: 640px) {
	#header {
		padding-top: 17vw;
		margin-bottom: 15px;
	}

	#header-inner {
		width: 100%;
	}

	.section {
		margin-top: 50px;
	}

	.section-inner {
		width: 82.134%;
	}
	
		#header-inner {
			width: 100%;
		}
	
		.section {
			margin-top: 50px;
		}
	
		.section-inner {
			width: 82.134%;
		}
	
		h2.ttl {
			margin-bottom: 20px;
			padding: 6px 10px 5px;
			font-size: 20px;
			line-height: 28px;
		}
	
		.section h3 {
			font-size: 18px;
			line-height: 28px;
		}
	
		.section p, .section li {
			font-size: 18px;
			line-height: normal;
		}
	
		.other .linkBox {
			display: block;
		}
	
		.other .linkBox a {
			display: block;
			width: 100%;
			height: 100%;
		}
	
		.other .linkBox a:nth-child(1) {
			margin-right: 0;
			margin-bottom: 30px;
		}
	
		.period {
			margin-bottom: 0;
		}
	
		.section .period-text {
			margin-bottom: 0;
			font-size: 24px;
			text-align: center;
			line-height: normal;
		}
	
		.period-text strong {
			font-size: 24px;
			vertical-align: 0;
		}
	
		.howto .subttl {
			font-size: 18px;
		}
	
		.howto .subttl::before,
		.howto .subttl::after {
			width: 20px;
		}
	
		.howto .subttl::before {
			left: calc(50% - 6.5em);
		}
	
		.howto .subttl::after {
			right: calc(50% - 6.5em);
		}
	
		.howto .step ul {
			display: block;
			margin-top: 20px;
		}
	
		.howto .step ul li {
			position: relative;
			margin-right: 0;
			margin-bottom: 40px;
		}
	
		.howto .step ul li:last-child {
			margin-right: 0;
			margin-bottom: 0;
		}
	
		.howto .step ul li::after {
			position: absolute;
			content: '';
			display: block;
			width: 40px;
			height: 40px;
			box-sizing: border-box;
			border-top: 20px solid #6a3906;
			border-right: 20px solid transparent;
			border-bottom: 20px solid transparent;
			border-left: 20px solid transparent;
			left: 0;
			right: 0;
			margin: auto;
			bottom: -50px;
		}
	
		.howto .step ul li:last-child::after {
			display: none;
		}
	
		.howto ul+.note {
			margin-top: 15px;
		}
	
		.howto .linktxt {
			margin-top: 15px;
		}
	
		.howto .linktxt a {
			color: #B60081;
		}
	
		.schedule ul+.note {
			margin-top: 15px;
		}
	
		.detail {
			width: 100%;
			margin: 50px auto 50px;
		}
	
		.contents ul.download {
			margin: 50px auto 15px;
			column-gap: 20px;
		}
	
		.contents .dl ul.download {
			margin-top: 10px;
		}
	
		.notes {
			width: fit-content;
			margin: 0 auto;
		}
	
		.notes li {
			font-size: 16px;
			line-height: 24px;
		}
	
		.section.isBtm {
			margin-bottom: 40px;
		}
	
		.contact {
			margin-top: 40px;
		}
	
		.contact .list li {
			font-size: 16px;
			line-height: 26px;
		}
	
		.contact .list li a {
			color: #b60081;
		}
	
		.notice {
			margin: auto;
			display: block;
		}


		  #pay_section p{
			line-height: 1.6;
			padding-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;
		  }

		  .note_red {
			color: #ff0000;
		  }

		}

		.section_wrapper .detail img {
			display: block;
			margin: 0 auto;
			width: auto;
		  }