@charset "UTF-8";

/* ---------------------------------------
  app
-----------------------------------------*/
.secttl {
	position: relative;
	font-weight: bold;
	font-size: 2.8rem;
	letter-spacing: 0.09em;
	margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
	.secttl {
		font-size: 5.28vw;
		margin-bottom: 11vw;
	}
}

/* mv
--------------------------------*/
#sec_mv {
	padding-bottom: 5rem;
}
#sec_mv::before,
#sec_mv::after {
	content: "";
	position: absolute;
	top: 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#sec_mv::before {
	width: 454px;
	height: 215px;
	background-image: url(../img/app/mv_bg01.png);
	left: 0;
}

#sec_mv::after {
	width: 606px;
	height: 116px;
	background-image: url(../img/app/mv_bg02.png);
	right: 0;
}

#sec_mv .wrap {
	justify-content: center;
	align-items: center;
}

#sec_mv .img {
	width: 300px;
    margin: 60px 0 0;
}

#sec_mv .txtwrap {
	width: 400px;
    margin-left: 50px;
}

#sec_mv .txtwrap .logowrap {
	width: 314px;
}

#sec_mv .txtwrap .logowrap img {
	width: 100%;
}

#sec_mv .txtwrap .logowrap .txt {
	color: #3e3a39;
	font-weight: bold;
	font-size: 2.2rem;
	margin-top: 5px;
}

#sec_mv .txtwrap .ttl_s {
	font-weight: bold;
	font-size: 2.8rem;
	line-height: 1.78;
	letter-spacing: 0.05em;
	margin-top: 1.5em;
}

#sec_mv .txtwrap .ttl_ss {
	font-size: 2rem;
	margin-top: 2rem;
	display: flex;
	align-items: center;
}

#sec_mv .txtwrap .ttl_ss img {
	width: 110px;
    display: inline-block;
    margin-right: 0.85em;
}

#sec_mv .txtwrap .ttl_ss a {
	transition: .3s ease;
}

#sec_mv .txtwrap .ttl {
	font-weight: bold;
	font-size: 5.8rem;
	line-height: 1.48;
	letter-spacing: 0.05em;
	margin-top: .4em;
}

@media screen and (min-width: 768px) {
	#sec_mv .txtwrap .ttl_ss a:hover {
		opacity: .8;
	}
}

@media screen and (max-width: 768px) {
	#sec_mv {
		padding: 6vw 0 0;
	}

	#sec_mv::before {
		width: 60vw;
		height: 28.66vw;
		left: -21.333vw;
	}

	#sec_mv::after {
		width: 80.8vw;
		height: 15.466vw;
		right: -61.6vw;
	}

	#sec_mv .wrap {
		width: 100%;
		flex-direction: column;
	}

	#sec_mv .img {
        width: 40%;
        order: 2;
        margin: 5vw 0;
	}

	#sec_mv .txtwrap {
		width: 100%;
		text-align: center;
		margin-left: 0;
        padding-top: 9vw;
        order: 1;
	}

	#sec_mv .txtwrap .logowrap {
		width: 42vw;
		margin-left: auto;
		margin-right: auto;
	}

	#sec_mv .txtwrap .logowrap .txt {
		font-size: 2.93vw;
		margin-top: 0;
	}

	#sec_mv .txtwrap .ttl_s {
		font-size: 5.1vw;
		margin-top: 0.6em;
	}

	#sec_mv .txtwrap .ttl_ss {
		font-size: 1.4rem;
		justify-content: center;
	}

	#sec_mv .txtwrap .ttl_ss img {
		width: 20vw;
		margin-right: 0.7em;
	}

	#sec_mv .txtwrap .ttl {
		font-size: 7.73vw;
	}

}


/* campaign
--------------------------------*/
#sec_campaign {
	padding: 70px 0 100px;
	background-color: #fbc600;
}

#sec_campaign .ttlwrap {
	position: relative;
	padding-right: 410px;
}

#sec_campaign .ttlwrap .txt {
	font-weight: bold;
	font-size: 2.83rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
	margin-bottom: .75em;
}

#sec_campaign .ttlwrap .txt span {
	display: inline-block;
	position: relative;
	padding: 0 1.25em;
	margin-right: .75em;
}

#sec_campaign .ttlwrap .txt span::before,
#sec_campaign .ttlwrap .txt span::after {
	content: "";
	width: 3px;
	height: 1.5em;
	background-color: #000;
	position: absolute;
	bottom: .25em;
}

#sec_campaign .ttlwrap .txt span::before {
	transform: rotate(-25deg);
	left: .25em;
}

