@charset "UTF-8";
/*
 * style.css
 */

#wrapper {
	background-color: #fac62a;
	overflow: hidden;
}

iframe {
	border: none;
}

.pc {
	display: block;
}
.sp {
	display: none;
}

@media(max-width: 640px){
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.sp img , img.sp {
		display: inline;
	}
}

/* TEASER SITE
-------------------------------------------------------*/
#mainBoxTeaser {
	background: url(../img/bg_main_teaser01.png) 50% 0 no-repeat;
	height: 1016px;
}
@media(max-width: 640px){
	#mainBoxTeaser {
		position: relative;
		background: url(../img/bg_main_teaser_sp01.png) 50% 0 no-repeat;
		background-size: 112%;
		width: 100%;
		height: 100%;
		padding: 159.4% 0 0;
	}
}

/* CAMPAIGN START
-------------------------------------------------------*/
#happyGame {
	font-size: 16px;
	line-height: 1.5;
	color: #000;
	background: url(../img/bg_mainimg01.png) center top no-repeat;
}
#happyGame a:hover {
	opacity: 0.7;	
}
/*ページTOP*/
.kurohigeTop {
    position: fixed;
    right: 10px;
	bottom: 150px;
}
.kurohigeTop a {
    width: 125px;
    height: 94px;
    display: block;
}
@media(max-width: 640px){
	#happyGame {
		font-size: 12px;
		background: url(../img/bg_mainimg01_sp.png) center top no-repeat;
		background-size: 500px 570px;
	}
	.kurohigeTop {
		display: none;
	}
	.kurohigeTop a {
		display: none;
	}
}

/* ナビゲーション
-------------------------------------------------------*/
#nav_pc01 {
	width: 100%;
	background: url(../img/bg_nav01.png) center bottom repeat-x;
	position: relative;
	overflow: hidden;
	height: 100px;
}
#nav_pc01 ul {
	padding-top: 17px;
	float: left;
	left: 50%;
	position: relative;
}
#nav_pc01 ul li {
	float: left;
	left: -50%;
	position: relative;
	margin-right: 55px;
}
#nav_pc01 ul li:last-child {
	margin-right: 0;
}
#nav_sp01 {
	display: none;
}

@media(max-width: 640px){
	#nav_pc01 {
		display: none;
	}
	#nav_sp01 {
		display: block;
		position: relative;
	}
	#navBar {
		background: url(../img/bg_nav01_sp.png) center bottom repeat-x;
		background-size: 48px 500px;
		height: 64px;
	}
	.spLogo {
		position: absolute;
		top: 15px;
		left: 10px;
	}
	#spMenuBtn {
		z-index: 90000;
		position: absolute;
		top: 15px;
		right: 8px;
		width: 83px;
		height: 25px;
		background: url(../img/btn_menu_open.png) center bottom repeat-x;
		background-size: 83px 25px;
		display: block;
	}
	#spMenuBtn.close {
		background: url(../img/btn_menu_close.png) center bottom repeat-x;
		background-size: 83px 25px;
	}
	#listArea {
		display: none;
		z-index: 99999;
		position: absolute;
		top: 54px;
		left: 0;
		background: url(../img/bg_dotline.png), url(../img/bg_nav01_sp.png);
		background-position: left top, center bottom;
		background-repeat: repeat-x, repeat-x;
		background-size: 9px 2px, 48px 500px;
		width: 100%;
		padding: 8px 0 21px;
	}
	#listArea a {
		display: block;
	}
}
/* メインイメージ
-------------------------------------------------------*/
#mainimg01 {
	margin-top: 8px;
}
ul.bxslider li {
	width: 970px;
	height: 488px;
	position: relative;
}
ul.bxslider li img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}
.li_youtube {
	position: relative;
}
.li_youtube iframe {
	position: absolute;
	top:212px;
	left:50%;
	margin-left: -211px;
}
@media(max-width: 640px){
	#mainimg01 {
		margin-top: 9px;
	}
	ul.bxslider {
		position: relative;
		width: 455px;
	}
	ul.bxslider li {
		height: 297px;
		position: absolute;
		top: 0;
		left:50%;
		margin-left: -227px;
	}
	ul.bxslider li img {
		position: static;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		max-width: initial;
		max-height: initial;
		width: 455px;
		margin: auto;
		display: block;
	}
	.li_youtube {
		position: relative;
	}
	.li_youtube iframe {
		position: absolute;
		top:106px;
		left:91px;
		margin-left: 0;
	}
	.bx-wrapper .bx-next ,
	.bx-wrapper .bx-prev {
		background-size: 27px 27px;
	}
	.bx-wrapper .bx-controls-direction a {
		width: 27px;
		height: 27px;
		top: 56%;
	}
}

