@charset "utf-8";


/* --------------------------
	01 base
-------------------------- */

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	line-height: 1.8;
	font-family: "AxisStd-Light", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0;
	padding: 0;
}

#container {
	position: relative;
	width: 100%;
    min-width: 1140px;
	height: auto;
	overflow: hidden;
	/* background-color: #f1f1f7; */
	background-color: #e4e7f0;
}

.inner {
	position: relative;
	width: 1040px;
	margin: 0 auto 0;
}



/* --------------------------
	01 header
-------------------------- */

#header {
	/* padding: 0 0 30px; */
	background: #191919;
}

/*** title ***/
#header .title {
	position: relative;
	z-index: 1;
}
#header .title .balloon {
	position: absolute;
	right: 218px;
	top: 184px;
}
#header .title .balloon img {
	
}
#header .title .image {
	position: absolute;
}
#header .title .image.image-01 {
	left: 245px;
	top: 38px;
}
#header .title .image.image-02 {
	left: 112px;
	top: 90px;
}
#header .title .image.image-03 {
	right: 274px;
	top: 16px;
}
#header .title .image.image-04 {
	right: 120px;
	top: 94px;
}

/*** sub ***/
#header .sub {
	background: #fff;
}



/* --------------------------
	01 content
-------------------------- */

#content {
	width: 100%;
	height: auto;
}

.block {
	
}


/*** read ***/
#read {
	padding: 0 0 60px;
	background: #191919;
}
#read .frame {
	position: relative;
	z-index: 1;
}
#read .frame .period {
	height: 100px;
	margin: -140px 0 0;
}
#read .frame .period img {
	
}
#read .frame .close {
	position: absolute;
	left: 15%;
	bottom: 0;
	width: 70%;
	height: 17%;
	padding: 0.6em 0 0;
	color: #000;
	font-size: 130%;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
	border-radius: 10px;
	box-sizing: border-box;
	background: rgba(220,220,220,0.95);
}
#read .frame .close a {
	color: #333;
	text-decoration: underline;
}
#read .frame .close a:hover {
	text-decoration: none;
}


/*** about ***/
#about {
	padding: 0 0 60px;
	background: #191919;
}

#about .frame {
	/* border: 4px solid #e52f81; */
	box-shadow: 0px 0px 12px 4px #fff;
	border-radius: 6px;
}
#about .frame .frame-head {
	font-size: 0;
}
#about .frame .frame-cont {
	position: relative;
	background: #fff;
}
#about .frame .frame-cont .text {
	font-size: 140%;
	font-weight: bold;
	text-align: center;
	padding: 1.5em 0 0;
}
#about .frame .frame-cont .image {
	font-size: 0;
}


/*** theme ***/
#theme {
	padding: 0 0 60px;
	background: #191919;
}

#theme .frame {
	/* border: 4px solid #7ecef4; */
	box-shadow: 0px 0px 12px 4px #fff;
	border-radius: 6px;
}

#theme .frame .frame-head {
	font-size: 0;
}

#theme .frame .frame-cont {
	position: relative;
	background: #fff;
}
#theme .frame .frame-cont .text {
	font-size: 140%;
	font-weight: bold;
	text-align: center;
	padding: 1.5em 0 0.5em;
}
#theme .frame .frame-cont .image {
	font-size: 0;
}


/*** prize ***/
#prize {
	margin: 0 0 80px;
	padding: 0 0 60px;
	background: #191919;
}

#prize .frame {
	/* border: 4px solid #e52f81; */
	box-shadow: 0px 0px 12px 4px #fff;
	border-radius: 6px;
}

#prize .frame .frame-head {
	font-size: 0;
}

#prize .frame .frame-cont {
	position: relative;
	background: #fff;
	text-align: center;
	padding: 40px 0 20px;
}

#prize .frame .frame-cont .box {
	display: inline-block;
	margin: 0 15px 30px;
	padding: 20px 0 0;
	vertical-align: top;
	border: 1px dotted #000;
}

#prize .frame .frame-cont .box .box-head {
	
}
#prize .frame .frame-cont .box .box-head .label {
	font-size: 0;
}
#prize .frame .frame-cont .box .box-body {
	
}
#prize .frame .frame-cont .box .box-body .image {
	font-size: 0;
}
#prize .frame .frame-cont .box .box-foot {
	
}
#prize .frame .frame-cont .box .box-foot .text {
	font-size: 86%;
	font-weight: bold;
	text-align: left;
	padding: 0 16px 20px;
}
#prize .frame .frame-cont .box .box-foot .text span {
	display: inline-block;
	margin: 0.3em 0 1.0em;
}
#prize .frame .frame-cont .box .box-foot .text a {
	color: #000;
}


/*** howto ***/
#howto {
	margin: 0 0 80px;
}

/** title **/
#howto .title {
    font-size: 30px;
	font-weight: bold;
    text-align: center;
    margin: 0 0 40px;
	position: relative;
}
#howto .title:before,
#howto .title:after {
    position: absolute;
    top: 20px;
	width: 377px;
    height: 1px;
    content: '';
    background: url('../img/howto_border.png') center center no-repeat;
}
#howto .title:before {
    left: 0px;
}
#howto .title:after {
    right: 0px;
}

/** toggle **/
#howto .toggle {
	background: #fff;
	border-radius: 10px;
}

#howto .toggle .toggle-head {
	width: 100%;
	font-size: 0;
	overflow: hidden;
	background-color: #000;
	border-radius: 10px;
	padding: 14px 0;
}
#howto .toggle .toggle-head h4 {
	float: left;
	padding: 0 20px;
	/*margin-top: 5px;*/
}
#howto .toggle .toggle-head .btn {
	float: right;
	margin-right: 18px;
	cursor: pointer;
}

