/*
 * 20231101 ~ 20231231
 */

/*+++++++++++++++++++++++++++++++++++++++++
  　共通
*+++++++++++++++++++++++++++++++++++++++++*/
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body {
  font-size: 16px;
  line-height: 1.5;
  font-family:  'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans W3",  "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #505050;
  position: relative;
}
.inner {
  padding: 0 15px;
  margin: 0 auto;
  width: 100%;
  max-width: 1156px;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}
a:hover {
  opacity: 0.8;
}
@media only screen and (min-width: 769px) {
  .sec {
    margin-top: 52px;
  }
}
@media only screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .sec {
    margin-top: 40px;
  }
}

/*----- アセット -----*/
.txm{
	color: #4A4A4A;
	font-size: 21px;
	font-weight: bold;
}

.tx-ce { text-align: center; }
.tx-ri { text-align: right; }
.tx-le { text-align: left; }

.tx-w_sb { font-weight: 700; }
.tx-w_b { font-weight: 700; }

.tx-s_10 { font-size: 10px; }
.tx-s_12 { font-size: 12px; }
.tx-s_14 { font-size: 14px; }

.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.mt24 { margin-top: 24px; }
.mt32 { margin-top: 32px; }

.img-ce {
  display: block;
  margin: 0 auto;
}

