@charset "utf-8";

/*--------------------------------------------
layout
--------------------------------------------*/
#wrap{
	/*width: 100%; max-width: 640px;*/ min-height: 70vw;
	margin: 0 auto; padding-bottom: 8px;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-size:14px; line-height: 1.4; color:#000;
}
#wrap *{
	box-sizing: border-box;
}
.wrap{
	max-width: 640px;
}
.iwcp{
	display: none;
}
.iwcp h1{
	margin: 0;
}
/*.iwcp h1 img{
	width: 100%; height: auto;
}*/
.iwcp h1.win img,
.iwcp h1.lose img{
	width: 100%; height: auto;
}
.iwcp img{
	vertical-align: bottom;
}

.index_block_03,
.index_block_04{
	display: none;
}

body.teaser  .index_block_03,
body.teaser  .index_block_04,
body.ontime  .index_block_03,
body.ontime  .index_block_04,
body.end     .index_block_03,
body.end     .index_block_04,
body.iw_win  .index_block_03,
body.iw_win  .index_block_04,
body.iw_lose .index_block_03,
body.iw_lose .index_block_04{
	display: block;
}

/* .iwcp display setting...
--------------------------------------------*/
body.teaser     	#top,
body.ontime     	#top,
body.end			#top,
body.iw_lottery		#iw_lottery,
body.iw_win			#iw_result,
body.iw_lose 		#iw_result,
body.cp_teaser		#cp_top,
body.cp_ontime		#cp_top,
body.cp_end			#cp_top,
body.cp_coupon 		#cp_coupon,
body.cp_coupon_bt 	#cp_coupon,
body.cp_used 		#cp_complete,
body.cp_complete 	#cp_complete,
body.error 			#error{
	display: block;
}

/* .buttonArea display setting...
--------------------------------------------*/
.buttonArea{
	width: 86%;
	margin: 0 auto; padding: 3.125vw 0;
	display: none;
}
body.teaser          #top .buttonArea.teaser,
body.ontime          #top .buttonArea.ontime,
body.end             #top .buttonArea.end,
body.iw_win.link-on  #iw_result .buttonArea,
body.iw_lose.link-on #iw_result .buttonArea,
body.cp_teaser       #cp_top .buttonArea.teaser,
body.cp_ontime       #cp_top .buttonArea.ontime,
body.cp_end          #cp_top .buttonArea.end,
body.cp_coupon_bt    #cp_coupon .buttonArea{
	display: block;
}

/* .buttonArea
--------------------------------------------*/

.buttonArea button {
	width: 100%;
	padding: 3.2vw 0;
	position: relative;
	display: inline-block;
	background-color: #f44336;
	font-size: 6.4vw; line-height: 1.2; font-weight: bold; color: #FFF;
	outline: 0;
	border: none;
	border-radius: 24vw;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	cursor: pointer;
}
.buttonArea button:hover{
	opacity: 0.8;
}
.buttonArea button:active {
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.buttonArea.teaser p{
	width:100%;
	padding: 1.25vw 0;
	background-color: #FFF;
	border-radius: 3.75vw;
	border: #FF4549 2px solid;
	font-size: 4vw; font-weight: bold; color: #FF4549; text-align: center;
}
.buttonArea.teaser p span{
	font-size: 6vw;
}
.buttonArea.end p{
	width: 100%;
	padding: 1.25vw 0;
	background-color: #CCC;
	border-radius: 50px;
	font-size: 5.625vw; line-height: 2; font-weight: bold; color: #454545; text-align: center;
}

/* top
--------------------------------------------*/
.linkArea{
	width: 86%;
	margin: 0 auto; padding: 3.125vw 0 5vw 0;
}
.linkArea li{
	list-style: none;
}
.linkArea li a{
	padding-left: 5vw;
	position: relative;
	font-size: 4.8vw;
}
.linkArea li a::before{
    width: 12px; height: 12px;
	margin-top: -6px;
	position: absolute; left: 0; top: 50%;
	content: "";
	display: block;
    border-radius: 50%;
    background: #F00;
}
.linkArea li a::after{
	width: 3px; height: 3px;
	margin-top: -3px;
	position: absolute; left: 5px; top: 50%;
	content: "";
	display: block;
    box-sizing: border-box;
    border: 3px solid transparent;
    border-left: 3px solid #fff;
}
.noticeArea{
	padding-bottom: 3.125vw;
}
.noticeArea{
	display: block;
}
.noticeArea h2{
	padding: 2vw 0;
	background-color: #232323;
	font-size: 5vw; text-align: center; color: #FFF;
}
.noticeArea h3{
	padding: 2vw 0;
	background-color: #EEE;
	font-size: 4vw; text-align: center; color: #000;
}
.noticeArea .note{
	width: 86%;
	margin: 0 auto; padding: 4vw 0;
	font-size: 3.75vw;
}

/* iw_lottery
--------------------------------------------*/
.iwcp #video{
	width: 100%; height: auto;
}

