@charset "utf-8";

/* Initial
__________________ */

figure{
	margin: initial;
}

:is([id], [name]){
	scroll-margin-top: var(--g3-header-height);
}



/* Customize
__________________ */

.g3-sitewidth--article{
	max-width: 60rem;
}



/* Components
__________________ */

/* stack */

.lp-stack-content > *{
	margin-block: 0;
}
.lp-stack-content > * + *{
	margin-top: 1.5rem;
}

/* ttl */
.lp-ttl{
	line-height: 1.5;
	font-size: 1em;
	font-weight: normal;
}
.lp-ttl:where([data-ruby]){
	text-align: center;
	display: grid;
	gap: .5em;
}
.lp-ttl:where([data-ruby])::before{
	content: attr(data-ruby);
	font-size: .6em;
	color: #bcaf9a;
}

.lp-ttl-center{
	text-align: center;
}

.lp-ttl-page{
	font-size: 4em;
}
.lp-ttl-section{
	font-size: 2.5em;
}
.lp-ttl-content{
	font-size: 2em;
}
.lp-ttl-sentence{
	font-size: 1.5em;
}


/* note */
.lp-note{}
.lp-note--center{
	text-align: center;
}


/* jump */
.lp-jump{
	font-size: 1.777em;
}


/* btn */
.lp-btn{
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: inherit;
	background: #F6AB00;
	border-radius: 100vmax;
	padding: 2.28125em 3.5em;
	
	display: flex;
	justify-content: center;
	gap: 1em;
}
.lp-btn:hover{
	opacity: .78;
}
.lp-btn::after{
	content: "→";
}

.lp-btn--small{
	padding: 1.15em 1.75em;
}



/* btn list */
.lp-btnlist{
	display: flex;
	justify-content: center;
	gap: 1em;
}
@media (max-width: 768px){
	.lp-btnlist{
		flex-direction: column;
	}
}
@media (min-width: 769px){
	.lp-btnlist > *{
		flex: 0 1 444px;
	}
}



/* box */
.lp-box{
	background: white;
	border-radius: 1em;
	padding: 2.5em;
}
@media (max-width: 768px){
	.lp-box{
		padding: 1.6em;
	}
}

.lp-box--notice{
	line-height: 1.5;
	border-radius: 0;
	padding: 1.5em;
}
@media (min-width: 769px){
	.lp-box--notice{
		background: #eee;
	}
}
@media (max-width: 768px){
	.lp-box--notice{
		border: 1px solid #dbdbdb;
		border-radius: .5em;
		overflow: scroll;
		max-height: calc(6em * 1.5);
	}
}



/* list */
.lp-list{
	padding-left: 0;
	margin-left: 1.25em;
}
.lp-list *{
	list-style: var(--marker, revert);
}



/* split */
.lp-split{
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
}
.lp-split > *{
	flex: 1 1 0;
}



/* with icon */
.lp-withicon{
	display: flex;
	align-items: center;
	gap: 1em;
}
.lp-withicon > *{
	flex: 1 1 0;
	
	&:where(img){
		flex: 0 0 auto;
	}
}


/* table */
.lp-tbl{
	line-height: 1.5;
	background: white;
	border-radius: 1em;
	overflow: hidden;
	table-layout: fixed;
	border-collapse: collapse;
	min-width: 100%;
}
.lp-tbl th{
	font-weight: normal;
}
.lp-tbl tr > *{
	padding: 1.25em;
}
.lp-tbl tr > * + *{
	border-left: 1px solid #dbdbdb;
}
.lp-tbl tbody tr > *{
	border-top: 1px solid #dbdbdb;
}


/* Template
__________________ */

/* header */
.lp-sect__header > *{
	margin-block: 0;
}
.lp-sect__header > * + *{
	margin-top: 1.25rem;
}
.lp-sect__header ~ *{
	margin-block: 2.5rem 0;
}
.lp-ttl:where(.lp-sect__header .lp-withicon *){
	margin-block: 0;
}



/* Contents
__________________ */

/* wrap */

:any-link:where(.lp-smart_membership *){
	color: inherit;
}
:any-link:where(.lp-smart_membership :hover){
	text-decoration: none;
}


/* mv */
.mv{
	margin-block: 0;
}
.mv__banner{
	width: 100%;
}



