@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* reset css
================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* clearfix
--------------------------------- */
.clearfix::after { content:" "; display:block; clear:both; }

/* base
================================= */

html, body {
	height: 100%;
	width: 100%;
	color: #111;
	font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'Open Sans', 'Noto Sans Japanese', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	-webkit-text-size-adjust: 100%;
}
img { max-width: 100%; vertical-align: middle; }
h2{ text-align:center; font-weight:bold; line-height:100%;}
li { list-style: none; }
* { position: relative; }


/* anchor
--------------------------------- */
a {
	color: #111;
	transition: color 0.3s ease;
}
a:hover {
	color:#fdc800;
	text-decoration: none;
	transition: color 0.3s ease;
}


/* PC only
============================== */
@media screen and (min-width: 901px) {
	.sp { display: none !important; }
}

/* SP only
============================== */
@media screen and (max-width: 900px) {
	.pc { display: none !important; }
}



/* ************************************** wrap */
#wrap {
	width: 100%;
}

/* ************************************** container */
#container {
	padding-bottom: 78px;
	width: 100%;
}
#container::before {
	position: fixed;
	width: 100%; height: 100vh;
	background: url(../images/bg_main.jpg) no-repeat;
	background-size: cover;
	background-position: top center;
	content: '';
}


/* ************************************** header */
#header { z-index: 1; }

/* title */
#header .title {
	display: flex;
	align-items: center;
    justify-content: center;
	gap: 1.5%;
	padding: 1% 0;
    border-bottom: 2px solid #000;
	background: #f4cc00;
}
#header .title .logo_sb { width: 10%; }
#header .title .logo_app { width: 40%; }

/* movie */
#header #movie {
	width: 100%;
	background: rgba(0, 0, 0, 0.8);
}
#header #movie .movie {
	display: block;
	margin: auto;
	width: 75%;
}
#header .movie_bottom {
	display: block;
	margin-bottom: 1%;
}

/* web_play */
.web_play {
	margin: 0 auto 2%;
	width: 80%;
}

/* download */
.app_download {
	margin: 0 auto 2%;
	padding-top: 20%;
	width: 80%;
	background: url(../images/bg_download.png) no-repeat top/100%;
}
.app_download ul {
	position: absolute;
	top: 42%; left: 0;
	width: 100%;
	margin: auto;
	text-align: center;
}
.app_download ul li {
	display: inline-block;
	margin: 0 3%;
}
.app_download ul li.ios     { width: 30%; }
.app_download ul li.android { width: 36%; }

/* nft */
#header #nft {
	padding-top: 50.2%;
	width: 100%;
	background: url(../images/bg_nft.png) no-repeat top/100%;
}
#header #nft .btn_nft {
	display: block;
	position: absolute;
	top: 48%; left: 25%;
	margin: auto;
	width: 50%;
}


/* ************************************** about */
#about {
	padding: 8% 0 8%;
	width: 100%;
	background: transparent;
}
#about .img_title { width: 40.22%; }
#about .image_wrap { margin: 7% auto 0; }
#about .img_about { display: block; }
#about .img_grow {
	position: absolute;
	opacity: 0.5;
	top: 26.5%; left: 31.5%;
	width: 10%;
	animation: btn_grow 2s ease infinite;
}
@keyframes btn_grow {
	  0% {opacity: 0.2;transform: scale(1, 1); }
 	 50% {opacity: 0.7; }
 	 70% {opacity: 0;transform: scale(1.5, 1.5); }
 	100% {opacity: 0;transform: scale(1.5, 1.5); }
}