/* スマイルフォトコンテスト実施中
-------------------------------------------------------*/
#sectionSmile .tit {
	text-align: center;
	margin-bottom: 40px;
}
#sectionSmile .subTit {
	text-align: center;
	margin-bottom: 33px;
}
@media(max-width: 640px){
	#sectionSmile .tit {
		margin-top: -19px;
		margin-bottom: 30px;
	}
	#sectionSmile .tit img {
		width: 200px;
		height: auto;
	}
	#sectionSmile .subTit {
		margin-bottom: 23px;
	}
	#sectionSmile .subTit img {
		width: 300px;
		height: auto;
	}
}

/* ステップ
-------------------------------------------------------*/
.stepArea {
	width: 912px;
	overflow: hidden;
	margin: auto;
}
.stepBox {
	position: relative;
	float: left;
	background: #fff;
	padding: 25px 0 14px;
	margin-right: 24px;
	width: 288px;
	height: 382px;
	margin-bottom: 48px;
}
.stepBox:last-child {
	margin-right: 0;
}
.stepTit {
	text-align: center;
	margin-bottom: 15px;
}
.stepTxt01 {
	text-align: center;
	margin-bottom: 15px;
}
.stepImg01 {
	text-align: center;
}
.stepArrow {
	position: absolute;
	left: -35px;
	top: 134px;
}
.stepTxt02 {
	font-weight: bold;
	text-align: center;
}
.stepTxt02 span {
	background: #e5e5e5;
	padding: 8px 10px;
}
.stepImg02 {
	text-align: center;
	margin: 10px 0;
}
.stepImg03 {
	text-align: center;
	margin-top: 41px;
}
.stepTxt03 {
	text-align: center;
	background: url(../img/bg_step03.png) center top no-repeat;
	padding-top: 80px;
	line-height: 26px;
}
.stepTxt03 .stepTxt04 {
	font-weight: bold;
	display: block;
}
.stepTxt03 .stepTxt04 span {
	font-size: 20px;
	display: block;
}
.stepBtn {
	margin-top: 21px;
}

@media(max-width: 640px){
	.stepArea {
		width: 275px;
		margin-bottom: 32px;
	}
	.stepBox {
		position: relative;
		float: none;
		padding: 20px 0 14px;
		margin-right: 0;
		width: 275px;
		height: auto;
		margin-bottom: 10px;
	}
	.stepTit img {
		width: 80px;
		height: auto;
	}
	.stepTxt01 {
	}
	.stepImg01 img {
		width: 215px;
		height: auto;
	}
	.stepArrow {
		position: absolute;
		left: 50%;
		top: -25px;
		margin-left: -15px;
	}
	.stepArrow img {
		width: 30px;
		height: auto;
		transform: rotate(-30deg);
	}
	.stepTxt02 {
		font-weight: bold;
		text-align: center;
	}
	.stepTxt02 span {
	}
	.stepImg02 {
	}
	.stepImg03 {
		margin-top: 30px;
	}
	.stepImg03 img {
		width: 110px;
		height: auto;
	}
	.stepTxt03 {
		margin-top: -12px;
		text-align: center;
		background: url(../img/bg_step03sp.png) center top no-repeat;
		background-size: 242px 194px;
		padding-top: 68px;
		line-height: 18.5px;
	}
	.stepTxt03 .stepTxt04 {
	}
	.stepTxt03 .stepTxt04 span {
		font-size: 14.5px;
	}
	.stepBtn {
		margin-top: 26px;
	}
}

