@charset "utf-8";


/*===================================================
	リセット
====================================================*/
* html body, * html input, * html textarea {font-family: "Noto Sans Japanese","メイリオ", meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;}
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;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{text-decoration:none;}
i.fas{display:inline;}
img{width:100%;}

header {display: none;}
fotter {display: none;}
#fixedBanner{display: none;}
#wrap {
	padding-top: 0;
	padding-bottom: 0!important;
	font-family: "Noto Sans Japanese","メイリオ", meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;
}




/*===================================================
	フレーム
====================================================*/
html, body{
    font-family: "Noto Sans Japanese","メイリオ", meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 14px;
    font-weight: 300;
	letter-spacing: 0.1em;
}
.allContainer{
	background: #999EA4;
}
.wrap{
	overflow-x: hidden;
}
.contain{
    z-index: 1;
    position: relative;
}
.inBox{

}




/*===================================================
	共通
====================================================*/
.loading{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    z-index: 20;
}
.bg{
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
    background: url(../image/ph_artist.jpg) no-repeat;
    background-position: center bottom;
    background-size: 100%;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
	transform: scale(1.5);
    transition:2s ease;
}
.headerFix .bg{
	transform: scale(1);
    opacity: 1;
}
.shade{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left:0;
	background: rgba(0,0,0,0.1);
}
.logo{
    line-height: 0;
    width: 70%;
    position: fixed;
    right: -10%;
    top: -40px;
    transform: rotate(-25deg);
    z-index: 0;
    transition: 0s 1.5s;
    opacity: 0;
}
.loaded .logo{
    opacity: 0.1;
}
.slideView{
	position:relative;
}
.slideView:after{
	display: block;
    position: absolute;
    top: 0;
    right:100%;
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    transform: scaleX(0);
    transform-origin: left;
    transition:transform 0.5s 1s ease, width 0.5s 1.7s ease;
}
.loaded .slideView:after{
    transform: scaleX(1);
    right:0;
	width: 0;
}
.slideView *{
	opacity:0;
    transition: 0s 1.5s;
}
.loaded .slideView *{
	opacity:1;
}

.slideUp *{
	display: block;
    transition: 0.2s 2.5s ease;
    transform: translateY(400%);
}
.loaded .slideUp *{
    transform: translateY(0);
}




/*===================================================
	visual
====================================================*/
.visual{
}
.visual .inBox{
	color: #FFF;
    padding: 0 0 40px;
    margin-top: -35px;

}
.visual .mainImage{
	line-height: 0;
	position:relative;
}
.visual .mainImage:before{
	position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.5) 100%,rgba(0,0,0,0.5) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.5) 100%,rgba(0,0,0,0.5) 100%);
	opacity:0;
    transition: 0s 1.5s;
}
.loaded  .visual .mainImage:before{
	opacity:1;
}
.visual .inner{
    position: relative;
}
.visual h2{
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-120%);
    overflow-y: hidden;

}
.visual h2 img{
	width: 55%;
    margin: 0 0 10px;
}
.visual h2 span{
	font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;

}
.visual .tourTit{
	width: 100%;
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateY(-135%);
    overflow-y: hidden;
}
.visual .mainTit{
	margin: 0 0 25px;
}
.visual .mainTit h1,
.visual .mainTit p{
	display: inline-block;
	line-height: 1em;
}
.visual .mainTit h1{
    font-size: 48px;
    margin: 0 0 10px;
}
.visual .mainTit p{
	font-size: 22px;
}