/* ************************************** playing cards */
#playingCards {
	width: 100%;
}
#playingCards .bg_orange_cards {
	margin-top: -7%;
	padding: 8% 0 20%;
	background: #FFC700;
	transform: skewY(15deg);
}
#playingCards .bg_orange_cards .reverse_skew { transform: skewY(-15deg); }
#playingCards .img_title { width: 64.09%; }
#playingCards .ttl_todays_three {
	display: block;
	margin: 5% auto 2%;
	width: 50%;
}
#playingCards #playing_slide {
	margin: auto;
	width: 60%;
}
#playingCards #playing_slide li { padding: 0 0.5%; }
#playingCards #playing_slide .txt_slide {
	display: block;
	margin: 2% auto 3%;
	width: auto; height: calc((100% / 375) * 42);
}
#playingCards #playing_slide .txt_slide.txt1 { width: 66%; }
#playingCards #playing_slide .txt_slide.txt2 { width: 73.2%; }
#playingCards #playing_slide .txt_slide.txt3 { width: 73.2%; }
#playingCards #playing_slide .txt_slide.txt4 { margin-bottom: -3%; width: 66%; }
#playingCards #playing_slide .txt_slide.oh { height: calc((100% / 375) * 56); }
#playingCards .todays_choise { margin-top: 8%; }
#playingCards .todays_choise .txt_todays_three {
	display: block;
	margin: 5% auto 3%;
	width: 40%;
}
#playingCards .img_todays_choise {
	display: block;
	margin: auto;
	width: 80%;
}
#playingCards .txt_todays_choise2 {
	display: block;
	margin: 5% auto 2%;
	width: 70%;
}


/* ************************************** campaign */
#campaign {
	margin-top: 12%;
	padding: 8% 0 5%;
	width: 100%;
	background: transparent;
}
#campaign .img_title { width: 48.78%; }
#campaign .img_campaign {
	display: block;
	margin: 6% auto 0;
}


/* ************************************** faq */
#faq {
	padding: 6% 0 10%;
	width: 100%;
	background: transparent;
}
#faq .bg_black {
	transform: skewY(15deg);
}
#faq .img_title { width: 29.49%; }
#faq h3 {
	margin: 5% auto;
	font-size: 16px;
	text-align: center;
	color: #FFF;
}
#faq .qaList {
	position: relative;
	margin: 5% auto;
	width: 80%;
	font-size: 15px;
}
#faq .qaList li { padding-bottom: 12%; }
#faq .txtQ {
	margin-bottom: 1%;
	font-weight: bold;
}
#faq .txtQ p,
#faq .txtA p {
	display: inline-block;
	position:relative;
	padding:2% 3%;
	width: 83%;
	background: #fff;
	border-radius:6px;
	color: #111;
	box-sizing: border-box;
}
#faq .txtQ p { position: absolute; margin-left: 4%;}
#faq .txtA p { background: #fbc10e; margin-right: 4%; }
#faq .qaList span {
	display: inline-block;
	padding-top: 13%;
	width: 13%; height: calc((100% / 375) * 38);
	background: no-repeat center;
	background-size: cover;
	text-align: center;
}
#faq .txtA span {
	background-image:url(../images/icon_card_a.png);
	position: absolute;
	bottom: 0;
}
#faq li:nth-child(1) .txtQ span { background-image:url(../images/ico_q01.png);}
#faq li:nth-child(2) .txtQ span { background-image:url(../images/ico_q02.png);}
#faq li:nth-child(3) .txtQ span { background-image:url(../images/ico_q03.png);}
#faq .txtQ p::after{
	display: block;
	position: absolute;
	left: -17px; bottom: 0;
	width: 25px; height: 20px;
	background-image: url(../images/bg_faq_left.png);
	background-repeat: no-repeat;
	content: "";
}
#faq .txtA p::after {
	display: block;
	position: absolute;
	right: -17px; bottom: 0;
	width: 25px; height: 20px;
	background-image: url(../images/bg_faq_right.png);
	background-repeat: no-repeat;
	content: "";
}

/* ************************************** bottom */
#bottom {
	padding-top: 12%;
	width: 100%;
}
#bottom .footer_logo {
	display: block;
	margin: auto;
	width: 70%;
}
#bottom .img_phone {
	display: block;
	margin: 6% auto 0;
	width: 50%;
}

/* ************************************** footer */
#footer {
	padding: 14% 0 7%;
	width: 100%; height: calc((100% / 375) * 125);
	background: url(../images/bg_footer.png) no-repeat top/100%;
	color: #FFF;
}
#footer .lists {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
#footer .lists li {
	padding: 0 2%;
	border-right: 2px solid #FFF;
	font-size: 3.2vw;
}
#footer .lists li:last-child { border-right: none; }
#footer hr {
	margin: 3% auto;
	width: 80%;
}
#footer .copyright {
	font-size: 3vw;
	text-align: center;
}


