@charset "UTF-8";

html{
	height: 100%;
}

body{
	height: 100%;
}

img{
	width: 100%;
	height: auto;
}

#wrapper {
  width: 100%;
	height: 100%;
  position: relative;
}

#content {
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
	background: #be0205;
	min-height: 100%;
  display: flex;
  flex-direction: column;
	
}

#language{
	background: #fff;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 20px;
	width: 100%;
}

#language ul{
	text-align: center;
}

#language ul li{
	display: inline-block;
}

#language ul li a{
	color: #be0205;
	font-weight: bold;
	padding: 5px 20px;
	font-size: 20px;
}

#language ul li a.selected{
	color: #fff;
	font-weight: bold;
	background: #be0205;
	border-radius: 20px;
}

#main{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 6em;
	flex: 1;
}


#topKimg{
	max-width: 920px;
	margin: 0 auto;
}

#topKimg p.mainCopy{
	font-weight: bold;
	font-size: clamp(1px, 3.4vw, calc(14px * 2.3));
	color: #fff;
	text-align: center;
	margin-top: 2em;
}

#topKimg h1{
	width: 80%;
	font-size: clamp(1px, 3.4vw, calc(14px * 2.3));
	margin: 2em auto 0 auto;
}


#topKimg .kimg{
	max-width: 800px;
	margin: 0 auto;
}


#topKimg p.subCopy{
	font-weight: bold;
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	color: #fff;
	text-align: center;
	margin-top: 2em;
	line-height: 1.8;
}

p.notice{
	font-weight: bold;
	font-size: clamp(1px, 2.33vw, calc(8px * 2.3));
	color: #fff;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 3em;
	line-height: 1.8;
}


#step{
	box-sizing: border-box;
	padding: 0 40px;
	max-width: 1000px;
	margin: 4em auto 0 auto;
}

#step ul{
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

#step ul li{
	width: 30%;
}


#step ul li dl{
	
}

#step ul li dl dt.title{
	text-align: center;
	font-weight: bold;
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	color: #fff;
	margin-bottom: 1em;
	box-sizing: border-box;
}

#step ul li dl dd.img{
	box-sizing: border-box;
	
}

#step ul li dl dd.img img{
	border-radius: 6px;
	box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 1);
}


#step ul li dl dd.description{
	font-size: clamp(1px, 1.8vw, 18px);
	color: #fff;
	line-height: 1.8;
	margin-top: 1em;
}

#flow{
	width: 100%;
	box-sizing: border-box;
	padding: 40px;
	background: #fff;
}

#flow ul{
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	
}

#flow ul li{
	width: 30%;
	text-align: center;
	padding: 1em;
	border: 2px solid #aaa;
	box-sizing: border-box;
	font-weight: bold;
	color:#aaa;
	background: #efefef;
	position: relative;
	font-size: 18px;
	line-height:1.2;
}

#flow ul li:nth-child(1):before,
#flow ul li:nth-child(2):before,
#flow ul li:nth-child(3):before{
	background: #aaa;
	color: #fff;
	font-weight: bold;
	width: 1.6em;
	height: 1.6em;
	padding: 0.3em 0.4em 0.2em 0.4em;
	border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
	margin-right: 0.5em;
}

#flow ul li:nth-child(1):before{
	content:"1";
}

#flow ul li:nth-child(2):before{
	content:"2";
}
#flow ul li:nth-child(3):before{
	content:"3";
}

#flow ul li.current:nth-child(1):before,
#flow ul li.current:nth-child(2):before,
#flow ul li.current:nth-child(3):before{
	background: #be0205;
}


#flow ul li:after{
	content:"";
	background: #be0205;
  	height: calc(tan(60deg) * 30px / 2);
  	width: 15px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	position: absolute;
	left: -11.5%;
	top: calc(50% - 15px);
}

#flow ul li:first-child:after{
	display: none;
}

#flow ul li.current{
	color: #be0205;
	border: 2px solid #be0205;
	background: #fed0d0;
}

.hideContent{
	display: none;
}

.face{
	width: 80%;
	border: 3px solid #333;
	background: #333;
	margin: 0 auto;
	aspect-ratio: 3 / 4;
}

.article{
	max-width: 1000px;
	box-sizing: border-box;
	padding: 6em 40px 0 40px;
	margin: 0 auto;
}

hr.bd{
	border-top: 1px solid #fff;
	max-width: 920px;
	margin: 0 auto;
	height: 0;
	display: block;
}

hr.bd.mt20{
	margin: 5em auto 0 auto;
}


#couponArea{
	border: 4px solid #fff;
	box-sizing: border-box;
	padding: 40px 40px 40px 40px;
	color:#fff;
	text-align: center;
	display: block;
}