/* 投稿例
-------------------------------------------------------*/
#sectionEx {
}
.exTit {
	text-align: center;
	margin-bottom: 31px;
}
.exArea {
	width: 890px;
	margin: 0 auto 40px;
	overflow: hidden;
}
.exBox {
	width: 430px;
	float: left;
	margin-right: 30px;
}
.exBox:last-child {
	margin-right: 0;
}
.exImg {
	margin-bottom: 15px;
}
.exImg img {
	box-shadow: 10px 10px #fff;
}
.exBtn {
	text-align: center;
}
.exTxt {
	text-align: center;
	margin-top: 31px;
}

@media(max-width: 640px){
	#sectionEx {
	}
	.exTit {
		text-align: center;
		margin-bottom: 22px;
	}
	.exArea {
		width: 275px;
		margin: 0 auto ;
		overflow: visible;
	}
	.exBox {
		width: 275px;
		float: none;
		margin-right: 0;
		margin-bottom: 27px;
	}
	.exBox:last-child {
	}
	.exImg {
		margin-bottom: 15px;
	}
	.exImg img {
		width: 275px;
		height: auto;
		box-shadow: 6px 6px #fff;
	}
	.exBtn {
		text-align: center;
	}
	.exBtn img {
		width: 162px;
		height: auto;
	}
	.exTxt {
		margin-top: 3px;
		height: 117px;
		position: relative;
	}
	.exTxt span {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -205px;
	}
}
/* Youtuber's Movies
-------------------------------------------------------*/
#sectionMovie {
	margin: -30px 0 95px;
	padding-top: 166px;
	background-image: url(../img/bg_wavetop01.png),url(../img/bg_wavebottom.png),url(../img/bg_dot.png);
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: center top, center bottom, center top;
}
#sectionMovie.ver02 {
	margin: 0 0 45px;
	padding-top: 47px;
	background-image: none;
}
.movieTit {
	text-align: center;
}
.movieTxt {
	text-align: center;
	padding-bottom: 95px;
}
.movieArea {
	width: 880px;
	margin: auto;
	overflow: hidden;
	padding-bottom: 75px;
}
.movieArea li {
	float: left;
	margin-right: 40px;
	margin-bottom: 32px;
	width: 420px;
	overflow: hidden;
}
.movieArea li:nth-child(even) {
	margin-right: 0;
}
.movieArea li iframe {
	margin-bottom: 7px;
}
.youtuberName {
	display: table;
}
.youtuberName dt {
	display: table-cell;
	width: 52px;
}
.youtuberName dt p {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 20px;
}
.youtuberName dd {
	display: table-cell;
	font-size: 24px;
	font-weight: bold;
	width: 368px;
	vertical-align: middle;
}

