/* 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 4rem;
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
  font-size: 3rem;
}
h2 span{position: relative;}
h2 span::before{
	content: "";
	width: 100%;
	height: 6px;
	background-color: var(--main-color1);
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: 0;
}
h2 img{
	padding-right: 1rem;
	width: 100px;
}

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

/* #contents =====================================================*/
#contents{
	/*ext-align: center;*/
	margin: auto;
	max-width: 1024px;
  width: 100%;
	box-sizing: border-box;
	background: none;
  background-color: transparent;
	position: relative;
}

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

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


/* top_btn =====================================================*/
#tops_btn {margin-left: 960px;position: fixed;opacity: 0;transition: 0.5s;left: auto;bottom: auto;z-index: 100;visibility: hidden;}
#tops_btn.fade-in {visibility: visible;filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1; opacity: 1;transition: 1.0s;}
#tops_btn .scroll-top {position: relative;}

/* parts =====================================================*/
.app_section{
	background-color: white;
}
.app_section a{
	text-decoration: none;
	text-align: left;
}
.app_section.first{
	padding-top: 4rem;
	background-color: transparent;
}
.app_section .app_inner .btn_app{
	margin:0 0 15px;
}
.app_inner{
	width: 82%;
  margin: auto;
	display: flex;
  background-color: var(--main-color3);
  justify-content: space-evenly;
  align-items: center;
}
.app_icon{width: 18%;}
.app_txt dt{
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 3.3rem;
	color: var(--main-color1);
	position: relative;
}
.app_txt dt::before{
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--main-color1);
	position: absolute;
	top: 3.3rem;
	left: 0;
}
.app_txt dd{
	margin: 1.8rem 0 0;
	font-size: 1.8rem;
}
.app_section a dd,.app_section a:link dd,.app_section a:visited dd,.app_section dd a:active {
color: #333;
}

.app_txt dd img{width: 2rem;float: right;}
.app_btnset{width: 20%;}
.app_btnset a{margin: 0.5rem; display: inline-block;}
.app_qr{width: 20%;padding: 3rem;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 4rem 4rem;
}
#movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#register_section,
#card_section,
#pay_section,
#btn_section{
	background-color: white;
	padding-bottom: 3rem;
}
.section_wrapper {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  width: calc(100% - 12.8vw);
  margin: 0 6.4vw;
}
.grid{ width: 30%;margin: 0 1.5%;padding-bottom:1.5rem;}
.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;}

#pay_section .section_wrapper {display: flex;justify-content: center;flex-wrap: wrap;}
#pay_section .grid{ width: 40%;margin: 0 5%;padding-bottom:1.5rem;}
#pay_section .grid_last{ width: 90%;margin: 0 5%;padding-bottom:1.5rem;}
#pay_section .grid_last img{
  max-width: 220px;
  width: 100%;
  margin: 0 auto;
  display: block;
}

.line{
	padding: 4rem 0 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: 5rem;
	padding: 2rem 3rem;
	background-color: var(--sub-color2);
}
.card_attention_wrapper{
	display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 60% 40%;
  justify-items: center;
  align-items: center;
}
.card_attention h3{
	margin: 0;
	padding: 1.5rem;
	font-size: 2.6rem;
	color: var(--main-color1);
}
.card_point{
	font-size: 3.8rem;
	padding-top: 5rem;
}
.card_point span{
	font-size: 1.2rem;
	margin-top: 2rem;
	display: inline-block;
}
.card_point strong{
	font-size: 6rem;
	margin-left: 1rem;
	display: inline-block;
	color: var(--main-color1);
}
.card_txt{
	color: var(--main-color1);
	font-size: 2rem;
	line-height: 2.2rem;
}
.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: -10%;
	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: -8%;
	transform: rotate(28deg);
	transform-origin: center center;
}
.card_img{
	grid-row: 1/3;
	grid-column: 2/3;
}
.btn_wrapper{
	display: flex;
}
.btn{
	width: 420px;
    display: block;
    margin: 0 auto;
    background: -moz-linear-gradient(top, #A83295, #D64990);
    background: -webkit-linear-gradient(top, #A83295, #D64990);
    background: linear-gradient(to bottom, #A83295, #D64990);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF!important;
    padding: 21px 0;
    border-radius: 34px;
	text-decoration: none!important;
	outline: none!important;
}
.footblank{
	margin-left: .5rem;
	width: 1.6rem;
	vertical-align: middle;
}

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

 #app_link .app_inner{
	width: 100%;
	display: grid;
	grid-template-rows: .4fr .3fr .3fr;
  grid-template-columns: 51.35% 1fr;
  align-items: center;
 }
 #app_link .app_inner .app_device{
 	grid-row: 1/4;
	grid-column: 1/2;
	padding-top: 3.6rem;
 }
  #app_link .app_catch{
  	margin: auto;
  	width: 75%;
 }
  #app_link .app_dlset{
  	display: flex;
  	flex-wrap: wrap;
  }
  #app_link .app_dlset .app_btnset{
  	margin-top: -72px;
  	order: 3;
  	width: 60%;
  	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;
    color: #333;
  }
  #app_link .btn_app{width: 45.5%;text-align: right;}
  #app_link .btn_play{width: 54.5%;text-align: left;}
  #app_link .app_txt{width: 60%; text-align: left;}
  #app_link .app_qr{width: 38%;padding: 2rem;}
  #app_link .app_notes{padding: 1rem 0;font-size: 1rem; text-align: left;}