/* iw_result
--------------------------------------------*/
body.iw_win #iw_result .lose,
body.iw_lose #iw_result .win{
	display: none;
}

/* cp_top
--------------------------------------------*/
.iwcp h1.title {
	padding: 4.8vw 0 3.2vw 0;
	font-size: 6.5625vw; font-weight: bold; text-align: center;
}
.iwcp .cautionArea{
	width: 86%;
	margin: 0 auto 1.875vw auto; padding:5%;
	box-sizing: border-box;
	border:2px solid #ed1c24;
	background: #FFF;
	text-align: center;
}
.iwcp .cautionArea .excla{
	width: 14vw; height: 14vw;
	margin: 0 auto 2% auto;
	font-size: 8vw; line-height: 14vw; font-weight: bold; color:#ed1c24; text-align:center;
	display: inline-block;
	border-radius: 50%;
	border: solid 3px #ed1c24;
}
.iwcp .cautionArea .noteTitleBox{
	padding: 2% 0 0 0;
}
.iwcp .cautionArea .noteDetailBox{
	margin-top: 3%; padding-top: 2%;
	border-top: 1px solid #ed1c24;
}
.iwcp .cautionArea .noteTitleBox .note{
	margin: 0 0 0.4em 0; padding-left: 1em;
	position: relative;
	font-size: 5vw; line-height: 1.5; text-align: left; font-weight: bold; color:#ed1c24;
}
.iwcp .cautionArea .noteDetailBox .note{
	margin: 0.6em 0 0 0; padding-left: 1em;
	position: relative;
	font-size: 3.4375vw; line-height: 1.5; text-align: left;
}
.iwcp .cautionArea .noteTitleBox .note:before,
.iwcp .cautionArea .noteDetailBox .note:before{
	position: absolute; left: 0; top: 0;
	content: "※";
	display: block;
}

/* cp_complete
--------------------------------------------*/
.iwcp .confirmArea{
	width: 86%;
	margin: 0 auto; padding:5%;
	box-sizing: border-box;
	border: 1px solid #000;
	background: #FFF;
	text-align: center;
	display: none;
}
.iwcp .confirmArea h2{
	margin: 0 0 6% 0; padding: 2% 0 4% 0;
	font-size: 4.5vw; font-weight: bold;
	border-bottom: 1px solid #808080;
}
.iwcp .confirmArea .note{
 	font-size: 3.4375vw;  line-height: 1.5; text-align: left;
}
body.cp_used 		#cp_complete .confirmArea.used,
body.cp_complete 	#cp_complete .confirmArea.complete{
	display: block;
}