#howto .toggle .toggle-cont {
	display: none;
	text-align: center;
	padding: 40px 0 40px;
}

/* toggle-01 */
#howto .toggle.toggle-01 {
	
}
#howto .toggle.toggle-01 .toggle-cont {
	
}
#howto .toggle.toggle-01 .toggle-cont .text-area {
	position: relative;
	width: 752px;
	height: 251px;
	margin: 0 auto 26px;
	background: url('../img/howto_step01_textarea_bg.png') center center no-repeat;
	background-size: 100% 100%;
}
#howto .toggle.toggle-01 .toggle-cont .text-area textarea {
	position: absolute;
	bottom: 50px;
	left: 50%;
	margin-left: -252.5px;
	width: 470px;
	padding: 1.0em 1.0em 0.0em;
	resize: none;
	font-size: 18px;
	line-height: 1.0;
	border: none;
	font-family: "AxisStd-Light", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#howto .toggle.toggle-01 .toggle-cont .image-area {
	width: 868px;
	margin: 0 auto;
}
#howto .toggle.toggle-01 .toggle-cont .image-area .label {
	border-bottom: 1px dotted #000000;
	padding-bottom: 18px;
}
#howto .toggle.toggle-01 .toggle-cont .image-area .image {
	margin: -26px 0 40px;
}

/* toggle-02 */
#howto .toggle.toggle-02 {
	margin-bottom: 60px;
}
#howto .toggle.toggle-02 .toggle-cont {
	
}
#howto .toggle.toggle-02 .toggle-cont .text {
	font-size: 21px;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 40px;
}

/* toggle-03 */
#howto .toggle.toggle-03 {
	
}
#howto .toggle.toggle-03 .toggle-cont {
	
}
#howto .toggle.toggle-03 .toggle-cont .text {
	font-size: 21px;
	font-weight: bold;
	line-height: 1.2em;
}
#howto .toggle.toggle-03 .toggle-cont .store-list {
	text-align: center;
	font-size: 0;
}
#howto .toggle.toggle-03 .toggle-cont .store-list .store-list-item {
	display: inline-block;
	margin: 24px 13px;
}
#howto .toggle.toggle-03 .toggle-cont .attention {
	width: 786px;
	margin: 0 auto;
	font-size: 12px;
	text-align: left;
}

/** arrow **/
#howto .arrow {
	margin: 30px 0 30px;
	text-align: center;
}



/*** check ***/
#check {
	margin: 0 0 80px;
}
#check .title {
	margin-bottom: 20px;
}
#check .lists {
	overflow: hidden;
	padding-left: 38px;
}
#check .list-01 {
	margin-bottom: 60px;
	font-size: 16px;
	line-height: 1.25em;
}
#check .list-02 {
	float: left;
	font-size: 14px;
	line-height: 1.25em;
	margin-right: 120px;
}
#check .list-03 {
	float: left;
	font-size: 14px;
	line-height: 1.25em;
}
#check .lists .list-item {
	position: relative;
	margin-bottom: 0.8em;
}
#check .lists .list-item:before {
	position: absolute;
	top: 0;
	left: -25px;
	content: '';
	background: url('../img/check_mark.png') center center no-repeat;
	background-size: 100% 100%;
	width: 21px;
	height: 18px;
}


/*** terms ***/
#terms {
	margin: 0 0 60px;
}
#terms .title {
	font-size: 22px;
	padding: 0 0 0.8em;
	margin: 0 0 1.6em;
	border-bottom: 1px solid #000000;
}
#terms ul {
	font-size: 11px;
	text-indent: -1.0em;
  	padding-left: 1.0em;
	margin: 0 0 2.0em;
}
#terms ul li {
	
}
#terms ul p {
	margin: 0 0 0.5em;
}

#terms .banner {
	text-align: center;
	padding: 40px 0 0;
}



/* --------------------------
	01 footer
-------------------------- */

#footer {
	width: 100%;
	height: 193px;
	margin: 0;
	padding: 35px 0 50px;
	background: #FFF;
}
#footer .body {
	width: 100%;
	height: 100%;
	margin: 0 auto 0;
}
#footer .body .logo {
	display: block;
	width: 147px;
	margin: 0 auto 20px;
}
#footer .body .logo img {
	width: 100%;
}
#footer .body .copy {
    font-size: 6.75pt;
	text-align: center;
	margin: 0 0 70px;
}
#footer .body ul.links {
	text-align: center;
}
#footer .body ul.links li {
	display: inline-block;
    font-size: 12px;
	margin: 0 0 20px;
}
#footer .body ul.links li span {
	padding: 0 0.5em;
}
#footer .body ul.links li a {

}
#footer .body ul.links li a:link,
#footer .body ul.links li a:visited {
	color:#000;
	text-decoration:none;
}
#footer .body ul.links li a:hover,
#footer .body ul.links li a:active {
	color:#000;
	text-decoration:underline;
}
#footer .body ul.sns {
	list-style: none;
	text-align: center;
	margin: 0 0 80px;
}
#footer .body ul.sns li {
	display: inline-block;
	margin: 0 5px;
}
#footer .body ul.sns li.tw { width:120px; }
#footer .body ul.sns li.fb { width:100px; }
#footer .body ul.sns li.ln { width:100px; }







/* --------------------------
	99 fixed-top
-------------------------- */

#fixed-top {
	position: fixed;
	right: 0px;
	bottom: 180px;
}
#fixed-top .body {
	position: absolute;
	right: -52px;
	top: 0px;
	width: 50px;
	height: 50px;
	border: 1px solid #ccc;
}