/*
.coupon{
	text-align: center;
	width: 700px;
	padding: 40px;
	position: absolute;
  top: 40%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
	box-sizing: border-box;
}
*/

.ticket{
	background: #fff;
	border: 3px solid #333;
	box-sizing: border-box;
	padding: 2em;
	width: 100%;
	margin-bottom: 3em;
}

.ticket h3{
	font-size: 3vw;
	margin-bottom: 0.5em;
	font-weight: bold;
	line-height: 1.2;
}

.ticket p.discount{
	font-size: 3vw;
	font-weight: bold;
	color: #be0205;
	margin-bottom: 0.2em;
}

.ticket p.discount span{
	font-size: 10vw;
}

.ticket p.discountNotes{
	font-size: 2vw;
}

.coupon h4{
	font-size: 4vw;
	color: #fff;
	font-weight: bold;
	margin-bottom: 1em;
}

.coupon p.date{
	font-size: 2.4vw;
	color: #fff;
	margin-bottom: 0.5em;
}

.coupon p.timelimit{
	font-size: 2.4vw;
	color: #fff;
	margin-bottom: 2em;
}



h2{
	/*font-size: 3vw;*/
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	margin-bottom: 0.5em;
	font-weight: bold;
	color: #fff;
	line-height: 1.2;
}

.cameraNotes{
	/*font-size: 2vw;*/
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	margin-bottom: 2em;
	color: #fff;
	line-height: 1.6;
}

.userName{
	/*font-size: 2vw;*/
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	margin-bottom: 2em;
	color: #fff;
	line-height: 1.6;
}

.legalNotes{
	/*font-size: 2vw;*/
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	margin-top: 3em;
	margin-bottom: 1em;
	color: #fff;
	line-height: 1.6;
	text-align: center;
}

.couponImg{
	margin-bottom: 2em;
}

.mypageNotes{
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	margin-bottom: 3em;
	margin-top: 2em;
	color: #fff;
	line-height: 1.6;
	text-align: center;
	font-weight: bold;
}

.couponText{
	/*font-size: 2vw;*/
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	color: #fff;
	line-height: 1.6;
	text-align: center;
}

.couponPrice{
	/*font-size: 2vw;*/
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	color: #fff;
	line-height: 1.6;
	text-align: center;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.couponPrice span{
	font-size: clamp(1px, 6.15vw, calc(24px * 2.3));
}

.link p.timeStamp{
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	text-align: center;
	font-weight: bold;
	color: #fff;
	margin-bottom: 0.2em;
	display: inline-block;
}

.link p.timeStamp.underLine{
	border-bottom: 3px solid #fff;
	padding-bottom: 0.4em;
}

.link p.couponUse{
	
}

#couponArea .link a{
	display: inline-block;
	margin-bottom: 0.3em;
}
	

.bodyText{
	/*font-size: 2vw;*/
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	color: #fff;
	line-height: 1.6;
}

.errorImg{
	max-width: 1000px;
	padding: 40px;
	box-sizing: border-box;
	margin: 6em auto 0 auto;
}

.btn{
	box-sizing: border-box;
	padding: 0 40px;
	margin-top: 4em;
}

.btn.mt1{
	margin-top: 1.5em;
}

.cameraUi{
	box-sizing: border-box;
	margin-top: 2em;
	margin-bottom: 2em;
}

.ybtn{
	box-sizing: border-box;
	text-align: center;
	display: block;
	padding: 0.7em 0;
	width: 500px;
	margin: 0 auto;
	background: #f8e83b;
	font-weight: bold;
	border-radius: 12px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
	border:4px solid #000;
	/*font-size: 3vw;*/
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	color: #333;
	cursor: pointer;
}


.loginBtn{
	box-sizing: border-box;
	text-align: center;
	display: block;
	padding: 0.7em 2em;
	width: 500px;
	margin: 0 auto;
	background: #be0205;
	font-weight: bold;
	border-radius: 12px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
	border:4px solid #000;
	/*font-size: 3vw;*/
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	color: #fff;
}



.shutterBtn{
	box-sizing: border-box;
	text-align: center;
	display: block;
	padding: 0.7em 2em;
	width: 500px;
	margin: 0 auto;
	background: #be0205;
	font-weight: bold;
	border-radius: 12px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
	border:4px solid #000;
	/*font-size: 3vw;*/
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	color: #fff;
}

.resetBtn{
	box-sizing: border-box;
	text-align: center;
	display: block;
	padding: 0.7em 2em;
	width: 500px;
	margin: 0 auto;
	background: #666;
	font-weight: bold;
	border-radius: 12px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
	border:4px solid #000;
	/*font-size: 3vw;*/
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	color: #fff;
}