#sec_campaign .ttlwrap .txt span::after {
	transform: rotate(25deg);
	right: .5em;
}

#sec_campaign .ttlwrap .img {
	width: 548px;
	min-height: 328px;
	padding: 58px 0 50px;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	background: url(../img/app/campaign_img_bg.svg) no-repeat left 59% center / 330px;
}

#sec_campaign .ttlwrap .img .note {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.85;
	letter-spacing: 0.1em;
	margin-left: 50px;

}

#sec_campaign .ttlwrap .ttl {
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 5.65rem;
	line-height: 1.34;
	letter-spacing: 0.05em;
}

_::-webkit-full-page-media, _:future, :root #sec_campaign .ttlwrap .ttl {
	letter-spacing: 0;
}

#sec_campaign .ttlwrap .ttl span.ico {
	width: 167px;
	height: 167px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1.7;
	letter-spacing: 0.05em;
	background: url(../img/app/campaign_ttl_ico.svg) no-repeat center / 100% auto;
	margin-right: 24px;
}

#sec_campaign .flow {
	margin-top: 40px;
	flex-wrap: wrap;
	justify-content: space-between;
}

#sec_campaign .flow > * {
	width: 370px;
	min-height: 507px;
}

#sec_campaign .flow .flowttl {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

#sec_campaign .flow .flowttl::before,
#sec_campaign .flow .flowttl::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#sec_campaign .flow .flowttl::before {
	width: 214px;
	height: 112px;
	background-image: url(../img/app/campaign_flow_ttl_bg01.png);
	left: 58px;
	top: 21px;
}

#sec_campaign .flow .flowttl::after {
	width: 100px;
	height: 98px;
	background-image: url(../img/app/campaign_flow_ttl_bg02.png);
	left: 132px;
	bottom: 20px;
}

#sec_campaign .flow .flowttl .ttl {
	font-weight: bold;
	font-size: 3.78rem;
	letter-spacing: 0.07em;
}

#sec_campaign .flow .item {
	position: relative;
	background-color: #fff;
	border-radius: 13px;
}

#sec_campaign .flow .item dl.txtwrap {
	text-align: center;
	padding: 40px 40px 0;
	margin-bottom: 30px;
}

#sec_campaign .flow .item dl.txtwrap dt {
	color: #fff;
	font-size: 2.4rem;
	letter-spacing: 0.05em;
	background-color: #00b7de;
	border-radius: 1em;
	margin-bottom: 1em;
}

#sec_campaign .flow .item dl.txtwrap dd {
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.8;
	letter-spacing: 0.03em;
}

_::-webkit-full-page-media, _:future, :root #sec_campaign .flow .item dl.txtwrap dd {
	letter-spacing: 0;
}

#sec_campaign .flow .item .btnwrap {
	margin-top: 65px;
}

#sec_campaign .flow .item .download_btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

#sec_campaign .flow .item .download_btn + .download_btn {
	margin-top: 25px;
}

#sec_campaign .flow .item .download_btn img {
	width: 226px;
}

#sec_campaign .flow .item .img {
	text-align: center;
}

#sec_campaign .flow .item:nth-child(3) .img,
#sec_campaign .flow .item:nth-child(4) .img,
#sec_campaign .flow .item:nth-child(5) .img {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}


@media screen and (min-width: 769px) {
	#sec_campaign .flow .item:nth-child(n+4) {
		margin-top: 45px;
	}
	
	#sec_campaign .flow .item:not(:nth-child(2)):not(:nth-child(3n + 1))::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 13px 0 13px 22px;
		border-color: transparent transparent transparent #231815;
		position: absolute;
		left: -32px;
		top: 50%;
		margin-top: -11px;
	}
}