/* stripe sections */
.lp-stripe > *{
	padding-block: 5em;
}
.lp-stripe > :nth-child(odd){
	background: #f5f5f5;
}


/* about */
.lp-box--about{
	text-align: center;
}
.lp-about__icon{
	width: 7.5em;
}

@media (max-width: 768px){
	.lp-cashback-text{
		font-size: .5627462014631401em;
	}
}

@media (max-width: 768px){
	.lp-mobile-sort{
		display: flex;
		flex-direction: column;
	}
	.js-float-login{
		order: 1;
	}
}


/* table of content */
.lp-toc{
	padding-left: 0;
	list-style: none;
	display: flex;
	gap: 5em;
}

.lp-toc > *{
	flex: 1 1 0;
}
.lp-toc > * + *{
	position: relative;
	z-index: 0;
}
.lp-toc > * + ::before{
	content: "";
	border-left: 1px solid #dbdbdb;
	
	position: absolute;
	inset: 0 auto 0 -40px;
}

@media (max-width: 768px){
	.lp-toc{
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}
	.lp-toc > *{
		flex: 0 0 calc(33.3% - 15px);
	}
	.lp-toc > * + ::before{
		left: -10px;
	}
	.lp-toc > :nth-child(3n + 1)::before{
		content: none;
	}
}

.lp-toc__permalink{
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: .5em;
	height: 100%;
}
.lp-toc__permalink::after{
	content: "";
	background: url(img/icon-arrow.svg) no-repeat center / contain;
	width: 1.5em;
	height: 1.5em;
	margin-inline: auto;
	margin-top: auto;
}

.lp-toc__icon{
	margin-inline: auto;
	width: 4em;
}


/* compare table */
.lp-tbl-compare{
	font-size: 1.125em;
}
.lp-tbl-compare tr > *{
	text-align: center;
}
.lp-tbl-compare__r{
	color: #555;
}
.lp-tbl-compare thead .lp-tbl-compare__r{
	color: #333;
	background: #ccc;
}
.lp-tbl-compare thead .lp-tbl-compare__sh{
	color: white;
	background: #333;
}
.lp-tbl-compare .lp-jump{
	font-style: normal;
}
.lp-tbl-compare__sh .lp-jump{
	color: #F6AB00;
}


/* rank */
.lp-rank__fig{
	text-align: center;
	
	display: grid;
	gap: 2.5em;
}


/* howto */
.lp-howto{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1em 1.5em;
}
@media (max-width: 768px){
	.lp-howto{
		grid-template-columns: none;
	}
}

.lp-box--howto{
	text-align: center;
	padding: 1em;
}

.lp-ttl--howto{
	font-size: 1.125em;
}


/* official app */
.lp-official-app{
	text-align: center;
}
.lp-official-app__video{
	width: 100%;
}
.lp-official-app__banner{
	width: 100%;
}


/* download */
.lp-download{
	padding-left: 0;
	list-style: none;
	
	display: flex;
	justify-content: center;
	gap: 1em;
}
.lp-download > *{}

.lp-download__permalink{}

.lp-download__banner{}


/* loto game banner */
.lp-lotogame{
	text-align: right;
	text-decoration: none;
	
	color: white;
	background: #64a0cb;
	border-radius: 1em;
	overflow: hidden;
	padding: 1.25em;
	display: grid;
}

.lp-lotogame{
	
}

.lp-lotogame__banner{
	width: calc(100% + 20px * 2);
	max-width: calc(100% + 20px * 2);
	margin: -20px -20px 20px -20px;
}


/* float login menu */
.lp-float-login{
	background: white;
	box-shadow: 0 -4px 4px rgb(0 0 0 / .25);
	padding-block: 1rem;
	
	position: fixed;
	inset: auto 0 var(--g3-footer-psnmenu-height);
	/* bottom: 0; */
	
	transition: 166.5ms ease;
}
@media (min-width: 769px){
	.lp-float-login{
		--g3-footer-psnmenu-height: 0;
	}
}

.lp-float-login:not(.is-active){
	visibility: hidden;
	opacity: 0;
}

.lp-float-login-grid{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5em 2.5em;
}
.lp-float-login-grid > *{
	margin-block: 0;
}