/* cp_coupon
--------------------------------------------*/
.iwcp h1.coupon-title {
	width: 90%;
	margin: 0 auto; padding: 4.8vw 0 1.6vw 0;
	font-size: 6vw; font-weight: bold; text-align: center;
}
.iwcp h2.coupon-title {
	width: 90%;
	margin: 0 auto; padding: 0 0 3.2vw 0;
	font-size: 4.2vw; font-weight: bold; text-align: center;
}
.iwcp .couponArea{
	width: 86%;
	margin: 0 auto 3.75vw auto; padding: 5%;
	background-color: #FFF;
	border: #CCC 1px solid;
	border-radius: 3.75vw;
}
.iwcp .couponArea .head{
	width: 98%; height: 6vw;
	margin: 0 auto;
	position: relative;
	font-size: 3.75vw; color: #f44336;
}
.iwcp .couponArea .head .date{
	position: absolute; left: 0; top: 0;
	margin: 0; padding: 0;
}
.iwcp .couponArea .head .timer{
	position: absolute; right: 0; top: 0;
	margin: 0; padding: 0 0 0 6.4vw;
	background-image: url(../image/ico_timer.gif);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: auto 70%;
	display: none;
}
.iwcp .couponArea .head .timer.on{
	display: block;
}
.iwcp .couponArea .block{
	border: #000 1px solid;
	border-radius: 4vw;
}
.iwcp .couponArea .caption{
	padding: 1.25vw;
	background-color: #000;
	font-size: 4.8vw; color: #FFF; text-align: center;
	border-radius: 3.75vw 3.75vw 0 0;
}
.iwcp .couponArea .box{
	padding: 8%;
}
.iwcp .couponArea .profile img{
	width: 100%; height: auto;
}
.iwcp .couponArea .note{
	margin: 0.8em 0 0 0; padding-left: 1em;
	position: relative;
	font-size: 3.4375vw; line-height: 1.5; text-align: left;
}
.iwcp .couponArea .note:before{
	position: absolute; left: 0; top: 0;
	content: "※";
	display: block;
}
#iwcp-qr{
	margin-top: 5vw;
	text-align: center;
	display: none;
}
#iwcp-number {
	font-size: 5.625vw; line-height: 1.1; text-align: center; vertical-align: baseline; color: #000;
	display: none;
}
#iwcp-number span{
	font-size: 15.625vw;
}

/* error
--------------------------------------------*/
.iwcp.error .cautionArea h2{
	margin: 0; padding: 2% 0 4% 0;
	font-size: 4vw; font-weight: bold; color:#ed1c24;
	border-bottom: none;
}