@media(max-width: 640px){
	#sectionMovie {
		margin: 0 0 35px;
		padding-top: 90px;
		background-image: url(../img/bg_wavetop01_sp.png),url(../img/bg_wavebottom_sp.png),url(../img/bg_dot.png);
		background-repeat: no-repeat, no-repeat, repeat;
		background-position: center top, center bottom, center top;
		background-size: 1000px 68px, 1000px 10px, 40px 40px;
	}
	#sectionMovie.ver02 {
		margin: 0 0 35px;
		padding-top: 20px;
		background-image: none;
	}
	.movieTit {
		text-align: center;
		margin-bottom: 10px;
	}
	.movieTit img {
		width: 360px;
		height: auto;
	}
	.movieTxt {
		text-align: center;
		padding-bottom: 35px;
	}
	.movieTxt img {
		width: 335px;
		height: auto;
	}
	.movieArea {
		width: 275px;
		margin: 0 auto;
		overflow: visible;
		padding-bottom: 50px;
	}
	.movieArea li {
		width: 275px;
		overflow: hidden;
		float: none;
		margin-right: 0;
		margin-bottom: 15px;
	}
	.movieArea li:nth-child(even) {
		margin-right: 0;
	}
	.movieArea li iframe {
		width: 275px;
		height: auto;
	}
	.youtuberName {
	}
	.youtuberName dt {
		width: 48px;
	}
	.youtuberName dt p {
		width: 38px;
		height: 38px;
		overflow: hidden;
		border-radius: 19px;
	}
	.youtuberName dd {
		font-size: 16px;
	}
}
/* 応募詳細
-------------------------------------------------------*/
#sectionApplication {
	padding-bottom: 74px;
}
.appTit {
	text-align: center;
	margin-bottom: 40px;
}
.appArea {
	background: #fff;
	width: 960px;
	margin: auto;
	padding: 64px 40px 1px;
	border-radius: 4px;
}
.appBox {
	margin-bottom: 64px;
}
.appSubTit {
	text-align: center;
	margin-bottom: 24px;
}
.appSubTit.ver02 {
	margin-bottom: 15px;
}
.appTxt {
	text-align: center;
}
.appSutTxt {
	text-align: center;
	font-size: 22px;
	margin: 20px 0;
}
.presentUl {
	width: 670px;
	overflow: hidden;
	margin: auto;
}
.presentUl li {
	width: 320px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #00a0e9;
	background: url(../img/bg_present01.png) no-repeat;
	float: left;
	margin-right: 30px;
	text-shadow: 
	3px 3px 1px #fff, -3px 3px 1px #fff, 3px -3px 1px #fff, -3px -3px 1px #fff,
	2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff,
	1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
	padding: 96px 0 6px;
}
.presentUl li:last-child {
	margin-right: 0;
	background: url(../img/bg_present02.png) no-repeat;
}
.appExArea {
	width: 880px;
	margin: 0 auto 64px;
	overflow: hidden;
}
.appExBox {
	width: 420px;
	float: left;
	margin-right: 40px;
}
.appExBox:last-child {
	margin-right: 0;
}
.appExImg {
	margin-bottom: 15px;
}
.scrollTxt {
    padding: 15px 20px 10px 20px;
    height: 200px;
    overflow: auto;
    border: #ccc solid 1px;
}
.scrollTxt .scrollTit {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
}

.scrollTxt dl {
	font-size: 14px;
}
.scrollTxt dl dt {
	margin-top: 10px;
}
.scrollTxt dl dd {
}

@media(max-width: 640px){
	#sectionApplication {
		padding-bottom: 50px;
	}
	.appTit {
		text-align: center;
		margin-bottom: 20px;
	}
	.appTit img {
		width: 170px;
		height: auto;
	}
	.appArea {
		background: #fff;
		width: auto;
		max-width: 345px;
		margin: auto;
		padding: 40px 0 1px;
		border-radius: 4px;
	}
	.appBox {
		width: 275px;
		margin: 0 auto 38px;
	}
	.appSubTit {
		margin-bottom: 15px;
	}
	.appSubTit.ver01 img {
		width: 166px;
		height: auto;
	}
	.appSubTit.ver02 {
		margin-bottom: 9px;
	}
	.appSubTit.ver02 img {
		width: 116px;
		height: auto;
	}
	.appSubTit.ver03 img {
		width: 82px;
		height: auto;
	}
	.appSubTit.ver04 img {
		width: 50px;
		height: auto;
	}
	.appTxt {
	}
	.appTxt img {
		width: 275px;
		height: auto;
	}
	.appSutTxt {
		text-align: center;
		font-size: 12px;
		margin: 10px 0;
	}
	.presentUl {
		width: 275px;
		overflow: hidden;
		margin: auto;
	}
	.presentUl li {
		width: 130px;
		font-size: 15px;
		background: url(../img/bg_present01_sp.png) no-repeat;
		background-size: 130px 95px;
		margin-right: 15px;
		text-shadow: 
		2px 2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, -2px -2px 0px #fff,
		1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, -1px -1px 0px #fff;
		padding: 70px 0 3px;
	}
	.presentUl li:last-child {
		margin-right: 0;
		background: url(../img/bg_present02_sp.png) no-repeat;
		background-size: 130px 95px;
	}
	.appExArea {
		width: 275px;
		margin: 0 auto 38px;
		overflow: visible;
	}
	.appExBox {
		width: 275px;
		float: none;
		margin-right: 0;
		margin-bottom: 25px;
	}
	.appExBox:last-child {
		margin-right: 0;
	}
	.appExImg {
		margin-bottom: 15px;
	}
	.appExImg img {
		width: 275px;
		height: auto;
	}
	.scrollTxt {
	    padding: 8px 10px 10px 10px;
	    height: 200px;
	    overflow: auto;
	    border: #ccc solid 1px;
	}
}