@media screen and (max-width: 768px) {
	#sec_campaign {
		padding: 8vw 0 13vw;
	}

	#sec_campaign .wrap {
		width: 92%;
	}

	#sec_campaign .ttlwrap {
		padding-right: 0;
	}

	#sec_campaign .ttlwrap .txt {
		text-align: center;
		font-size: 3.2vw;
		margin-bottom: .5em;
	}

	#sec_campaign .ttlwrap .txt span::before,
	#sec_campaign .ttlwrap .txt span::after {
		width: .4vw;
	}

	#sec_campaign .ttlwrap .img {
		width: 100%;
		min-height: 56.8vw;
		padding: 11.2vw 0 8vw;
		position: static;
		background: url(../img/app/campaign_img_bg.svg) no-repeat left 49% center / auto 100%;
		margin-top: 2vw;
	}

	#sec_campaign .ttlwrap .img .note {
		font-size: 2.93vw;
		margin-left: 1vw;
		margin-top: -.5em;
	}

	#sec_campaign .ttlwrap .ttl {
		justify-content: center;
		font-size: 5.87vw;
	}

	#sec_campaign .ttlwrap .ttl span.ico {
		width: 25.6vw;
		height: 25.6vw;
		font-size: 3.56vw;
		margin-right: 3vw;
	}

	#sec_campaign .flow {
		margin-top: 8vw;
		padding: 0 4vw;
	}

	#sec_campaign .flow > * {
		width: 100%;
		min-height: 101.33vw;
	}

	#sec_campaign .flow .flowttl {
		min-height: inherit;
		display: block;
		margin-bottom: 8vw;
	}

	#sec_campaign .flow .flowttl::before {
		width: 13.47vw;
		height: 16vw;
		background-image: url(../img/app/campaign_flow_ttl_bg01_sp.png);
		left: -4vw;
		top: -8vw;
	}

	#sec_campaign .flow .flowttl::after {
		width: 13.07vw;
		height: 12.8vw;
		background-image: url(../img/app/campaign_flow_ttl_bg02.png);
		left: auto;
		right: -6vw;
		bottom: 0;
	}

	#sec_campaign .flow .flowttl .ttl {
		text-align: center;
		font-size: 5.6vw;
	}

	#sec_campaign .flow .item {
		border-radius: 2.67vw;
	}
	
	#sec_campaign .flow .item:not(:nth-child(2))::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 4.27vw 2.67vw 0 2.67vw;
		border-color: #231815 transparent transparent transparent;
		position: absolute;
		left: 50%;
		top: -7vw;
		margin-left: -2.63vw;
	}

	#sec_campaign .flow .item + .item {
		margin-top: 11vw;
	}

	#sec_campaign .flow .item dl.txtwrap {
		padding: 8vw 8vw 0;
		margin-bottom: 6vw;
	}

	#sec_campaign .flow .item dl.txtwrap dt {
		font-size: 4.8vw;
	}

	#sec_campaign .flow .item dl.txtwrap dd {
		font-size: 3.73vw;
		letter-spacing: 0;
	}

	#sec_campaign .flow .item .btnwrap {
		margin-top: 12vw;
	}

	#sec_campaign .flow .item .download_btn + .download_btn {
		margin-top: 5vw;
	}

	#sec_campaign .flow .item .download_btn img {
		width: 45vw;
	}

	#sec_campaign .flow .item:nth-child(3) .img,
	#sec_campaign .flow .item:nth-child(4) .img {
		width: 76vw
	}

	#sec_campaign .flow .item:nth-child(5) .img {
		width: 76vw;
	}

	#sec_campaign .flow .item:nth-child(6) .img {
		width: 76vw;
		margin: 0 auto;
		padding-right: 3vw;
	}

}

/* sec_point
--------------------------------*/
#sec_point {
	padding: 90px 0 100px;
	background-color: #00b7de;
}

#sec_point .secttl {
	color: #fff;
}

#sec_point .list .item {
	position: relative;
	width: 384px;
	min-height: 453px;
	background-color: #fff;
	border-radius: 13px;
	min-height: 500px;
}

#sec_point .list .item dl.txtwrap {
	text-align: center;
	padding: 25px 25px 0;
	margin-bottom: 30px;
}

#sec_point .list .item dl.txtwrap dt {
	position: relative;
	color: #00b7de;
	font-weight: bold;
	font-size: 2.8rem;
	letter-spacing: 0.05em;
	margin-bottom: 0.1em;
}

#sec_point .list .item dl.txtwrap dd {
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.7;
	letter-spacing: 0.03em;

}

#sec_point .list .item .img {
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	#sec_point {
		padding: 12vw 0 13vw;
	}

	#sec_point .list .item {
		width: 100%;
		min-height: 110vw;
		border-radius: 2.67vw;
	}

	#sec_point .list .item + .item{
		margin-top: 11vw;
	}

	#sec_point .list .item dl.txtwrap {
		padding: 6vw 6vw 0;
		margin-bottom: 6vw;
	}

	#sec_point .list .item dl.txtwrap dt {
		font-size: 4.8vw;
		margin-bottom: .9em;
	}

	#sec_point .list .item dl.txtwrap dd {
		font-size: 3.73vw;
		letter-spacing: 0;
	}
	
	#sec_point .list .item:nth-child(1) .img,
	#sec_point .list .item:nth-child(2) .img,
	#sec_point .list .item:nth-child(3) .img {
		width: 58vw;
	}

}

