@charset "utf-8";

/* Utill class=========================■  */
.por {
	position: relative; 
}

.tac {
	text-align: center;
}
.mt20{
	margin-top: 20px;
}

.mt40{
	margin-top: 40px;
}
.aeon_red {
	color: #B50081;
}

.small {
	font-size: 14px;
}
/* 使用する色は color: var( ); にて下記を引っ張る */
: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;
	--sub-color3: #EF4050;
}
/* ============================================================ */
/* ===========================PC=============================== */
* {
	box-sizing: border-box;
  }
#header-inner {
	width: 100% !important;
	height: auto;
}
.entry_btn {
	width: 640px;
	margin: 0 auto 40px;
	display: block;
}
.entry_Note {
	font-size: 16px;
	line-height: normal;
	color: #EF4050;
	font-weight: bold;
	margin: 0 auto 40px;
}
.banner_box_pc{
	text-align: center;
	margin: 40px auto;
}
.banner_box_pc li{
	display: inline-block;
	margin: 0 20px 20px;
	width: 400px;
	line-height: normal !important;
}
.banner_box_sp{
	text-align: center;
	margin: 40px auto;
}
.banner_box_sp li{
	display: inline-block;
	margin: 0 10px 20px;
}
.banner_img_ttl{
	line-height: normal;
	margin: 0 0 10px;
}
.dl_baloon {
	width: 30%;
	height: auto;
}

.attention_txt{
padding: 10px;
/* border: 3px solid red;  */
}

.triangle {
	margin: 20px 0;
	display: inline-block;
	width: 60px;
	height: 30px;
	background: #464646;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
  }

.howto .subttl {
	position: relative;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto 20px;
}
.howto .subttl::before,
.howto .subttl::after {
	position: absolute;
	content: '';
	width: 30px;
	height: 2px;
	background: #d82621;
	top: 0;
	bottom: 0;
	margin: auto;
}
.howto .subttl::before {
	transform: rotate(45deg);
	left: calc(50% - 7em);
}
.howto .subttl::after {
	transform: rotate(-45deg);
	right: calc(50% - 7em);
}
.howto .step ul {
	display: flex;
	margin-top: 40px;
}
.howto .step ul li {
	flex: 0 0 auto;
	margin-right: 18px;
}
.howto .step ul li:last-child {
	margin-right: 0;
}
.howto .step + p {
	margin-top: 30px;
}

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


  .icon {
	width: auto;
	height: 20px;
	vertical-align: middle;
	margin: -2px 0 0 10px;
  }
  .youtube-ttl {
	background-color: #f4f4f4;
	border-radius: 10px;
	padding: 20px;
	width: 600px;
	margin: 0px auto 20px;
	display: block;
	position: relative;
  }
  .step2_point {
	position: absolute;
	left: -50px;
	top: -30px;
  }

  iframe {
	display: block;
	margin: 0 auto;
  }
  
  iframe.youtube-16-9 {
  width: 90%;
  height: auto;
  aspect-ratio: 16 / 9;
  }

  h3{
	background-color: #d82620;
	font-weight: 800;
  }
  
/* ============================================================ */
/* ===========================SP=============================== */
@media screen and (max-width: 640px) {
	.dl_baloon {
		width: 60%;
		height: auto;
	}
	.step2_point {
		position: absolute;
		left: 0px;
		top: -30px;
	  }
	
	  .step2_hand {
		position: absolute;
		right: 140px;
		bottom: -20px;
	  }
	  .friend_cp {
		box-sizing: border-box;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 80px;
		border-radius: 20px;
		padding: 40px 10px;
		background: url(/aeonapp/campaign/202412_newentry/img/friend_bg.png);
	  }
	  .friend_ttl {
		font-size: 20px;
		font-weight: 900;
		padding: 10px;
	  }
	  .friend_day {
		width: 80%;
	  }
	  .friend_cp_link {
		display: inline-block;
		width: 90%;
		background-color: #B50081;
		border: #fff 2px solid;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
		font-weight: 900;
		color: #fff !important;
		box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
		border-radius: 10px;
	  }
	  .youtube-ttl {
		background-color: #f4f4f4;
		border-radius: 10px;
		padding: 10px;
		width: 300px;
		margin: 40px auto;
		display: block;
		position: relative;
	  }
	  .step2_point {
		position: absolute;
		left: 0px;
		top: -30px;
	  }
	.howto .step ul {
		display: block;
		margin-top: 20px;
		margin: 0 auto;
		width: 90%;
	}
	.howto .step ul li {
        position: relative;
        margin-right: 0;
        margin-bottom: 40px;
    }
	.howto .step ul li::after {
	position: absolute;
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	border-top: 20px solid #9f9f9f;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid transparent;
	left: 0;
	right: 0;
	margin: auto;
	bottom: -50px;
	}
}