/* Pick Up
-------------------------------------------------------*/
#sectionPickup {
	margin: -30px 0 0;
	padding: 166px 0 90px;
	background-image: url(../img/bg_wavetop01.png),url(../img/bg_wavebottom.png),url(../img/bg_shape.png);
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: center top, center bottom, center top;
	background-color: #fcd737;
}
#pickupTit {
	text-align: center;
	margin-bottom: 16px;
}

@media(max-width: 640px){
	#sectionPickup {
		margin: 0 0 0;
		padding: 90px 0 50px;
		background-image: url(../img/bg_wavetop01_sp.png),url(../img/bg_wavebottom_sp.png),url(../img/bg_shape_sp.png);
		background-repeat: no-repeat, no-repeat, repeat;
		background-position: center top, center bottom, center top;
		background-size: 1000px 68px, 1000px 10px, 403px 750px;
		background-color: #fcd737;
	}
	#pickupTit {
		margin-bottom: 10px;
	}
	#pickupTit img {
		width: 225px;
		height: auto;
	}
}

/* みんなの投稿
-------------------------------------------------------*/
#sectionPost {
	margin: 0 0 90px;
	padding: 100px 0 95px;
	background-image: url(../img/bg_wavetop02.png),url(../img/bg_wavebottom.png),url(../img/bg_dot.png);
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: center top, center bottom, center top;
}
.postTit {
	text-align: center;
	margin-bottom: 50px;
}
.sortArea {
	width: 913px;
	margin: 0 auto 34px;
	overflow: hidden;
}
.sortTxt {
	float: left;
}
.sortList {
	width: 724px;
	float: right;
}
.sortList li {
	float: left;
	margin: 0 0 16px 16px;
}
.sortBtn {
	text-align: center;
}
select.sortPost {
	display: none;
}
@media(max-width: 640px){
	#sectionPost {
		margin: 0 0 25px;
		padding: 57px 0 75px;
		background-image: url(../img/bg_wavetop02.png),url(../img/bg_wavebottom.png),url(../img/bg_dot.png);
		background-repeat: no-repeat, no-repeat, repeat;
		background-position: center top, center bottom, center top;
	}
	.postTit {
		margin-bottom: 30px;
	}
	.postTit img {
		width: 300px;
		height: auto;
	}
	.sortArea {
		width: 300px;
		margin: 0 auto;
		overflow: hidden;
		padding-bottom: 28px;
	}
	.sortTxt {
		float: left;
	}
	.sortTxt img {
		width: 113px;
		height: auto;
	}
	.sortList {
		display: none;
	}
	.sortBtn img {
		width: 135px;
		height: auto;
	}
	select.sortPost {
		margin-top: 0;
		display: block;
		float: right;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		border-radius: 0;
		border: 0;
		margin: 0;
		padding: 0;
		background: none transparent;
		vertical-align: middle;
		font-size: inherit;
		color: inherit;
		box-sizing: content-box;
		color: #f39800;
		font-size: 12px;
		font-weight: bold;
		padding: 10px 10px 11px 20px;
		width: 134px;
		background-image: url(../img/bg_arrow.png);
		background-size: 8px 5px;
		background-position: right 10px top 17px;
		background-repeat: no-repeat;
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 0 2px 0 #cccccc;
	}
}