/* faq
--------------------------------*/
#sec_faq {
	padding: 100px 0;
	background-color: #ec7993;
}

#sec_faq .wrap {
	width: 996px;
}

#sec_faq .secttl::before,
#sec_faq .secttl::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#sec_faq .secttl::before {
	width: 142px;
	height: 92px;
	background-image: url(../img/app/faq_ttl_bg01.png);
	left: 185px;
	bottom: -40px;
}

#sec_faq .secttl::after {
	width: 148px;
	height: 101px;
	background-image: url(../img/app/faq_ttl_bg02.png);
	right: 185px;
	bottom: -20px;
}

#sec_faq .faq_box {
	background-color: #fbe4e9;
	border-radius: 13px;
}

#sec_faq .faq_box + .faq_box {
	margin-top: 24px;
}

#sec_faq .faq_box .q_txt {
	position: relative;
	font-weight: bold;
	font-size: 1.7rem;
	line-height: 1.9;
	padding: 22px 66px 22px 60px;
	background-color: #fff;
	border-radius: 13px;
	cursor: pointer;
}

#sec_faq .faq_box .q_txt::before,
#sec_faq .faq_box .a_txt::before {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ec7993;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 2.667rem;
	letter-spacing: 0;
	position: absolute;
	left: 0;
}

#sec_faq .faq_box .q_txt::before {
	content: "Q";
	top: 6px;
}

#sec_faq .faq_box .q_txt .ico {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #ec7993;
}

#sec_faq .faq_box .q_txt .ico::before,
#sec_faq .faq_box .q_txt .ico::after {
	content: '';
	width: 14px;
	height: 2px;
	background-color: #fff;
	border-radius: 1px;
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	transition: .3s ease;
}

#sec_faq .faq_box .q_txt .ico::before {
	transform: translateY(-50%) rotate(90deg);
}

#sec_faq .faq_box .q_txt.open .ico::before {
	transform: rotate(45deg);
}

#sec_faq .faq_box .q_txt.open .ico::after {
	transform: rotate(-45deg);
}

#sec_faq .faq_box .acdcnt {
	display: none;
}

#sec_faq .faq_box .a_txt {
	position: relative;
	padding: 30px 30px 30px 60px;
	font-size: 1.6rem;
	line-height: 1.875;
	letter-spacing: 0.05em;
}

#sec_faq .faq_box .a_txt::before {
	content: "A";
	top: 15px
}

#sec_faq .faq_box .a_txt a {
	text-decoration: underline;
	text-decoration-skip-ink: none;
}

@media screen and (max-width: 768px) {
	#sec_faq {
		padding: 13vw 0;
	}

	#sec_faq .wrap {
		width: 84%;
	}

	#sec_faq .secttl {
		margin-bottom: 6vw;
	}

	#sec_faq .secttl::before {
		width: 13.87vw;
		height: 9.33vw;
		background-image: url(../img/app/faq_ttl_bg01_sp.png);
		left: -2vw;
		bottom: 2vw;
	}

	#sec_faq .secttl::after {
		width: 17.6vw;
		height: 14.27vw;
		background-image: url(../img/app/faq_ttl_bg02_sp.png);
		right: -4vw;
		bottom: 1.6vw;
	}

	#sec_faq .faq_box {
		border-radius: 2.67vw;
	}

	#sec_faq .faq_box + .faq_box {
		margin-top: 11vw;
	}

	#sec_faq .faq_box .q_txt {
		font-size: 3.47vw;
		padding: 4.44vw 12vw 4.44vw 12vw;
		border-radius: 2.67vw;
		letter-spacing: 0.05em;
	}

	#sec_faq .faq_box .q_txt::before,
	#sec_faq .faq_box .a_txt::before {
		width: 12vw;
		height: 12vw;
		font-size: 5.33vw;
	}

	#sec_faq .faq_box .q_txt::before {
		top: 1.6vw;
	}


	#sec_faq .faq_box .q_txt .ico {
		right: 2.6vw;
		width: 8.4vw;
		height: 8.4vw;
	}

	#sec_faq .faq_box .q_txt .ico::before,
	#sec_faq .faq_box .q_txt .ico::after {
		width: 2.8vw;
		height: 2px;
		border-radius: 1px;
		right: 2.8vw;
	}

	#sec_faq .faq_box .a_txt {
		padding: 6.6vw 6.6vw 6.6vw 13.6vw;
		font-size: 3.2vw;
	}

	#sec_faq .faq_box .a_txt::before {
		top: 3.8vw;
	}
}


/* download
--------------------------------*/
.sec_download {
	padding: 95px 0 100px;
}