.visual .mainTit h1 span,
.visual .mainTit p span{
    display: inline-block;
    background: #000;
    font-weight: 800;
    padding: 10px 30px 14px 30px;
    letter-spacing: 0.15em;
    line-height: 1em;
}
.visual .mainTit h1.slideView:after{
    transition:transform 0.5s 1.2s ease, width 0.5s 1.9s ease;
}
.visual .mainTit h1.slideView *{
    transition: 0s 1.7s;
}
.visual .mainTit p.slideView:after{
    transition:transform 0.5s 1.4s ease, width 0.5s 2.1s ease;
}
.visual .mainTit p.slideView *{
    transition: 0s 1.9s;
}
.visual .lead{
	font-weight: 800;
    font-size: 4vw;
    margin: 0 0 20px;
    padding: 0 20px;
    line-height: 1.6em;
    letter-spacing: 0.05em;
	overflow-y: hidden;
}
.visual .txt{
    padding: 0 20px;
    font-size: 12px;
    margin: 0 0 20px;
	overflow-y: hidden;
}
.visual .price{
    padding: 0 20px;
	font-weight: 800;
    font-size: 18px;
	overflow-y: hidden;
}
.visual .price .tax{
	display: inline;
    font-size: 70%;
    padding: 0 0 0 5px;
}




/*===================================================
	contents
====================================================*/
.contents{
}
.contents .inBox{
    background: rgba(255,255,255,0.2);
    margin: 0 0 0 20px;
    padding: 20px;
}
.contents h3{
    font-size: 40px;
    font-weight: 800;
    transform: translateX(-35px);
    line-height: 1em;
    margin: 0 0 10px;
}
.contents .sup{
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 40px;
}
.contents .pickup{
    position: relative;
    transition: 0.3s ease;
    transform: scale(0);
}
.contents .pickup.started{
	transform:scale(1);
}
.contents .pickup .icon{
    background: #FFF;
    color: #000;
    width: 55px;
    height: 55px;
    font-size: 10px;
    font-weight: 800;
    position: absolute;
    left: -10px;
    top: -20px;
    text-align: center;
    line-height: 55px;
    border-radius: 100px;
    letter-spacing: 0.01em;
}
.contents .pickup .icon:after{
	content: "";
    position: absolute;
    left: 20vw;
    top: 50%;
    display: block;
    width: calc(100% - 20vw);
    height: 1px;
    background: #000;
}
.contents .pickup .pickupImg{
    line-height: 0;
    width: 85%;
    margin: 0 auto 10px;
}
.contents .pickup .conTit{
	text-align: center;
    margin: 0 0 5px;
}
.contents .pickup .conTxt{
    text-align: center;
	margin: 0 0 40px;
}
.contents .contentsList{
    margin: 0 0 20px;

}
.contents .contentsList li{
	background: #FFF;
	padding: 14px 15px 17px;
	margin: 0 0 20px;
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);
	opacity:0;
	transition:0.5s ease;
}
.contents .contentsList li:nth-child(odd){
    transform: translateX(100%);
}
.contents .contentsList li:nth-child(even){
	transform: translateX(-100%);
}
.contents .contentsList li.started:nth-child(odd){
    transform: translateX(20px);
}
.contents .contentsList li.started:nth-child(even){
	transform: translateX(-40px);
}
.contents .contentsList li.started {
	opacity:1;
}
/*
.contents .contentsList.started li:nth-child(1){
	transition-delay:0;
}
.contents .contentsList.started li:nth-child(2){
	transition-delay:0.2s;
}
.contents .contentsList.started li:nth-child(3){
	transition-delay:0.4s;
}
.contents .contentsList.started li:nth-child(4){
	transition-delay:0.6s;
}
.contents .contentsList.started li:nth-child(5){
	transition-delay:0.8s;
}
.contents .contentsList.started li:nth-child(6){
	transition-delay:1s;
}
*/
.contents .contentsList li:after{
	position:absolute;
	right:0;
	top:0;
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 30px 30px 0;
}
.contents .contentsList li:before{
	position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    transform: rotate(180deg);
}
.contents .contentsList li:nth-child(1):after,
.contents .contentsList li:nth-child(1):before{
    border-color: transparent #6286ac transparent transparent;
}
.contents .contentsList li:nth-child(2):after,
.contents .contentsList li:nth-child(2):before{
	border-color: transparent #9d8272 transparent transparent;
}
.contents .contentsList li:nth-child(3):after,
.contents .contentsList li:nth-child(3):before{
	border-color: transparent #759d7a transparent transparent;
}
.contents .contentsList li:nth-child(4):after,
.contents .contentsList li:nth-child(4):before{
    border-color: transparent #927ba3 transparent transparent;
}
.contents .contentsList li:nth-child(5):after,
.contents .contentsList li:nth-child(5):before{
    border-color: transparent #d9d38f transparent transparent;
}
.contents .contentsList li:nth-child(6):after,
.contents .contentsList li:nth-child(6):before{
	border-color: transparent #b25e71 transparent transparent;
}