/* ************************************** footer menu */
#footerMenu{
	position: fixed;
	width: 100%;
	bottom: 0; left: 0;
	font-size: 0;
	opacity: 0.9;
	z-index: 2;
	text-align: center;
	background: #252525;
	border-top: 4px solid #fcc800;
	border-bottom: 4px solid #fcc800;
}
#footerMenu li{
	display: inline-block;
	width: 33%;
	font-size: 14px;
}
#footerMenu li a{
	color: #fff;
	width: 33%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	height: 70px;
}

/* ************************************** hamburger menu */
#btn_menu {
	z-index: 4;
	position: fixed;
	top: 3vw; right: 3vw;
	width: 10vw; height: 10vw;
	background: url(../images/btn_menu.png?t=20230404) no-repeat top/100%;
	transition: 0.3s ease-in;
}
#btn_menu.show { background: url(../images/btn_close.png?t=20230404) no-repeat top/100%; }
#menu_mask {
	display: none;
	z-index: 2;
	position: fixed;
	opacity: 0;
	top: 0; left: 100%;
	width: 100vw; height: 100vw;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: opacity 0.5s linear;
}
#menu_mask.show {
	left: 0;
	opacity: 1;
}
#menu {
	z-index: 3;
	position: fixed;
	top: 0; left: 100%;
	padding: 7% 0;
	width: 100%;
	background: rgba(251, 201, 0, 0.68);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: 0.3s ease-in;
	/*transform: translateX(100vw);*/
}
#menu ul {}
#menu ul li {
	padding: 2% 0;
	font-size: calc((768px / 375) * 15);
	font-weight: bold;
	text-align: center;
}
#menu ul li a {
	padding: 0.5% 1.5%;
	text-decoration: none;
}
#menu ul li a:hover { background: #000; }
#menu.show {
	left: 0;
}


.bg_black {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.8);
	transform: skewY(20deg);
}
.bg_orange {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: #FFC700;
	transform: skewY(15deg);
}

/* スクロールで出てくるタイトル */
.img_title { display: block; }
.scroll_title {
	overflow: hidden;
	margin-left: 10%;
	clip-path: inset(0 100% 0 0);
	transition: 0.5s linear;
}
.scroll_title_show { clip-path: inset(0); }

/* スクロールで出てくる画像 */
.effect_fade {
	opacity: 0;
	transition: opacity 0.8s ease;
}
.effect_scroll {
	opacity: 1;
}


/* slick customize */
/* arrow */
#playingCards .slide_arrow {
	position: absolute;
	top: 50%;
	width: 25%; height: calc((100% / 375) * 74);
	transform: translateY(-50%);
}
#playingCards .prev_arrow { left: -29%; background: url(../images/icon_arrow_left.png) no-repeat top/100%; }
#playingCards .next_arrow { right: -29%; background: url(../images/icon_arrow_right.png) no-repeat top/100%; }

/* dots */
#banner .slick-dots { bottom: -2.6rem; }
#banner .slick-dots li {
	margin: 0 0.5rem;
	width: 0.5rem;
}
#banner .slick-dots li button:before {
	opacity: 1;
	width: 0.5rem; height: 0.5rem;
	border: 1px solid #000;
	border-radius: 1rem;
	background: #FFF;
	content: '';
}
#banner .slick-dots li.slick-active button:before {
    background: #f6c800;
}

#playingCards .my_slick_dots {
	display: block;
	position: absolute;
	margin: 0; padding: 0;
	bottom: -10%;
	width: 100%;
	list-style: none;
	text-align: center;
}
#playingCards .my_slick_dots li {
	display: inline-block;
	position: relative;
	margin: 0 4%;
	padding: 0;
	width: 8%;
	cursor: pointer;
}
#playingCards .my_slick_dots li button {
	display: block;
	padding-top: 80%;
	width: 100%;
	border: 3px solid #707070;
	border-radius: 50%;
	background: #FFF;
	font-size: 0px;
    cursor: pointer;
	appearance: none;
	text-indent: -9999px;
}
#playingCards .my_slick_dots li.slick-active button { background: #000;  }


/* 2025/06/24 LP banner,news add */
#banner {
	width: 100%;
}
#banner h2 {
	margin-bottom: 1%;
	font-size: 1.0rem;
	font-weight: bold;
}
#banner .banners {
	width: 100%;
}
#banner .slick-slide {
	transform: scale(.8);
	transform-origin: bottom center;
	transition: transform .3s;
}
#banner .slick-current,
#banner .is-active-next {
	transform: scale(1);
}