.link{
	margin-top: 4em;
	text-align: center;
}

.link.mt0{
	margin-top: 0;
}

.link.mt20{
	margin-top: 6em;
}


.link a,
.link input[type="submit"],
.link input[type="button"]{
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	text-align: center;
	font-weight: bold;
	color: #fff;
	border-bottom: 3px solid #fff;
	padding-bottom: 0.5em;
}

input[type="text"].textbox{
	background: #fff;
	width: 100%;
	border: 3px solid #333;
	/*font-size: 2vw;*/
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	box-sizing: border-box;
}

#footer{
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	padding: 40px;
}

#footer dl{
	max-width: 1000px;
	position: relative;
	display: flex;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 40px;
	align-items: center;
}


#footer dl dt{
	font-weight: bold;
	width: 8em;
	box-sizing: border-box;
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	line-height: 1.6;
	color: #be0205;
}

#footer dl dd{
	box-sizing: border-box;
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	width: calc(100% - 6em);
	line-height: 1.6;
}



#videobox {
        width: 100%;
        aspect-ratio: 3 / 4;
        display: none;
        overflow: hidden;
        position: relative;
    }
    #videobox.show {
        display: block;
    }
    #videobox.hide {
        display: none;
    }
    #face_video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%) scaleX(-1);
        min-width: 100%;
        min-height: 100%;
    }
    #pictbox {
        width: 100%;
        aspect-ratio: 3 / 4;
        display: none;
        overflow: hidden;
        position: relative;
    }
    #pictbox.show {
        display: block;
    }
    #pictbox.hide {
        display: none;
    }
    #canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%) scaleX(-1);
        min-width: 100%;
        min-height: 100%;
    }
    #imgcode {
        height: 150px;
        width: 100%;
    }


#couponAlert{
	box-sizing: border-box;
	padding: 40px;
	font-size: clamp(1px, 2.56vw, calc(10px * 2.3));
	line-height: 1.6;
}

#couponAlert h3{
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	margin-bottom: 1em;
	color: #be0205;
}

#couponAlert p{
	margin-bottom: 1em;
}

#couponAlert .linkBtns{
	text-align: center;
	display:flex;
	justify-content: space-between;
	box-sizing: border-box;
}

#couponAlert .linkBtns li{
	width: 48%;
	box-sizing: border-box;
	
}


#couponAlert .linkBtns a{
}

.btnYes{
	box-sizing: border-box;
	text-align: center;
	display: block;
	padding: 0.7em 2em;
	width: 100%;
	margin: 0 auto;
	background: #be0205;
	font-weight: bold;
	border-radius: 12px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
	border:4px solid #000;
	/*font-size: 3vw;*/
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	color: #fff;
}

.btnNo{
	box-sizing: border-box;
	text-align: center;
	display: block;
	padding: 0.7em 2em;
	width: 100%;
	margin: 0 auto;
	background: #666;
	font-weight: bold;
	border-radius: 12px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
	border:4px solid #000;
	/*font-size: 3vw;*/
	font-size: clamp(1px, 3.08vw, calc(12px * 2.3));
	color: #fff;
}



/*----------------------
 sp tablet
----------------------*/

@media (max-width: 768px) {


#main{
	padding-bottom: 4em;
	min-height: 90vh;
}

#topKimg p.mainCopy{
	font-size: 5vw;
	margin-top: 2em;
}

#topKimg h1{
	margin: 3em auto 0 auto;
}
	
#topKimg p.subCopy{
	font-size: 3.8vw;
	margin-top: 2em;
}
	
p.notice{
	font-size: 3.2vw;
	margin-top: 2em;
	margin-bottom: 3em;
}
	
#step{
	margin: 2.5em auto 0 auto;
	padding: 0 20px;
}
	
#step ul{
	display: block;
}
	
#step ul li{
	width: 100%;
	margin-top: 1.5em;
}

	
#step ul li dl{
	display: flex;
	align-items: center;
}
	
#step ul li dl dt.title{
	/*font-size: 5vw;*/
	font-size: 4vw;
	color: #fff;
	/*margin-bottom: 1em;*/
	margin-bottom: 0;
	box-sizing: border-box;
	width: 17%;
	margin-right: 15px;
}
	
#step ul li dl dd.img{
	width: 28%;
	box-sizing: border-box;
}

#step ul li dl dd.img img{
	border-radius: 3px;
	box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1);
}
	
#step ul li dl dd.description{
	font-size: 3.2vw;
	width:55%;
	box-sizing: border-box;
	padding-left: 15px;
	margin: 0;
	font-weight: bold;
}
	