.contents .contentsList li:last-child{
    margin: 0;
}
.contents .conTit{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.contents .conTxt{
	font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.contents .btnDetail a{
    display: block;
    color: #000;
    border: 2px solid;
    box-sizing: border-box;
    text-decoration: none;
    padding: 5px 10px;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3vw;
    font-weight: 600;
    border-radius: 100px;
}
.contents .other{
    font-size: 12px;
    font-weight: 400;
}




/*===================================================
	kuji
====================================================*/
.kuji{
    margin: 40px 0;
}
.kuji .inBox{
	padding: 0 20px;
    color: #FFF;
}
.kuji .inBox h3{
	text-align: center;
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 15px;
}
.kuji .inBox .sup{
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.15em;
    line-height: 1.6em;
    margin: 0 0 45px;
}
.kuji .prizeList{
	display: flex;
    flex-wrap: wrap;
    margin: 0 0 20px;
}
.kuji .prizeList li{
    width: 50%;
    box-sizing: border-box;
    margin: 0 0 20px;
    line-height: 1.3em;
    transition:0.3s;
    transform:scale(0);
}
.kuji .prizeList li.started{
    transform:scale(1);
}
/*
.kuji .prizeList li:nth-child(1).started{
    transition-delay:0s;
}
.kuji .prizeList li:nth-child(2).started{
    transition-delay:0.1s;
}
.kuji .prizeList li:nth-child(3).started{
    transition-delay:0.2s;
}
.kuji .prizeList li:nth-child(4).started{
    transition-delay:0.3s;
}
*/
.kuji .prizeList li:nth-child(odd){
	padding: 0 10px 0 0;
}
.kuji .prizeList li:nth-child(even){
	padding: 0 0 0 10px;
}
.kuji .prizeList.onPickUp li:nth-child(odd){
	padding: 0 0 0 10px;
}
.kuji .prizeList.onPickUp li:nth-child(even){
	padding: 0 10px 0 0;
}
.kuji .prizeList.onPickUp li:nth-child(1){
    width: 80%;
    margin: 0 auto 40px;
    padding: 0;
}
.kuji .prizeList li .prizeDetail{
	position:relative;
}
.kuji .prizeList li .prizeRank{
	position: absolute;
    left: -15px;
    top: -15px;
    display: block;
    background: url(../image/bg_prize_rank.png);
    background-size: cover;
		width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 17px;
    font-weight: 600;
    z-index: 10;
}
.kuji .prizeList.onPickUp li:nth-child(1) .prizeRank{
	width: 90px;
	height: 90px;
	background-image: url(../image/bg_prize_rank_gold.png);
	color: #000;
	line-height: 90px;
	font-size: 7vw;
	left: -40px;
	top: -30px;
    font-weight: 800;
}
.kuji .prizeList li .prizeRank span{
	font-size: 70%;
    padding: 0 0 0 2px;
}
.kuji .prizeList li .prizeImage{
    line-height: 0;
    margin: 0 0 5px;
    position: relative;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
}
.kuji .prizeList li .prizeName{
	font-weight: 700;
    margin: 0 0 3px;
    font-size: 14px;
    line-height: 1.5em;
}
.kuji .prizeList li .prizeTxt{
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.3em;
    margin: 0 0 5px;
}
.kuji .prizeList li .prizeNum{
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #FFF;
    background: #000;
    width:100px;
    padding: 0 5px;
    margin: 0 0 0 auto;
    transform: skew(-15deg, 0deg);
}
.kuji .price{
    text-align: center;
    font-weight: 600;
    line-height: 1.6em;
    font-size: 4.8vw;
    letter-spacing: 0.05em;
}
.kuji .price span{
    display: block;
    font-size: 75%;
}




/*===================================================
	info
====================================================*/
.info{
    background: #FFF;
}
.info .inBox{
	padding: 40px 0 0;
}
.info h3{
	position: relative;
    font-weight: 800;
    font-size: 32px;
    padding:0 20px;
    margin: 0 0 40px;
}
.info h3:after{
	content: "";
    position: absolute;
    left: 20px;
    bottom: -20px;
    display: block;
    width: 50px;
    height: 4px;
    background: #000;
}
.info .price{
	font-size: 16px;
    font-weight: 600;
    padding:0 20px;
    margin: 0 0 20px;
}
.info .price .sub{
    font-size: 70%;
}
.info .price .tax{
    font-size: 70%;
}
.info .liveList{
	border: 2px solid;
    padding: 10px;
    margin: 0 20px 20px;
}
.info .liveList dt{
    font-weight: 600;
    margin: 0 0 10px;
}
.info .liveList dd{
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 5px;
}
.info .liveList dd:last-child{
    margin: 0;
}
.info .cap{
    padding:0 20px;
    font-size: 11px;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin: 0 0 40px;
}
.info .cap li{
	text-indent: -1em;
	padding-left: 1em;
}
.info .cap li:not(:last-child){
	margin-bottom: 5px;
}
.info .btn a{
	display: block;
	background: #000;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	padding: 15px;
	font-size: 15px;
	font-weight: 600;
	width: 80%;
	border-radius: 100px;
	margin: 0 auto;
	line-height: initial;
	border: none;
}
.info .btn .btn--sub{
	background: none;
	color: #000;
	border: 1px solid #000;
}
.info .methodBox{
    background: #DDD;
    padding: 40px 0;
}
.info .methodBox .inner{
	padding: 0 20px;
    margin: 0 0 20px;
}

.info .methodBox .tit{
	font-size: 18px;
    border-left: 5px solid;
    line-height: 1.3em;
    padding: 0 0 2px 10px;
    margin: 0 0 20px;
}

.info .methodBox .methodLead{
	font-size: 12px;
    letter-spacing: 0.05em;
    font-weight: 400;
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: 1px dashed #FFF;
}
.info .methodBox .methodLead span{
	display: block;
    margin: 0 0 10px;
    font-weight: 600;
}

.info .methodBox .pay{
    font-size: 11px;
    margin: 0 0 15px;
    padding: 0 0 15px;
    font-weight: 600;
    border-bottom: 1px dashed #FFF;
    letter-spacing: 0.02em;
}
.info .methodBox .pay span{
    display: inline-block;
    padding: 2px 10px;
    background: #000;
    color: #FFF;
    border-radius: 100px;
    margin: 0 0 5px;
}
.info .methodBox .attentionList{
    margin: 0 0 30px;
}
.info .methodBox .attentionList li{
font-size: 11px;
    font-weight: 600;
    padding: 0;
    margin: 0 0 5px;
}
.attentionList li::before {
    content: none;
}
.info .methodBox .attentionList li:last-child{
margin: 0;
}
/*===================================================
	slick-slide
====================================================*/
.slick-slide {
	outline: none;
    position: relative;
    padding: 10px 15px 0;
}
.slick-next, .slick-prev {
    width: 35px;
}
.slick-next {
    right: -15%;;
}
.slick-prev {
    left: -15%;;
}
.slick-prev:before, .slick-next:before {
    width: 15px;
    height: 15px;
}
.slick-dots {
    bottom: -35px;
}
.slick-dotted.slick-slider {
	width: 100%;
	margin: 0 auto 60px;
}
.slick-dots li button:before {
    font-size: 20px;
}

.slick-slide img{
    margin: 0 0 10px;
}
.slick-slide .methodTxt{
	line-height: 1.3em;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 13px;
}
.slick-slide .num{
	position: absolute;
    background: #FBA804;
    padding: 10px;
    font-size: 15px;
    font-weight: 800;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    left: 10px;
    top: 5px;
}
/*===================================================
	footer
====================================================*/
.footer{
	background: #FFF;
    padding: 40px 10px 40px;
    position: relative;
}
footer #supportNav {
    display: none;
}
footer .copyright {
    display: none;
}
.footer .credit{
	font-size: 10px;
    text-align: center;
    letter-spacing: 0.1em;
}
.footer .scDwn{
		line-height: 0;
		position: fixed;
		width: 100px;
		right: 20px;
		bottom: 35px;
		z-index: 5;
}
.footer .scDwn span{
		display: block;
		width: 100px;
    height: 100px;
		position: relative;
}
.footer .scDwn span::before{
		content:'';
		display: block;
		width: 100%;
		height: 100%;
		background: url(../image/bg_prize_rank_top.png) no-repeat center / contain;
		position: absolute;
		top:0;
		left: 0;
		transform: rotate(360deg) scale(0);
		transition: .3s 3s;
}
.footer .scDwn span a{
    display: block;
    width: 100%;
    color: #000;
		position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
		line-height: 1.3em;
		font-weight: 800;
		font-size: 11px;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: 0.5s ease;
    text-align: center;
    padding: 25px;
}
.footer .scDwn span a em{
		display: inline-block;
		font-size: 13px;
		letter-spacing: -0.07em;
		padding-top: 2px;
}
.loaded .footer .scDwn span::before{
		transform: rotate(0) scale(1);
}
.loaded .footer .scDwn span a{
		opacity:1;
		transition-delay: 3s;
}
.headerFix .footer .scDwn span::before{
		transition-delay: 0.3s;
}
.headerFix .footer .scDwn span a{
		transition-delay: 0.3s;
}
/*
.headerFix .footer .scDwn span::before{
		transform: rotate(0) scale(1);
}
.headerFix .footer .scDwn span a{
		opacity:1;
		transition-delay: 0.3s;
}
*/
.footerFix .footer .scDwn span::before{
	transform: rotate(360deg) scale(0);
}
.footerFix .footer .scDwn span a{
		opacity:0;
		pointer-events:none;
    transition-delay: 0s;
}
.footer .scDwn .scCircle{
    fill: none;
    stroke: #000;
    stroke-dasharray: 400%;
    stroke-dashoffset: 100%;
    stroke-width: 2px;
}
.footer .scDwn .scCircle{
    fill: none;
    stroke: #FFF;
    stroke-dasharray: 400%;
    stroke-dashoffset: 400%;
    stroke-width: 12px;
    transition:0.5s ease;
}
.headerFix .footer .scDwn .scCircle{
    stroke-dashoffset: 100%;
    transition:0.5s ease;
}
.footerFix .footer .scDwn .scCircle{
    stroke-dashoffset: 400%;
}




/*===================================================
	レスポンシブ PC
====================================================*/
@media screen and (min-width: 960px){
.sp{display:none;}
#container {
    width: 100%;
}
footer{
	display:none;
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
}
.logo {
	transition: 0.5s 1.5s;
    width: 50%;
}
.frame{
	width: 480px;
    margin: 0 auto;
    position: relative;
    padding: 50px 0;
}
.frame:after{
	content:"";
}
.visual .lead {
    font-size: 18px;
}
.contents .btnDetail a {
    font-size: 12px;
}
.kuji .price {
    font-size: 22px;
}
.kuji .prizeList.onPickUp li:nth-child(1) .prizeRank{
	font-size: 30px;
}
.btn a:hover {
    background: #000;
}
.btn .btn--sub:hover{
	background: #000;
	color: #fff;
}
.footer .scDwn {
	right: 50%;
	bottom: 40px;
	margin-right: -360px;
}
.footer .scDwn span { width: 150px;  height: 150px; }
.footer .scDwn span a{font-size: 16px;}
.footer .scDwn span a em {font-size: 21px;}
}