.sec_download::before,
.sec_download::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% auto;
	z-index: -1;
}

.sec_download._01::before {
	width: 454px;
	height: 215px;
	background-image: url(../img/app/download_01_bg01.png);
	left: 0;
	top: 0;
}

.sec_download._01::after {
	width: 584px;
	height: 93px;
	background-image: url(../img/app/download_01_bg02.png);
	right: 34px;
	bottom: 0;
}

.sec_download._02::before {
	width: 454px;
	height: 215px;
	background-image: url(../img/app/download_02_bg01.png);
	left: 0;
	top: 0;
}

.sec_download._02::after {
	width: 499px;
	height: 93px;
	background-image: url(../img/app/download_02_bg02.png);
	right: 0;
	top: 0;
}

.sec_download .secttl {
	margin-bottom: 60px;
}

.sec_download .secttl span {
	display: inline-block;
	position: relative;
	padding: 0 1.5em;
	margin-right: .75em;
}

.sec_download .secttl span::before,
.sec_download .secttl span::after {
	content: "";
	width: 2px;
	height: 1.5em;
	background-color: #000;
	position: absolute;
	bottom: 0;
}

.sec_download .secttl span::before {
	transform: rotate(-20deg);
	left: 0;
}

.sec_download .secttl span::after {
	transform: rotate(20deg);
	right: 0;
}

.sec_download .inner {
	width: 910px;
	margin: 0 auto;
	align-items: stretch;
}

.sec_download .item {
	width: 420px;
	padding: 30px 36px 36px;
	border-width: 4px;
	border-radius: 13px;
	border-style: solid;
	text-align: center;
}

.sec_download .item .ttl {
	font-weight: bold;
	font-size: 2.4rem;
	line-height: 1.4;
	letter-spacing: 0;
	padding-bottom: 1em;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	margin-bottom: .75em;
}

.sec_download .item .txt {
	font-weight: bold;
	font-size: 1.8rem;
	letter-spacing: 0.05em;
	margin-bottom: .5em;
}

.sec_download .item .download_btn {
	height: 102px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sec_download .item .qr {
	margin-top: 30px;
}

.sec_download .item .qr img {
	width: 160px;
}

.sec_download .item.appstore,
.sec_download .item.appstore .ttl {
	border-color: #00b7de
}

.sec_download .item.googleplay,
.sec_download .item.googleplay .ttl {
	border-color: #ec7993
}

.sec_download .item.appstore .download_btn img {
	width: 226px;
}

.sec_download .item.googleplay .download_btn img {
	width: 264px;
}

.sec_download .note {
	font-size: 1.4rem;
	text-align: justify;
	margin-top: 60px;
}

@media screen and (max-width: 768px) {
	.sec_download {
		padding: 13vw 0;
	}

	.sec_download._01::before {
		width: 60vw;
		height: 28.6vw;
		left: -21.333vw;
	}

	.sec_download._01::after {
		width: 77.87vw;
		height: 12.4vw;
		right: -22vw;
		bottom: -2vw;
	}

	.sec_download._02::before {
		width: 60.53vw;
		height: 28.67vw;
		left: -29.07vw;
	}

	.sec_download._02::after {
		width: 66.53vw;
		height: 12.4vw;
		right: -34vw;
		top: -2vw;
	}

	.sec_download .secttl {
		margin-bottom: 11vw;
	}

	.sec_download .secttl span {
		padding: 0 1.25em;
		margin-right: 0;
	}

	.sec_download .secttl span::before,
	.sec_download .secttl span::after {
		width: .53vw;
		height: 100%;
	}

	.sec_download .inner {
		width: 100%;
	}

	.sec_download .item {
		width: 100%;
		padding: 6vw 7vw 7.7vw;
		border-width: .8vw;
		border-radius: 2.67vw;
	}
	
	.sec_download .item + .item{
		margin-top: 11vw;
	}

	.sec_download .item .ttl {
		font-size: 4.93vw;
		letter-spacing: 0;
		border-width: .8vw;
	}

	.sec_download .item .txt {
		font-size: 3.73vw;
	}

	.sec_download .item .download_btn {
		height: 20.4vw;
	}

	.sec_download .item .qr {
		margin-top: 4vw;
	}

	.sec_download .item .qr img {
		width: 32vw;
	}

	.sec_download .item.appstore .download_btn img {
		width: 45.2vw;
	}

	.sec_download .item.googleplay .download_btn img {
		width: 52.8vw;
	}

	.sec_download .note {
		font-size: 2.93vw;
		letter-spacing: 0.04em;
		margin-top: 9vw;
		margin-left: -2vw;
	}
}