@media screen and (min-width:641px){
	#wrap{
		min-height: 720px;
		padding-bottom: 40px;
	}

	/* .buttonArea
	--------------------------------------------*/
	.buttonArea{
		padding: 20px 0;
	}
	.buttonArea button {
		font-size: 36px;
		border-radius: 36px;
	}
	.buttonArea button {
		padding: 14px 0;
		font-size: 36px;
		border-radius: 36px;
	}
	.iwcp .now-win .buttonArea button {
		font-size: 36px;
	}
	.buttonArea.teaser p{
		padding: 12px;
		font-size: 24px;
		border-radius: 36px;
	}
	.buttonArea.teaser p span{
		font-size: 36px;
	}
	.buttonArea.end p{
		font-size: 32px;
		border-radius: 50px;
	}
	/* top
	--------------------------------------------*/
	.linkArea{
		padding: 0 0 36px 0;
	}
	.linkArea li a{
		padding-left: 20px;
		font-size: 20px;
	}
	.noticeArea{
		padding-bottom: 20px;
	}
	.noticeArea h2{
		padding: 12px 0;
		font-size: 28px;
	}
	.noticeArea h3{
		padding: 8px 0;
		font-size: 20px;
	}
	.noticeArea .note{
		padding: 20px 0;
		font-size: 16px;
	}

	/* cp_top
	--------------------------------------------*/
	.iwcp h1.title {
		padding: 24px 0 16px 0;
		font-size: 36px;
	}
	.iwcp .cautionArea{
		margin: 0 auto 12px auto;
	}
	.iwcp .cautionArea .excla{
		width: 80px; height: 80px;
		font-size: 50px; line-height: 80px;
	}
	.iwcp .cautionArea .noteTitleBox .note{
		font-size: 30px;
	}
	.iwcp .cautionArea .noteDetailBox .note{
		font-size: 20px;
	}

	/* cp_end
	--------------------------------------------*/
	.iwcp .confirmArea h2{
		font-size: 30px;
	}
	.iwcp .confirmArea .note{
		font-size: 20px;
	}
	.iwcp .commentArea{
		font-size: 24px;
	}

	/* cp_coupon
	--------------------------------------------*/
	.iwcp h1.coupon-title {
		padding: 24px 0 8px 0;
		font-size: 36px;
	}
	.iwcp h2.coupon-title {
		padding: 0 0 24px 0;
		font-size: 20px;
	}
	.iwcp .couponArea{
		margin: 0 auto 24px auto;
		border-radius: 24px;
	}
	.iwcp .couponArea .head{
		height: 36px;
		font-size: 24px;
	}
	.iwcp .couponArea .head .timer{
		padding-left: 40px;
		background-position: left center;
		background-size: auto;
	}
	.iwcp .couponArea .block{
		border-radius: 22px;
	}
	.iwcp .couponArea .caption{
		padding: 8px;
		font-size: 28px;
		border-radius: 20px 20px 0 0;
	}
	.iwcp .couponArea .box{
		padding: 8%;
	}
	.iwcp .couponArea .note{
		font-size: 20px;
	}
	#iwcp-qr{
		margin-top: 24px;
	}
	#iwcp-number {
		 font-size: 36px;
	}
	#iwcp-number span{
		 font-size: 100px;
	}

	/* error
	--------------------------------------------*/
	#error .iwcp .cautionArea h2{
		font-size: 24px;
	}
}
/*--------------------------------------------
#receipt
--------------------------------------------*/
#receipt-overlay{
	width: 100%; height: 100%;
	position: fixed; top: 0; left: 0; z-index: 10000;
	background-color: #000;
	opacity: 0.75;
	display: none;
}
#receipt-modal,
#receipt-error{
	width: 100%; height: 100%;
	position: fixed; top: 0; left: 0; z-index: 10001;
	display: none;
}
#receipt-modal form,
#receipt-error form{
	width: 100%; height: 100%;
	margin: 0; padding: 8vw;
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
}
.receipt-title{
	width: 100%;
	font-size: 4.2vw; font-weight: bold; text-align: center;
	position: absolute; left: 0; top: 4vw;
}

/* #receipt-modal
---------------------------------------*/
#receipt-modal .receipt-wrap{
	width: 100%; height: 100%;
	position: relative;
	background-color: #FFF;
	border-radius: 2.4vw;
}
#receipt-modal .receipt-area{
	width: 100%; height: 100%;
	padding: 12vw 4.2vw 38vw 4.2vw;
	box-sizing: border-box;
	position: relative;
}
#receipt-modal #preview{
	width: 100%; height: 100%;
	padding:  2.4vw;
	box-sizing: border-box;
	border: #A0A0A0 1px solid;
}
#receipt-modal #preview .pic {
	width: 100%; height: 100%;
	margin: auto;
	background-color: #EEE;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
#receipt-modal #preview div{
	width: 0; height: 0;
	position: absolute; left: 0; top: 0;
	overflow: hidden;
}
#receipt-modal .receipt-button{
	width: 100%;
	position: absolute; left: 0; bottom: 3.2vw;
}
#receipt-modal .receipt-button div:nth-child(1){
	width: 86%;
	margin: 4.8vw auto 0 auto;
}
#receipt-modal .receipt-button div:nth-child(2){
	width: 60%;
	margin: 4.8vw auto 0 auto;
}
#receipt-modal .receipt-button div:nth-child(3){
	display: none;
}
#receipt-modal .iwcp-button-receipt{
	width: 100%;
	padding: 3.2vw 0;
	position: relative;
	display: inline-block;
	background-color: #f44336;
	font-size: 4.8vw; line-height: 1.2; font-weight: bold; color: #FFF;
	outline: 0;
	border: none;
	border-radius: 24vw;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
#receipt-modal .receipt-reset{
	width: 100%;
	padding: 2.4vw 0;
	position: relative;
	display: inline-block;
	background-color: #999;
	font-size: 4.2vw; line-height: 1.2; font-weight: bold; color: #FFF;
	outline: 0;
	border: none;
	border-radius: 24vw;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