#news {
	margin: 0% auto 15%;
	padding: 5% 0 0 0;
	width: 87%;
}
#news .news_frame {
	width: 100%;
	border: 3px solid #000;
	border-radius: 10px;
}
#news h2 {
	padding: 2% 0;
	background: #f5c800;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	border-radius: 10px 10px 0 0;
}
#news h2 span {
	font-size: 1.2rem;
}
#news .news_wrap {
	position: relative;
	width: 100%;
}
#news ul {
	position: relative;
	overflow-y: scroll;
	margin: 0 auto;
	width: 100%; max-height: calc(100vw / 375 * 275);
}
#news .mask {
	pointer-events: none;
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%);
}

#news ul li {
	position: relative;
	margin: auto; padding: 3% 8% 3% 0%;
	width: 90%;
	border-bottom: 2px #b7b7b7 solid;
}
#news ul li a {
	display: block;
	position: relative;
	text-decoration: none;
	color: #000;
}
#news ul li a:after {
	display: block;
	position: absolute;
	top: 50%; right: -9%;
	width: 10px; height: 10px;
	border-top: 3px #808080 solid;
	border-right: 3px #808080 solid;
	transform: translateY(-50%) rotate(45deg);
	content: '';
}

#news ul li .date {
	font-size: 0.8rem;
}
#news ul li .headline {
	font-size: 1.0rem;
	font-weight: bold;
}

#modal {
	display: none;
	z-index: 50;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
#modal .bg_mask {
	opacity: 0;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.7);
	transition: 0.3s ease-in;
}

#modal .modal_frame {
	opacity: 0;
	position: absolute;
	top: 50%; left: 7%;
	width: 86%;
	background: #FFF;
	border: 3px solid #000;
	border-radius: 10px;
	transition: 0.3s ease-in;
	transform: translateY(-50%);
}
#modal .modal_frame h2 {
	padding: 4% 0;
	background: #f5c800;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	border-radius: 10px 10px 0 0;
}
#modal .modal_frame .modal_content_wrap {
	overflow-y: scroll;
	padding: 4%;
	max-height: calc(100vw / 375 * 400);
}
#modal .modal_frame .date {
	margin-bottom: 3%;
	font-size: 0.8rem;
	color: #bebebe;
}
#modal .modal_frame .title {
	margin-bottom: 3%;
	font-size: 1.0rem;
	font-weight: bold;
	color: #111;
}
#modal .modal_frame .text {
	margin-bottom: 6%;
	font-size: 1.0rem;
	color: #111;
}
#modal .modal_frame .news_image {
	display: block;
	margin: auto;
	width: 75%;
}
#modal .modal_frame .modal_footer {
	padding: 4% 0;
	background: #f5c800;
	border-radius: 0 0 10px 10px;
	font-size: 3.8vw;
}
#modal .modal_frame .modal_footer .btn_close {
	display: block;
	margin: auto;
	padding: 2%;
	width: 40%;
	font-size: 1.0rem;
	color: #000;
	border: 1px solid #111;
	border-radius: 35px;
	text-align: center;
	text-decoration: none;
}

/* for PC(over width:768px) */
@media screen and (min-width: 768px) {
	#wrap::before {
		position: fixed;
		width: 100%; height: 100vh;
		background: url(../images/bg_main_pc.jpg) no-repeat;
		background-size: cover;
		background-position: top center;
		content: '';
	}
	#container {
		margin: auto;
		width: 768px;
	}
	#container::before { width: 768px; }
	#header .title .logo_sb { width: 22%; }
	#header .title .logo_app { width: 65%; }
	#footer .lists li { font-size: 20px; }
	#footer .copyright { font-size: 16px; }
	#btn_menu {
		top: 54px; left: calc(50% + 345px);
		width: 80px; height: 80px;
	}
	#btn_menu.show { left: 53%; }
	#menu { width: 50%; height: 100vh; }
	#menu_mask { display: block; }
	#menu.show { left: 50%; }


	#news ul {
		width: 100%; height: calc(100vw / 375 * 80);
	}

	#modal .modal_frame {
		position: relative;
		left: 0;
		margin: auto;
		width: 650px;
	}
	#modal .modal_frame .modal_content_wrap { max-height: 60vh; }
}