.anchor-text {
  display: flex;
  justify-content: center;
  font-size: 18px;
  color: #053ECB;
  text-decoration: underline;
}
.anchor-text:hover {
  opacity: 0.6;
}
@media only screen and (min-width: 769px) {
  .spview {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .pcview {
    display: none;
  }

  .anchor-text {
    font-size: 14px;
  }
}
/*----- 点滅 -----*/

@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.blink {
    animation: blinking 1s ease-in-out infinite alternate;
}

/*----- btn -----*/
.btn {
  padding: 13px 20px;
  display: inline-flex;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0 6px 0 #000;
  color: #fff;
  font-weight: 700;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.btn:hover {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #000;
}
.btn--red {
  background-color: #CB050B;
  box-shadow: 0 6px 0 #70050D;
}
.btn--red:hover {
  box-shadow: 0 2px 0 #70050D;
}

.btn--charcoal {
  background-color: #9B7D55;
  box-shadow: 0 6px 0 #50412D;
}
.btn--charcoal:hover {
  box-shadow: 0 2px 0 #50412D;
}
.btn--p {
  background-color: #C25E91;
  box-shadow: 0 6px 0 #984872;
}
.btn--p:hover {
  box-shadow: 0 2px 0 #984872;
}

.btn--y {
  background-color: #C08F07;
  box-shadow: 0 6px 0 #94700B;
}
.btn--y:hover {
  box-shadow: 0 2px 0 #94700B;
}
.new_btn{
  padding: 20px;
  display: inline-flex;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  background-color: #CB050B;
}

/*----- アコーディオン -----*/
.accordion__ttl {
  position: relative;
  cursor: pointer;
}
.accordion__ttl:before, .accordion__ttl:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translate(0, -50%);
  width: 20px;
  height: 4px;
  transition: 0.3s ease transform;
}
.accordion__ttl:after {
  transform: translate(0, -50%) rotate(-90deg);
}
.accordion__ttl.active:after {
  transform: translate(0, -50%) rotate(0deg);
}
.accordion__box {
  max-height: 0;
  overflow: hidden;
  transition: 0.5s ease max-height;
}

/*+++++++++++++++++++++++++++++++++++++++++
  　Layout
*+++++++++++++++++++++++++++++++++++++++++*/
/* header
------------------------------------------*/
header {
  border-bottom: 3px solid #CB050B;
}
.header__box {
  padding: 17px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 160px;
}
@media only screen and (max-width: 768px) {
  .header__box {
    padding: 12px 0 9px;
  }
  .logo {
    width: 100px;
  }
}

/* footer
------------------------------------------*/
footer {
  margin-top: 180px;
  padding: 28px 0 64px;
  border-top: 10px solid #CB050B;
  position: relative;
}
.footer__top {
  position: absolute;
  top: -60px;
  left: calc(50% - 70px);
  width: 135px;
}
.footer__box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.footer__box:nth-of-type(2) {
  margin-top: 16px;
}
.footer__logo img {
  width: 140px;
}
.footer__nav {
  display: flex;
  flex-direction: row;
  gap: 30px;
  font-size: 18px;
}
.footer__box {
  font-size: 11px;
}
@media only screen and (max-width: 768px) {
  footer {
    margin-top: 120px;
    padding: 35px 0 46px;
  }
  .footer__box:first-of-type {
    flex-direction: column-reverse;
    gap: 26px;
  }
  .footer__nav {
    width: 100%;
    justify-content: center;
    gap: 46px;
    font-size: 14px;
  }
  .footer__box:nth-of-type(2) {
    flex-direction: column;
  }
}


/* MV
------------------------------------------*/
.mv {
  margin-top: 10px;
}
.mv_catch{
margin: 20px auto;
}
.mv_catch h1{
margin: 10px;
}
.mv_catch h1 img{
width: 56%;
}
.mv_main{
background-image: url(../../images/202507/main_bg.png);
background-position: center;
background-repeat: no-repeat;
background-size:cover;
padding: 20px 0;
}
.mv_main h1 img{
width: 600px;
margin: 10px auto;
}
.mv_main .cta_mvbox{

}
@media only screen and (max-width: 980px) {
.mv_main{
padding: 60px 0;
}
}
@media only screen and (max-width: 768px) {
.mv_catch h1 img{
width: 100%;
}
.mv_main{
background-image: url(../../images/202507/main_bg_sp.png);
background-size:auto 100%;
padding: 70px 0;
}
.mv_main h1 img{
width: 100%;
margin: 10px auto;
}
}
@media only screen and (max-width: 600px) {
.mv_main{
padding: 70px 0;
}
}
@media only screen and (max-width: 400px) {
.mv_main{
padding: 50px 0;
}
}
/* 新しいCTA
------------------------------------------*/
.cta_w{
width: 350px;
}
.middle_ctabox{
margin: 20px auto;
}
.middle_ctabox .inner h2{
	color: #707070;
	font-size: 24px;
	margin: 40px auto 20px auto;
}
.middle_ctabox2{
margin: 20px auto;
	width: 100%
}
.middle_ctabox2 .inner h2{
	color: #707070;
	font-size: 21px;
	margin: 40px auto 20px auto;
}
.heading-line {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #707070;
}

.heading-line::before,
.heading-line::after {
    width: 1px;
    height: 20px;
    background-color: #707070;
    content: '';
}

.heading-line::before {
    transform: rotate(-35deg);
    margin-right: 20px;
}

.heading-line::after {
    transform: rotate(35deg);
    margin-left: 20px;
}
@media only screen and (max-width: 768px) {
.cta_w{
width: 80%;
}
.middle_ctabox .inner h2{
	font-size: 16px;
}
.middle_ctabox2 .inner .cta_w{
width: 100%;
}
	.middle_ctabox2 .inner h2{
	font-size: 14px;
}
}


/* MV下のCTA
------------------------------------------*/
.ctaBtn__list {
  padding: 42px 20px;
  background: #E8E8E8;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
}
.ctaBtn__list .btn {
  width: 250px;
}
@media only screen and (max-width: 768px) {
  .ctaBtn__list {
    padding: 26px 0;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* ご家族やお友達にシェアしよう
------------------------------------------*/
.catch {
  margin-top: 104px;
}
.catch__title img {
  width: 100%;
  max-width: 582px;
}
.catch__list {
  margin: 70px auto 0;
  max-width: 960px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: min(calc(100vw/1127 * 102),102px);
}

@media only screen and (max-width: 768px) {
  .catch {
    margin-top: 66px;
  }
  .catch__title img {
    margin: 0 auto;
    max-width: 400px;
  }
  .catch__list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 25px;
    column-gap: 45px;
  }
  .catch__list > li {
    width: calc(50% - (45px/2));
  }
}


/* CTA
------------------------------------------*/
.cta {
  padding: 52px 0;
  background: #F9F4F0;
  position: relative;
}
.cta::before {
  content: "";
  background: url(../../images/202311/cta/cta-bg.png) no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.cta :is(.cta__title,.cta__list, .anchor-text ) {
  position: relative;
  z-index: 2;
}
.cta__title img {
  width: 100%;
  max-width: 462px;
}
.cta__list {
  margin: 58px auto 0;
  max-width: 1004px;
  display: flex;
  flex-direction: row;
  gap: min(6.97vw, 80px);
}
.cta__list li {
  width: calc(50% - 10px);
  position: relative;
}
.cta__list .btn {
  margin-top: 24px;
  width: clamp(10rem, 6.201rem + 7.92vw, 11.875rem);
  position: absolute;
  bottom: clamp(3.688rem, 1.028rem + 5.54vw, 5rem);
  left: clamp(5.938rem, 0.112rem + 12.14vw, 8.813rem);
}
.cta__list + .anchor-text {
  margin-top: 4px;
}
@media only screen and (max-width: 768px) {
  .cta::before {
    background: url(../../images/202311/cta/cta-bg_sp.png) no-repeat;
    background-size: 100%;
  }
  .cta__list {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }
  .cta__list li {
    width: 100%;
    max-width: 466px;
  }
  .cta__list .btn {
    width: clamp(9.375rem, 2.946rem + 28.57vw, 11.875rem);
    bottom: clamp(3.125rem, -3.304rem + 28.57vw, 5.625rem);
    left: clamp(5.563rem, -2.634rem + 36.43vw, 8.75rem);
  }
  .cta__list + .anchor-text {
    margin-top: 25px;
  }
}

/* お友達紹介キャンペーンって何？
------------------------------------------*/
.whatis {
  margin-top: 100px;
}
.whatis__title img {
  width: 100%;
  max-width: 582px;
}
.whatis__img {
  margin-top: 34px;
}

.gift {
  margin-top: 100px;
}
.gift__title {
  text-align: center;
  color: #707070;
  font-size: 18px;
  font-weight: bold;
}
.gift__list {
  margin: 46px auto 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 60px;
  row-gap: 50px;
  max-width: 925px;
}
.gift__list li {
  width: calc((100% - 120px)/3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gift__text {
  margin-top: 58px;
  font-size: 18px;
  font-weight: 500;
  color: #707070;
  text-align: center;
}
.gift__text + .anchor-text {
  margin-top: 25px;
}
@media only screen and (max-width: 768px) {
  .gift {
    margin-top: 40px;
  }
  .gift__title {
    font-size: 14px;
  }
  .gift__list {
    margin-top: 25px;
    gap: 30px;
    max-width: 400px;
  }
  .gift__list li {
    width: calc(28% - 10px);
  }
  .gift__text {
    margin-top: 25px;
    font-size: 12px;
  }
  .gift__text + .anchor-text {
    margin-top: 15px;
  }
}
/*プレステップ----------------------*/
.pre-step{
width: 1000px;
margin: 0 auto;
}
.pretubarea{
display: flex;
flex-direction: row;
	justify-content: center;
}
.pretubarea .pretub{
	width: 50%;
	font-size: 21px;
	font-weight: bold;
	color: #525252;
	padding: 20px 0;
}
.pre_bgr{
background-image: url(../../images/202507/tiler.png);
}
.pre_bgb{
background-image: url(../../images/202507/tileb.png);
}
.pre-step .bg_half {
    background: linear-gradient(to right, #dff2fc 0%, #dff2fc 50%, #fffcdb 50%, #fffcdb 100%);
	padding: 20px 5px;
}
.pre-step .bg_half .steparea{
	width: 250px;
	margin: 20px auto;
	text-align: center;
	font-weight: bold;
	border-radius: 10px;
	background-color: #fff;
	padding: 10px;
	font-size: 21px;
}
.pre-step .bg_half .steparea span{
color: #FF65DC;
}

.pre-step .bg_half .steparea span::before{
content: "・";
	font-weight: bold;
}
.pre-step .bg_half .steparea span::after{
content: "・";
	font-weight: bold;
}
.pre-step .bg_half .instep{
display: flex;
flex-direction: row;
justify-content:center;
width: 100%;
}
.pre-step .bg_half .instep .act {
	width: 300px;
	margin: 10px auto;
	text-align: center;
	font-weight: bold;
	border-radius: 10px;
	background-color: #fff;
	padding: 20px 5px;
	font-size: 21px;
}
.pre-step .bg_half .instep .act .stx {
	color: #f00;
	font-size: 28px;
}
.pre-step .bg_half .instep .actarea{
display: flex;
flex-direction: row;
align-items: center;
}
.pre-step .bg_half .instep .actarea .imgbox{
	width: 36%;
	margin-right: 5px;
}
.pre-step .bg_half .addarea{
	width: 380px;
	margin: 10px auto 20px auto;
	text-align: center;
	font-weight: bold;
	border-radius: 10px;
	background-image: url(../../images/202503/bk_add.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 360px;
	padding: 10px;
	font-size: 24px;
}
.pre-step .bg_half .addarea img{
width: 90px;
}
.pre-step .bg_half .addarea .stx{
	color: #f00;
	font-size: 28px;
}
.pre-step .bg_half .instep .act .addctx{
	width: 80%;
	margin: 10px auto;
	font-size: 14px;
	color: #5F5F5F;
}
.pre-step .bg_half .addmyl{
width: 450px;
margin: 20px auto;
	background-color: #fff;
	border-radius: 10px;
	padding: 5px;
}
@media only screen and (max-width: 900px) {
		.pre-step{
width: 100%;
margin: 0 auto 10px auto;
	}
}
@media only screen and (max-width: 768px) {
.pre-step .bg_half .instep .act {
	width: 35%;
	font-size: 21px;
margin: 10px auto;
	}
.pre-step .bg_half .instep .act .stx {
	font-size: 24px;
}

}
@media only screen and (max-width: 600px) {
.pretubarea .pretub{
		font-size: 18px;
	width: 50%;
}
	.pre-step{
width: 100%;
margin: 0 auto 10px auto;
	}
.pre-step .bg_half .steparea{
	width: 40%;
	font-size: 16px;
}
.pre-step .bg_half .instep{
width: 100%;
}
.pre-step .bg_half .instep .act {
	width: 45%;
	font-size: 18px;
margin: 10px;
	}
.pre-step .bg_half .instep .act .stx {
	font-size: 21px;
}
	.pre-step .bg_half .instep .actarea .imgbox{
	width: 36%;
		display: flex;
		align-items: center;
}
.pre-step .bg_half .addarea{
width: 240px;
font-size: 16px;
background-image: url(../../images/202503/bk_add.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.pre-step .bg_half .addarea img{
width: 60px;
}
.pre-step .bg_half .addarea .stx{
	color: #f00;
	font-size: 18px;
}
.pre-step .bg_half .instep .act .addctx{
	margin-top: 10px;
	font-size: 12px;
	color: #5F5F5F;
}
	.pre-step .bg_half .addmyl{
width: 90%;
}
}
@media only screen and (max-width: 400px) {
.pre-step .bg_half .instep .act {
	width: 45%;
	font-size: 12px;
margin: 10px;
	}
.pre-step .bg_half .instep .act .stx {
	font-size: 14px;
}
}

/* ステップ
------------------------------------------*/
.step {
  margin-top: 40px;
}
.step__title img {
  width: 100%;
  max-width: 582px;
}
.step__tab {
  margin-top: -19px;
}
.tab__btn {
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, -4.098rem + 11.14vw, 3.75rem);
padding: 0 15px;
}
.tab__name {
  cursor: pointer;
  width: fit-content;
  display: flex;
  flex-direction: row;
}
.tab__name img {
  width: 100%;
  max-width: 260px;
}
.tab__name:hover {
  opacity: 0.8;
}

.tab__content {
  display: none;
  border: 3px solid #00e6f5;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.tab__content.is-show {
  display: block;
}
.tab__inner {
  margin: 20px clamp(3.125rem, -7.972rem + 23.12vw, 8.313rem);
}
.tab_inner_title{
font-size: 28px;
font-weight: bold;
color: #4A4A4A;
border-bottom: 1px dashed #4A4A4A;
}
.tab_inner_title p{
	margin-bottom: 20px;
}
.tab__inner, .merit {
  position: relative;
  z-index: 2;
}

.step__list > li {
  padding: 10px;
  border-radius: 30px;
  text-align: center;
}
.step__list .step_nov {
margin: 0 auto 20px auto;
width: 36%;
}
.step__box__title {
  margin: 0 auto;
  padding: 0 18px;
  width: fit-content;
  font-size: 24px;
  font-weight: 700;
}
.step__list .alart{
border-radius: 10px;
padding: 2px 0;
margin: 20px auto;
}
.alart_r{
background-color: #eaf5fd;
}
.alart_b{
background-color: #feebbe;
}
.step__list .alart .inner_alart_box{
	margin: 10px;
	display: flex;
	flex-direction: row;
}
.step__list .alart .inner_alart_box .leftbox{
width: 100px;
margin-right: 10px;
}
.step__list .alart .inner_alart_box .rightbox{
display: flex;
align-items: center;
text-align: left;
font-size: 16px;
}
.step__list .alart .inner_alart_box2{
	margin: 0 auto 20px auto;
	font-weight: normal;
	font-size: 16px;
	width: 90%;
}
.step__list .alart .inner_alart_box2 .alartps{
padding-left: 1.2em;
}
.step__list .alart .inner_alart_box2 .alartps p{
margin: 0 auto;
width: 60%;
text-align: left;
counter-increment: cnt;
text-indent: -1.2em;
}
.step__list .alart .inner_alart_box2 .alartps p::before{
content: "※";
}
.step__list .alart .inner_alart_box2 table{
	margin: 20px auto;
}

@media only screen and (max-width: 860px) {
  .step__list > li::before {
    left: -50px;
  }
	.tab_inner_title{
font-size: 24px;
font-weight: bold;
color: #4A4A4A;
border-bottom: 1px dashed #4A4A4A;
}
.tab_inner_title p{
	margin-bottom: 20px;
}
}
@media only screen and (max-width: 768px) {
.step__box__title {
  margin: 0 auto;
  padding: 0 18px;
  width: fit-content;
  font-size: 21px;
  font-weight: 700;
}
}
@media only screen and (max-width: 600px) {
	.tab_inner_title{
font-size: 18px;
font-weight: bold;
color: #4A4A4A;
border-bottom: 1px dashed #4A4A4A;
}
.tab_inner_title p{
	margin-bottom: 20px;
}
	.step__list .set_imgb{
		width: 60%;
		margin: 20px auto;
	}
.step__box__title {
  margin: 0 auto;
  padding: 0 18px;
  width: fit-content;
  font-size: 14px;
  font-weight: 700;
}
.step__list .alart .inner_alart_box .leftbox{
width: 100px;
margin-right: 10px;
}
.step__list .alart .inner_alart_box .rightbox{
display: flex;
align-items: center;
text-align: left;
font-size: 12px;
}
.step__list .alart .inner_alart_box2{
	margin: 0 auto 20px auto;
	font-weight: normal;
	font-size: 12px;
	width: 90%;
	text-align: left;
}
.step__list .alart .inner_alart_box2 .alartps p{
margin: 0 auto;
width: 80%;
}
}


.step__box__title + img {
  margin-top: 25px;
}
.step__list p {
  font-size: 18px;
  font-weight: 700;
}

/* ---- 紹介する側 ---- */
/* step01 */
.step__list__01 img {
  margin-right: -40px;
}
.step__list__01-check {
  margin: 40px auto 0;
  width: fit-content;
  text-align: left;
}
.step__list__01-check p {
  padding-left: 54px;
  position: relative;
  width: fit-content;
}
.step__list__01-check p::before {
  content: "";
  background: url(../../images/202408/step/check_p.png) no-repeat;
  position: absolute;
  top: -17px;
  left: 0;
  width: 41px;
  height: 41px;
}
.step__list__01-check p:nth-of-type(n+2) {
  margin-top: 23px;
}
.step__list__01-check + .anchor-text {
  margin-top: 25px;
}
/* step02 */
.step__list__02-text01 {
  margin-top: 8px;
}
.step__list__02-text01 span {
  color: #CB050B;
}
.step__list__02 .btn {
  margin-top: 25px;
  width: 190px;
}
.step__list__02-text02 {
  margin-top: 10px;
}
/* step03 */
.step__list__03-text01 {
  margin-top: 46px;
}
/* step04 */
.step__list li.step__list__04 {
  background: #C25E91;
  color: #fff;
}
.step__list__04__title {
  font-size: 28px;
  font-weight: 700;
}
.step__list p.step__list__04-text01 {
  margin-top: 15px;
  font-weight: 400;
}
.step__list__04__img {
  margin: 15px auto 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 700px;
}
.step__list p.step__list__04-text02 {
  margin-top: 15px;
  font-weight: 400;
  font-size: 14px;
}
.step__list__05__img {
  margin: 15px auto 0;
  display: flex;
align-items: center;
  justify-content: center;
  max-width: 700px;
}

/* ---- 紹介される側 ---- */
.tab__content-frend.tab__content {
  border-color: #fdd000;
  background: #fff;
}
.tab__content-frend .tab__inner {
  margin-bottom: 0;
}
.tab__content-frend .step__list__01-check p::before {
  background: url(../../images/202408/step/check_y.png) no-repeat;
}
/* step03 */
.tab__content-frend .step__list__03-text01 span {
  color: #CB050B;
}
.tab__content-frend .btn {
  display: flex;
  width: fit-content;
  margin: 33px auto 0;
  width: 190px;
}
.tab__content-frend .step__list__03-text01 {
  margin-top: 25px;
}
/* step04 */
.tab__content-frend .step__list li.step__list__04 {
  background: #C08F07;
}
/* メリット */
.merit {
  margin: 65px 30px 60px;
}
.merit__title img {
  max-width: 285px;
}
.merit__title + .anchor-text {
  margin-top: 10px;
}
.merit__list {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 34px;
  row-gap: 50px;
}
.merit__list > li {
  width: calc(50% - 17px);
}

@media only screen and (max-width: 768px) {
  .step {
    margin-top: 40px;
  }
  .step__tab {
    margin-top: 28px;
  }
  .tab__btn {
    gap: 4px;
  }
  .tab__inner {
    margin: 20px 13px;
  }
  .step__list > li {
    padding:10px;
    border-radius: 10px;
  }
  .step__list > li::before {
    width: 140px;
    left: calc(50% - 70px);
    top: -47px;
  }
  .step__list > li:nth-of-type(n+2) {
    margin-top: 10px;
  }
  .step__list > li:nth-of-type(n+2)::after {
    border-left-width: 32.5px;
    border-right-width: 32.5px;
    border-top-width: 27px;
    left: calc(50% - 32px);
    top: -53px;
  }
  .step__list p {
    font-size: 14px;
    font-weight: 500;
  }
  .step__box__title {
    font-size: 14px;
  }
  /* ---- 紹介する側 ---- */
  /* step01 */
  .step__list__01 img {
    max-width: 111px;
  }
  .step__list__01-check {
    margin-top: 10px;
  }
  .step__list__01-check p {
    padding-left: 29px;
  }
  .step__list__01-check p::before, .tab__content-frend .step__list__01-check p::before {
    top: 0;
    width: 25px;
    height: 25px;
    background-size: 25px;
  }
  .step__list__01-check + .anchor-text {
    margin-top: 20px;
  }
  /* step02 */
  .step__list__02 img {
    margin-top: 0;
    max-width: 157px;
  }
  .step__list__02-text01 {
    margin-top: 15px;
  }
  .step__list__02 .btn {
    margin-top: 17px;
  }
  .step__list__02-text02 {
    margin-top: 8px;
    font-size: 12px;
  }
  /* step03 */
  .step__list__03 img {
    margin-top: 27px;
    max-width: 197px;
  }
  /* step04 */
  .step__list__04__title {
    font-size: 20px;
  }
  .step__list p.step__list__04-text01 {
    margin-top: 40px;
  }
  .step__list__04__img img {
    width: 100%;
  }
  .step__list p.step__list__04-text02 {
    font-size: 12px;
  }
  /* ---- 紹介される側 ---- */
  /* step03 */
  .tab__content-frend .btn {
    margin-top: 17px;
  }
  .tab__content-frend .step__list__03-text01 {
    margin-top: 10px;
  }
  /* メリット */
  .merit {
    margin: 38px 10px 44px;
  }
  .merit__title img {
    max-width: 174px;
  }
  .merit__list {
    margin-top: 15px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .merit__list > li {
    width: 100%;
    max-width: 400px;
  }
}

/* 条件----------------------------------*/

.cam_flex{
display: flex;
flex-direction: row;
margin: 10px;
align-items: center;
}
.camlist{
padding-left: 1.2em;
}
.camlist li{
counter-increment: cnt;
text-indent: -1.2em;
}
.camlist li::before{
content: "※";
}
@media only screen and (max-width: 768px) {
.camleft{
width: 80%;
margin-right: 10px;
}
	.tx_cam01{
font-weight: bold;
	}
	.tx_cam02{
font-weight: normal;
	}
}

/* 参加にあたって
------------------------------------------*/
.attention {
  margin-top: 63px;
}
.attention__title img {
  width: 100%;
  max-width: 582px;
}
/**/
.attention .accordion:first-of-type {
  margin-top: 51px;
}
.attention .accordion:nth-of-type(n+2) {
  margin-top: 10px;
}
.attention .accordion__ttl {
  background: #707070;
  color: #fff;
  padding: 10px 56px 10px 36px;
  border-radius: 10px;
  font-size: 20px;
}
.attention .accordion__ttl:before,
.attention .accordion__ttl:after {
  background: #fff;
}
.attention .accordion__box {
  margin-top: 3px;
}
.attention .accordion__cnt {
  padding: 30px;
  background: #FAFAFA;
  border: 1px solid #707070;
  border-radius: 10px;
}
.attention .accordion__cnt-list li {
  margin-left: 1rem;
  list-style: disc;
}
@media only screen and (max-width: 768px) {
  .attention {
    margin-top: 61px;
  }
  .attention .accordion:first-of-type {
    margin-top: 28px;
  }
  .attention .accordion__ttl {
    padding: 9px 43px 9px 23px;
    font-size: 14px;
  }
  .attention :is(.accordion__ttl:before, .accordion__ttl:after) {
    right: 23px;
  }
  .attention .accordion__cnt {
    padding: 30px 23px;
  }
}

/* Q&A
------------------------------------------*/
.qa {
  margin-top: 60px;
}
.qa__title img {
  width: 100%;
  max-width: 582px;
}
.qa .accordion {
  margin-top: 20px;
  padding: 0 35px 16px ;
  border-bottom: 1px solid #505050;
  font-size: 20px;
  font-weight: 700;
}
.qa .accordion:first-of-type {
  margin-top: 63px;
}
.qa :is(.accordion__ttl,.accordion__cnt) {
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.qa .accordion__box {
  margin-top: 3px;
}
.qa .accordion__ttl > span {
  color: #FD8A8C;
}
.qa .accordion__cnt > span {
  color: #8177e8;
}
.qa .accordion__cnt {
  margin-top: 15px;
}
.qa .accordion__cnt-list li {
  margin-left: 1rem;
  list-style: disc;
}
.qa .accordion__ttl:before,
.qa .accordion__ttl:after {
  background: #505050;
  right: 0;
}
.qa .accordion__cnt a {
  color: #053ECB;
  text-decoration: underline;
}
@media only screen and (max-width: 768px) {
  .qa {
    margin-top: 40px;
  }
  .qa .accordion {
    margin-top: 17px;
    padding: 0 23px 17px;
    font-size: 14px;
  }
  .qa .accordion:first-of-type {
    margin-top: 20px;
  }
  .qa .accordion__cnt {
    margin-top: 7px;
  }
}

/* 上記以外の開催中キャンペーン
------------------------------------------*/
.otherCampaign {
  margin-top: 60px;
}
.otherCampaign__title img {
  width: 100%;
  max-width: 582px;
}
.otherCampaign__list {
  margin-top: 54px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: min(5.93vw, 68px);
}
@media only screen and (max-width: 768px) {
  .otherCampaign__list {
    margin-top: 25px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}


/* シェア（モーダル）
------------------------------------------*/
.modaal-container {
  max-width: 732px;
}

.modal__tab {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.modal__tabName {
  cursor: pointer;
  display: block;
  width: 132px;
  padding: 10px 0;
  background-color: black;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-weight: bold;
  text-align: center;
  transition: ease 0.3s;
}
.modal__tabName--line { background: #06C755; }
.modal__tabName--mail { background: #053ECB; }

.modal__content {
  display: none;
  padding: 30px 20px;
  width: 100%;
  border: 3px solid ;
  border-radius: 10px;
  text-align: center;
}
.modal__content.modal__content-show {
  display: block;
}
.modal__content--line { border-color: #06C755; }
.modal__content--mail { border-color: #053ECB; }
.modal__content__title {
  font-size: 16px;
  font-weight: 700;
}
.modal__content__text01 {
  margin-top: 15px;
}
/* line */
.modal__content--line .btn {
  margin-top: 15px;
  width: 190px;
  background: #06C755;
  box-shadow: 0 6px 0 #025A26;
}
.modal__content--line .btn:hover {
  box-shadow: 0 2px 0 #025A26;
}
.modal__content--line .qr {
  margin-top: 15px;
  max-width: 243px;
  width: 100%;
}
/* mail */
.modal__content--mail .btn {
  margin-top: 15px;
  width: 190px;
  background: #053ECB;
  box-shadow: 0 6px 0 #021D60;
}
.modal__content--mail .btn:hover {
  box-shadow: 0 2px 0 #021D60;
}
.modal__copyBox {
  margin-top: 15px;
  padding: 22px 25px;
  background: #E0E9FF;
  border-radius: 10px;
  font-size: 12px;
  word-break: break-all;
  text-align: left;
}
.copybutton_complete p {
  margin-top: 15px;
  color: #053ECB;
  font-size: 14px;
  font-weight: bold;
}
.copybutton_complete .btn {
  width: 190px;
  background: #707070;
  box-shadow: 0 6px 0 #333333;
}
.copybutton_complete .btn:hover {
  box-shadow: 0 2px 0 #333333;
}
.modaal-container {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
}
.modaal-close {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: auto;
}
.modaal-close:after, .modaal-close:before {
  background: #505050;
}
@media only screen and (max-width: 768px) {
  .modal__content {
    padding: 20px 15px;
  }
  .modal__tab {
    gap: 10px;
  }
  .modal__tabName {
    padding: 6px 0;
    width: 100px;
  }
  .modal__tabName > span {
    display: none;
  }
  .modal__content__text01 {
    margin-top: 20px;
    font-size: 12px;
  }
  /* line */
  .modal__content--line .btn {
    margin-top: 20px;
  }
  .modal__content--line .qr {
    margin-top: 10px;
  }
  /* mail */
  .modal__copyBox {
    margin-top: 20px;
    padding: 17px;
    font-size: 10px;
  }
  .copybutton_complete p {
    font-size: 12px;
  }
}

/* バナー（PCSP出し分け）
------------------------------------------*/

.pc{
	display: block;
}
.sp{
	display: none;
}
@media only screen and (max-width: 768px) {
		.pc{
		display: none;
	}
	.sp{
		display: block;
	}
｝