/* #receipt-error
---------------------------------------*/
#receipt-error .receipt-wrap{
	width: 100%;
	margin: auto;
	position: relative;
	background-color: #FFF;
	border-radius: 2.4vw;
}
#receipt-error .receipt-title{
	padding-bottom: 1.25vw;
	color: #E00;
	border-bottom: #CCC 1px solid;
}
#receipt-error .message-area{
	width: 100%;
	box-sizing: border-box;
	padding: 15vw 4.2vw 10vw 4.2vw;
	font-size: 3.2vw;;
}

/* .receipt-cancel
---------------------------------------*/
.receipt-cancel{
	width: 10vw; height: 10vw;
	position: absolute; right: 0; top: 0;
}
.receipt-cancel p{
	width: 6vw; height: 6vw;
	margin: 2vw; padding: 0;
	position: relative;
	background-color: #999;
	border-radius: 6vw;
}
.receipt-cancel p:before{
	width: 3vw; height: 2px;
	display: block;
	content: "";
	position: absolute; top: 50%; left: 25%;
	margin-top: -1px;
	background: #fff;
	transform: rotate(45deg);
}
.receipt-cancel p:after{
	width: 3vw; height: 2px;
	display: block;
	content: "";
	position: absolute; top: 50%; left: 25%;
	margin-top: -1px;
	background: #fff;
	transform: rotate(-45deg);
}

@media screen and (min-width:641px){
	#receipt-modal form,
	#receipt-error form{
		width: 640px; height: 100%; max-height: 800px;
		margin: auto; padding: 20px;
	}
	.receipt-title{
		width: 100%;
		font-size: 24px;
		top: 24px;
	}

	/* #receipt-modal
	---------------------------------------*/
	#receipt-modal .receipt-wrap{
		border-radius: 16px;
	}
	#receipt-modal .receipt-area{
		padding: 64px 24px 212px 24px;
	}
	#receipt-modal #preview{
		padding: 12px;
	}
	#receipt-modal .receipt-button{
		bottom: 24px;
	}
	#receipt-modal .receipt-button div:nth-child(1){
		width: 86%;
		margin: 24px auto 0 auto;
	}
	#receipt-modal .receipt-button div:nth-child(2){
		width: 60%;
		margin: 24px auto 0 auto;
	}
	#receipt-modal .iwcp-button-receipt{
		padding: 20px 0;
		font-size: 30px;
		border-radius: 38px;
		cursor: pointer;
	}
	#receipt-modal .receipt-reset{
		width: 100%;
		padding: 16px 0;
		font-size: 24px;
		border-radius: 30px;
		cursor: pointer;
	}

	/* #receipt-error
	---------------------------------------*/
	#receipt-error .receipt-wrap{
		border-radius:16px;
	}
	#receipt-error .receipt-title{
		padding-bottom: 8px;
	}
	#receipt-error .message-area{
		padding: 96px 24px 64px 24px;
		font-size: 18px;
	}

	/* .receipt-cancel
	---------------------------------------*/
	.receipt-cancel{
		width: 64px; height: 64px;
		cursor: pointer;
	}
	.receipt-cancel p{
		width: 40px; height: 40px;
		margin: 12px;
		border-radius: 40px;
	}
	.receipt-cancel p:before{
		width: 20px;
	}
	.receipt-cancel p:after{
		width: 20px;
	}
}


/*--------------------------------------------
#debuger
--------------------------------------------*/
#debuger{
	width: 100%; max-width: 640px;
	margin: 72px auto 0 auto;
	font-size:16px; line-height: 1.5; color: #333;
	background-color: #FFF;
	border: #eaeaea 1px solid;
}
#debuger h6{
	margin: 0; padding: 10px 10px 5px 10px;
	font-size: 14px;
}
#debuger div{
	border-top: #eaeaea 1px solid;
}
#debuger p{
	margin: 0; padding: 12px 10px;
}
#debuger a{
	color: #333;
	text-decoration: none !important;
}