#flow{
	padding: 20px;
}

#flow ul li{
	width: 28%;
	padding: 0.6em 0;
	font-size: 2.8vw;
}

#flow ul li:nth-child(1):before,
#flow ul li:nth-child(2):before,
#flow ul li:nth-child(3):before{
	display: block;
	margin: 0 auto 0.5em auto;
	padding-top: 0.25em;
}

#flow ul li.current:nth-child(1):before,
#flow ul li.current:nth-child(2):before,
#flow ul li.current:nth-child(3):before{
	background: #be0205;
}


#flow ul li:after{
  	height: calc(tan(60deg) * 20px / 2);
  	width: 10px;
	left: -20%;
	top: calc(50% - 10px);
}
	
.coupon{
	width: 100%;
	padding: 30px 20px 60px 20px;
}

.ticket{
	background: #fff;
	border: 3px solid #333;
	box-sizing: border-box;
	padding: 2em;
	width: 100%;
	margin-bottom: 2em;
}

.ticket h3{
	font-size: 6vw;
	margin-bottom: 0.5em;
}

.ticket p.discount{
	font-size: 6vw;
	margin-bottom: 0.2em;
}

.ticket p.discount span{
	font-size: 18vw;
}

.ticket p.discountNotes{
	font-size: 4vw;
}

.coupon h4{
	font-size: 6vw;
}

.coupon p.date{
	font-size: 5vw;
}

.coupon p.timelimit{
	font-size: 5vw;
	margin-bottom: 1.5em;
}

	
	
.article{
	padding: 60px 20px 0 20px;
}
	
hr.bd{
	width: calc(100% - 40px);
}
	

h2{
	font-size: 5vw;
	margin-bottom: 1em;
	font-weight: bold;
	color: #fff;
}
	
.cameraNotes{
	font-size: 3.6vw;
	margin-bottom: 2em;
}

.userName{
	font-size: 4.6vw;
	margin-bottom: 2em;
}
	
.legalNotes{
	font-size: 4.6vw;
	margin-top: 3em;
	margin-bottom: 2em;
	color: #fff;
	line-height: 1.6;
	font-weight: bold;
}
	
.mypageNotes{
	font-size: 4.6vw;
	margin-bottom: 2em;
	color: #fff;
	line-height: 1.6;
	font-weight: bold;
}
	
.couponText{
	font-size: 3.6vw;
}

.couponPrice{
	font-size: 4.4vw;
}

.couponPrice span{
	font-size: 8vw;
}

.link p.timeStamp{
	font-size: 4.4vw;
}
	
.bodyText{
	font-size: 3.6vw;
}
	
.errorImg{
	padding: 20px;
	margin: 4em auto 0 auto;
}


.btn{
	box-sizing: border-box;
	padding: 0 20px;
	margin-top: 3em;
}
	
.btn.mt1{
	margin-top: 1.5em;
}
	
.cameraUi{
	margin-top: 1em;
	margin-bottom: 1.5em;
}

	
.ybtn{
	font-size: 5.4vw;
	width: 100%;
}
	
	
.loginBtn{
	font-size: 5.4vw;
	width: 100%;
}


.shutterBtn{
	font-size: 5vw;
	width: 80%;
}

.resetBtn{
	font-size: 5vw;
	width: 80%;
}

	
.link{
	margin-top: 3em;
}

.link.mt20{
	margin-top: 5em;
}

	
.link a,
.link input[type="submit"],
.link input[type="button"]{
	font-size: 4.4vw;
}
	
input[type="text"].textbox{
	font-size: 5vw;
}

	
	
#footer{
	padding: 20px;
}

#footer dl{
	padding: 0 0;
	display: block;
}

#footer dl dt{
	margin-bottom: 0.5em;
	font-size: 4vw;
	width: 100%;
}

#footer dl dd{
	font-size: 3.2vw;
	width: 100%;
}
	
	
#couponArea{
	padding: 30px;
}
	
.couponImg{
	margin-bottom: 1em;
}

#couponAlert{
	padding: 40px;
}

#couponAlert h3{
	font-size: 5vw;
	margin-bottom: 0.5em;
}

#couponAlert p{
	font-size: 4vw;
	margin-bottom: 2em;
}

#couponAlert .linkBtns{
	display:block;
}

#couponAlert .linkBtns li{
	width: 100%;
	box-sizing: border-box;
	
}


#couponAlert .linkBtns a{
}

.btnYes{
	margin-bottom: 1em;
	font-size: 4vw;
}

.btnNo{
	font-size: 4vw;
	cursor: pointer;
}
	
}