@charset "UTF-8";
/* CSS Document */

* {
	box-sizing: border-box;
}
p , .add_normal_txt {
	font-size: 16px;
}
.pc20_sp10 {
	margin-top: 20px;
}
.box_container {
	margin: 40px auto 80px;
	font-family: 'Noto Sans JP', sans-serif;
}
.keycolor_no1,
.cam_no1 .step_item::before,
.cam_no1 .uqv2-parts-accordionList__btn:before,
.cam_no1 .step_title {
	color: #F8B62B!important;
}
.keycolor_no2,
.cam_no2 .step_item::before,
.cam_no2 .uqv2-parts-accordionList__btn:before,
.cam_no2 .step_title {
	color: #F39801!important;
}
.keycolor_no3,
.cam_no3 .step_item::before,
.cam_no3 .uqv2-parts-accordionList__btn:before,
.cam_no3 .step_title {
	color: #AF601A!important;
}
.bgcolor_no1,
.anc_no1 .btn_anc,
.cam_no1 .campaign_title {
	background: #F8B62B!important;
}
.bgcolor_no2,
.anc_no2 .btn_anc,
.cam_no2 .campaign_title {
	background: #F39801!important;
}
.bgcolor_no3,
.anc_no3 .btn_anc,
.cam_no3 .campaign_title {
	background: #AF601A!important;
}
.kv_pc {
	background: url("/mobile/cp/tw-2023summer/images/kv_bg.png");
	background-repeat: no-repeat;
	background-color: #e4007f;
	background-position: 50% 0;
}
.btn_round {
	border-radius: 40px;
}
.btn_tw a {
	background: #000000;
	justify-content: center;
}
.uqv2-parts-btn, a.uqv2-parts-btn {
	justify-content: center;
}
.icon_tw img {
	width: 80%;
}
.btn_anc_box {
	display: flex;
	justify-content: space-between;
}
li.anc_no1, li.anc_no2, li.anc_no3 {
	width: 30%;
	position: relative;
}
a.btn_anc , .anc_coming_soon {
	display: block;
	width: 100%;
	border-radius: 30px;
	font-size: 24px;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	color: #ffffff;
}
.anc_coming_soon {
	background: #AF601A!important;
}
.anc_no3 .keycolor_no3 {
	position: absolute;
	left: calc(50% - 48px);
	top: -66%;
}
.uqv2-parts-btnWrap {
	background: none;
}
.bgcolor_no1,
.bgcolor_no2,
.bgcolor_no3 {
	border-radius: 45px;
}
.anc_coming_soon .img_coming_soon {
	position: absolute;
	top: -45px;
	left: calc(50% - 100px)
}
.img_coming_soon img {
	width: 200px;
}
.btn_anc_box a:hover {
	text-decoration: none;
	color: #ffffff;
}
.anc_no1:hover,
.anc_no2:hover,
.anc_no3:hover,
.btn_tw:hover,
.btn_hover:hover {
	transform: scale(1.1);
	transition: 0.5s;
}
.anc_no1.end:hover,
.anc_no2.end:hover,
.anc_no3.end:hover {
	transform: none;
}
.uqv2-parts-btn:hover,
a.uqv2-parts-btn:hover {
	opacity: 1;
}
.anc_coming_soon:hover {
	transform: none;
}
.campaign_box {
	width: 100%;
	margin-top: 40px;
	position: relative;
}
.campaign_title {
	text-align: center;
	padding: 10px;
	border-radius: 30px 30px 0 0;
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
}
.cam_no1 .campaign_title {
	top: -40px;
}
.campaign_body {
	border-radius: 0 0 30px 30px;
	padding: 80px;
}
.body_coming_soon {
	background: #cdcdcd;
}
.cam_no1 .campaign_body {
	background: rgba(255,243,214,0.9);
}
.cam_no2 .campaign_body {
	background: rgba(248,232,196,0.9);
}
.cam_no3 .campaign_body {
	background: rgba(255,234,216,0.9);
}
.campaign_body_innr {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}
.cam_contents,
.accordion_box,
.about_campaign,
.btn_anc_box {
	margin-top: 60px;
}
.contents_flex_box {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.contents_flex,
.step_item,
.color_btn,
.btn_tw {
	width: calc((100% / 2 - 22px / 2));
}
.btn_tw {
	margin: auto;
}
.step_item._col3 {
	width: calc((100% / 3 - 20px));
}
.contents_flex + .contents_flex,
.step_item + .step_item,
.color_btn + .color_btn {
	margin-left: calc((22px / 2 - .5px));
}
.step_item._col3 + .step_item._col3 {
	margin-left: 30px;
}
.bg_white {
	background: #ffffff;
	padding: 30px;
	border-radius: 10px;
}
.white_box_size {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 170px;
}
.step_flex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.step_item, .step_item._col3 {
	position: relative;
	text-align: center;
}
.step_item:not(:last-child)::before,
.step_item._col3:not(:last-child)::before {
	content: "＋";
	display: block;
	font-family: uq-icomoon !important;
	font-size: 50px;
	font-weight: bold;
	position: absolute;
	right: -33px;
	top: 26%;
	height: 50px;
	width: 50px;
	line-height: 50px;
	z-index: 1;
}
.step_item._col3:not(:last-child)::before {
	right: -40px;
	top: 25%;
}
.step_title {
	font-size: 28px;
	font-weight: bold;
	text-align: center;
}
.step_body {
	margin-top: 20px;
}
.color_btn_box {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.uqv2-parts-accordionList__btn.add_normal_txt {
	text-align: center;
	font-weight: normal;
}
.border_no1 {
	border: 10px solid #F8B62B;
	border-radius: 10px;
}
.border_no2 {
	border: 10px solid #F39801;
	border-radius: 10px;
}
.border_no3 {
	border: 10px solid #AF601A;
	border-radius: 10px;
}
.border_pink {
	border: 10px solid #e4007f;
	border-radius: 10px;
}
.au_campaign {
	width: 500px;
	margin: auto;
	background: #FFFFFF;
}
.au_campaign a:hover {
	opacity: 0.8;
	transition: 0.5s;
}
.pc40_sp20 {
	margin-top: 40px;
}

/* 終了 */
.end , .comingsoon , .application_closed {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 0;
	border-radius: 30px;
	left: 0;
	top: 0;
}
.end p,
.application_closed p {
	font-weight: bold;
	color: #ffffff;
}
.flex_attention {
	display: flex;
	align-items: center;
}
.flex_attention_icon {
	width: 120px;
}
.flex_attention_txt {
	width: calc(100% - 140px);
	margin-left: 20px;
}
.application_closed {
	border-radius: 0;
}

@media screen and (max-width: 767px) {
	p , .add_normal_txt {
		font-size: 14px;
	}
	.pc20_sp10 {
		margin-top: 10px;
	}
	.box_container {
		margin: 20px auto 40px;
	}
	.btn_anc {
		width: 32%;
	}
	a.btn_anc , .anc_coming_soon {
		font-size: 16px;
	}
	.anc_coming_soon .img_coming_soon {
		top: -70%;
		left: calc(50% - 60px);
	}
	.about_campaign,
	.btn_anc_box {
		margin-top: 40px;
	}
	.cam_contents,
	.campaign_box,
	.accordion_box {
		margin-top: 20px;
	}
	.campaign_body, .bg_white {
		padding: 20px 20px 30px;
		width: 100%;
	}
	.campaign_body.body_coming_soon {
		padding: 40px 60px;
	}
	.campaign_body_innr {
		width: 100%;
	}
	.contents_flex + .contents_flex {
		margin-left: 0;
		margin-top: 20px;
	}
	.white_box_size {
		height: auto;
	}
	.color_btn , .btn_tw {
		width: 100%;
		max-width: 400px;
	}
	.color_btn + .color_btn {
		margin-left: 0;
		margin-top: 10px;
	}
	.au_campaign {
		 width: 100%;
	}
	.img_coming_soon img {
		max-width: 120px;
	}
	.anc_no3 .keycolor_no3 {
		top: -60%;
		left: calc(50% - 32px);
	}
	.pc40_sp20 {
		margin-top: 20px;
	}
	.contents_flex,
	.step_item,
	.step_item._col3 {
		width: 100%;
	}
	.step_item + .step_item,
	.step_item._col3 + .step_item._col3 {
		margin-left: 0;
		margin-top: 50px;
	}
	.step_item:not(:last-child)::before,
	.step_item._col3:not(:last-child)::before {
		right: calc(50% - 30px);
		top: auto;
		bottom: -22%;
		font-size: 40px;
	}
	.flex_attention {
		flex-direction: column;
	}
	.flex_attention_icon {
		width: 40%;
	}
	.flex_attention_txt {
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}


}


/* ===== animation ===== */
.flowers-container {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.flowers-container > .uqv2-parts-innr {
	position: relative;
	z-index: 100;
	max-width: 980px;
}

.flower {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	animation: animate-flower 30s linear;
}
.flower-1 {
	background-image: url('/mobile/cp/tw-2023summer/images/icon_01.svg');
}
.flower-2 {
	background-image: url('/mobile/cp/tw-2023summer/images/icon_02.svg');
}

@keyframes animate-flower {
	0% {
		opacity: 0;
		top: 0;
		transform: rotate(0);
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		top: 100%;
		transform: rotate(1080deg);
	}
}