.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;
 }
 .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%;
	padding: 0 212px;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	box-sizing: border-box;
}
#menu_step a{
	display: inline-block;
}
#menu_step a.step1{width: 35%;}
#menu_step a.step2{width: 36%;}
#menu_step a.step3{width: 29%;}

.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;	  
}

a[href^="tel:"]{pointer-events: none;}

.pc{display: block!important;}
.sp{display: none!important;}
.end_text{background-color:#909090; color:#FFFFFF; padding: 130px 0 10px 0;}
.end_text p{width:1024px; margin:0 auto; padding:10px 0;}

/* top navigation (3 column buttons) */
.top_nav {
  background: #FEF5F8;
  padding: 20px 0;
  margin-top: 30px;
}

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

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

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

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

.top_nav .icon {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}

/* section title（帯デザイン） */
.section_title {
	overflow: hidden;
	background: #FEF5F8;
	margin-top: 20px;
  }

.section_title h2 {

  background: var(--main-color1);
  color: #fff;
  padding: 20px 40px;
  font-size: 24px;
  font-weight: bold;
  position: relative;
}

.section_title h2::before,
.section_title h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  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 {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

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

/* タイトル帯（PC） */
#pay_section {
	text-align: center;
  }
  
  #pay_section h2 {
	display: inline-block;
	background: #f5e6ef;
	color: #c2007a;
	padding: 12px 24px;
	border-radius: 30px;
	margin: 40px auto 30px;
  }
  

  /* pay_section 中央寄せ */
#pay_section .grid {
	text-align: center;
  }
  
  
  #pay_section .grid_txt {
	text-align: center;
  }

#pay_section > p {
  margin-bottom: 30px;
}
  
  /* 画像サイズ調整 */
  #pay_section .img02 {
	max-width: 180px; /* PC */
	width: 100%;
	margin: 0 auto;
	display: block;
  }

  /* center specific register_img02 */
  #pay_section .grid_img.pc {
    display: block;
    margin: 0 auto;
  }

  #pay_section .grid_img.pc {
	max-width: 300px !important;
	width: 100%;
	display: block;
	margin: 0 auto;
  }

/* register_img03 横並び（PCのみ・対象限定） */
#pay_section img[src*="register_img03"] {
  width: 45%;
  max-width: 45%;
}


#pay_section .grid_bg figure {
  display: flex;
  justify-content: center;
  gap: 20px;
}
 

  /* 矢印フロー用 */
#pay_section .section_wrapper.flow {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
}

.flow_item {
	width: 45%;
}

.arrow_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2%;
	color: #c2007a;
}

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

.sp_br {
	display: inline;
  }

  #movie_section {
	margin-top: 30px;
  }

  #card_section {
	padding: 40px 0;
  }

 
  #pay_section { background: #FEF5F8; }
  #btn_section { background: #fff; }
  
  .section_title + #register_section,
  #register_section {
	background: #FEF5F8;
  }
  #register_section_02 {
	background: white;
  }


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

#card_section h2 {
  color: #B50081;
}

#charge_area{
	background: #FEF5F8;
}

#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,
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: 380px;
	margin: 50px auto 50px;
}

/* PCフッター */
#appFooter {
    background-color: #f5f5f5;
    padding: 40px 0 20px;
    width: 100%;
    font-size: 14px;
    color: #333;
}
#appFooter a {
    color: #333;
    text-decoration: none;
}
#appFooter a:hover {
    text-decoration: underline;
}

.note_red {
	color: #ff0000;
  }