@charset "utf-8";
/* CSS Document */

/* 
===================== 1.Universal reset ==========================
*/
img{width: 100%;border: none;}
span{display: inline-block;}
.clear{clear: both;}

@media screen and (max-width:768px){/*SPonly*/
.pc { display: none !important; }
.sp { display: block !important; }
}
@media screen and (min-width:767px){/*PC only*/
.pc { display: block !important; }
.sp { display: none !important; }
}

/* 
===================== 2.Body and base setting ====================
*/
body{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	margin: 0;
	padding: 0;	
	color: #663333;
	text-align:center;
	background: rgb(255 229 139);
	/*background: linear-gradient(225deg, rgba(255,240,177,1) 0%, rgba(254,226,145,1) 23%, rgba(244,180,208,1) 64%, rgba(133,208,244,1) 100%);*/
}
#wrap {
	width:100%;
	margin: 0 auto;
	padding: 0;
	background: url("img/bg.png")repeat;
	overflow:hidden;
	}
#copyright{
	width: 100%;
	margin: 0 auto;
	padding:10px 0;
	}

a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
	}

/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.inline{
    display: none;
}
/* 
===================== Contents ====================
*/

/*---------Top----------*/
#top{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background-image:url("img/t-l.png"),url("img/t-r.png"),url("img/bg2.png");
	background-size:38%,40%,40px;
	background-repeat:no-repeat,no-repeat,repeat;
	background-position:top left,top right,center;
	background-color:#b9d060;
	/*background: url("img/bg-kirakira.png"),url("img/top-bg.jpg");
	background-repeat:no-repeat;
	background-size:100%,cover;
	background-position:top center;*/
	}
	@media screen and (max-width:767px){
		#top{
			background-size:52%,58%,30px;
			/*background-size:200%,cover;*/
		}
	}
.top{
	padding: 2rem 0;
	background: url("img/bg-kirakira.png"),url("img/t-b.png");
	background-repeat:no-repeat,repeat-x;
	background-size:100%,700px;
	background-position:top center,bottom;
	}
	@media screen and (max-width:768px){
		.top{
			padding: 1rem 0 0;
			background-size:200%,300px;
		}
	}
h1{
	margin:0 auto 1rem;
	line-height:0;
}
picture img{
	width: 95%;
	max-width: 950px;
	margin-bottom:1rem;
}
.image-map img{
	width: 95%;
	max-width: 850px;
}

/*---------Day----------*/
#day{
	width:100%;
	position: relative;
	background: #0168b7;
	margin:　0 auto;
    padding: 10px 0;
	bottom: 5%;
	}
.period{
	width:100%;
	margin: 0 auto;
	padding: 10px 0;
	font-weight: bold;
    font-size: 1.2rem;
	color:#fff;
	transform: rotate(0.05deg);
	}
@media screen and (min-width:767px){
    .period{font-size: 1.8rem;}
}

/*---------Contents--------*/
#contents{
	transform: rotate(0.05deg);
	margin:0 auto;
	padding:0 0 4%;
    line-height: 1.5;
	}

.detail{
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
	}

.contents-box{
	width:100%;
	margin: 8% auto 4%;
	-moz-border-radius: 20px;    /* 古いFirefox */
	-webkit-border-radius: 20px; /* 古いSafari,Chrome */
	border-radius: 20px;         /* CSS3 */
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 2px 2px 4px gray;
	}
h2{
	position: relative;
    background: #e85298;
	font-weight: bold;
    font-size: 2em;
	color:#fff;
	margin: 0 auto;
    border-radius: 20px 20px 0 0;
	padding: 1.5rem 0;
	}
.contents-area {
	width: 92%;
	margin: 0 auto;
	padding:1rem 0 2.5rem ;
	}	
	.contents-area ul {
		padding: 0 1em 0 1.2em;
		text-align: left;
		}
	.contents-area ul li {
		list-style-type: disc;
		list-style-position: inside;
		border-bottom: dashed 1px silver;
		padding: 0.5em 0 ;
		margin-left: 1.4em;
		text-indent: -1.4em;
		}
h3 {
	width: 100%;
	padding:2% 0;
	font-size:1.3em;
	color:#E85298;
	background-color: #E8529830;
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px;
	border-radius: 20px;
	}

.text-area{margin: 1rem auto;}
.text-b {font-size:1.5rem;}
	@media screen and (max-width:767px){
		.text-b {font-size:1.1rem;}
	}
.text-s {font-size:83%;}
.text-right{text-align: right;}
.text-left{text-align: left;}


.pink{color:#e62e8b;}

.attention-box {
	background: #FFFCD7;
	border-radius: 15px;
	padding: 1rem;
	}
	.attention-box a:link{
		color:#e62e8b !important;
		/*text-decoration: underline !important;*/
	}
	.attention-box a:visited{
		color:#e62e8b !important;
		/*text-decoration: underline !important;*/
	}

.deadline{font-size:1.8em;}
.sponsorship{margin: 7% auto 0;}

@media screen and (max-width:767px){
	#contents{
		padding:0 0 10%;
		transform: rotate(0.05deg);
		}
	.contents_box{
        width:100%;
        margin: 30px auto;
        text-align:center;
        -moz-border-radius: 20px;    /* 古いFirefox */
        -webkit-border-radius: 20px; /* 古いSafari,Chrome */
        border-radius: 20px;         /* CSS3 */
        background-color: rgba(255, 255, 255, 1);
        }
	h2{
        font-size: 1.4em;
		padding: 3% 0;
        }
    .contents-area {
        width: 93%;
        padding:0 .5rem 1rem;
        font-size:0.9em;
        }
    h3 {
        width: 100%;
		padding: 3% 0;
        font-size:1.1em;
		border-radius: 10px;  
        }
	.contents-area ul {
  		padding: 0 0 0 1em;
		font-size:90%;
	}
	.deadline { font-size:1.5em;}
	.sponsorship { font-size:0.75em;}
}

/*---------Oubo--------*/


/*---------Prize--------*/
hr{
	height:0;
	margin:3rem auto;
	padding-top: 70px;
	border:none;
	background:url(img/flag.png)repeat-x;
	background-position:center;
	background-size:500px;
    }
    @media screen and (max-width: 640px) {
	hr{
        padding-top: 12%;
		background-size:80%;
        }
    }

.menubox{
	width: 95%;
	max-width:1400px;
	margin: 5rem auto 0;
	}
	@media screen and (max-width: 480px) {
	.menubox{
		margin: 2rem auto;
		}	
	}
    *, *:before, *:after {
    box-sizing: border-box;
    }
.menu{   
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
	.menu > div{
		width: calc(95%/5);
		}
		@media screen and (max-width:768px) {	
			.menu > div{
				width: calc(98%/2);
			}
		}
	.menu img{
		width: 100%;
		}

.title{
	width: 100%;
	max-width: 620px;
	margin: 2rem auto 0;
	background:none;
	}

.col_box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: auto;
	}
	*, *:before, *:after {
		box-sizing: border-box;
	}
	.col_5 > div{
		width: calc(90%/5);
		padding: 0;
		margin:0 0 2rem;
		}
		@media screen and (max-width: 786px) {	
			.col_5 > div{
				width: calc(95%/2);
			}
		}
	.col_box p{
		margin: 0 auto;
	}


.p_plus {
  position:relative;
  display:inline-block;
}
.rp_plus48 {
  position:absolute;
  padding: 0px 7px; /* ルーペアイコンを画像の角から離す量の設定 */  
  right:0px;
  top:0px;
}

/*---------Btn--------*/
.btn-pdf {
	display: inline-block;
	width:75%;
	margin: 3% auto;
	padding: 1.5em 0;
	font-size: 1.5em;
	text-decoration: none;
	color: #663300;
    background: #ffe100;
	border: solid 2px #663300;
	border-radius: 15px;
	transition: .2s;
	}
	.btn-pdf:hover {
	opacity:0.5;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80)”;
	}
    .btn-pdf:after{
        font-family: "Font Awesome 5 Free";
        content: '\f1c1';
        padding:0; 
		font-size: 1.3em;
        /*vertical-align: middle;*/
        }
.btn-toysrus {
	width:75%;
	display: inline-block;
	margin: 3% auto 0;
	padding: 1.5em 0;
	font-size: 1.1em;
	text-decoration: none;
	color: #69318E;
    background: #FFF;
	border: solid 2px #69318E;
	border-radius: 15px;
	transition: .2s;
	}
	.btn-toysrus:hover {
	opacity:0.5;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80)”;
	}
    .btn-toysrus:after{
        font-family: "Font Awesome 5 Free";
        content: '\f2d2';
        padding:0 1%; 
        /*vertical-align: middle;*/
        }

@media screen and (max-width:767px){
	.btn-pdf { 
		width:95%;
		padding: 1.2em 0;
    	font-size: 1.1em;
	}
	.btn-toysrus { 
		width:90%;
		padding: 1em 0;
		font-size: 1em;
	}
}


/*============= その他のキャンペーンバナー =============*/
.cpn_bnr{
	width: 900px;
	background:#c8f0fa;
	text-align:center;
	padding: 5px 0 25px;
	margin:10px auto;
	-moz-border-radius: 10px;    
	-webkit-border-radius: 10px; 
	border-radius: 10px;
	}
	.cpn_bnr img{
		padding: 0 ;
		margin:10px auto 0;
	}
    @media screen and (max-width:768px){       
        .cpn_bnr{width: 95%;padding: 5px 0 25px;margin:10px auto;}
        .cpn_bnr img{ width:95%;}
}
    
/*--- SF-bnr ---*/
#box_bnr{
	width:100%;
	margin: 50px auto 40px;
	padding:0;
	text-align:center;
	}
#box_bnr img{
	width:100%;
	max-width:520px;
	}
    @media screen and (max-width:768px){   
        #box_bnr{width:90%;margin: 5% auto;padding:0;text-align:center;}
    }
    
/*---------SNS--------*/	
#sns_box{
	width:100%;
	margin: 0 auto;
	padding:20px 0 ;
	text-align:center;
	background-color: #FFF;   /* 背景色 */
	}
#btn_box img{
	float:none;
	margin: 10px;
	padding:2px;
	width:50px;
	}
#btn_box{
	width:100%;
	text-align:center;
	margin:0 auto 30px;
	padding: 0;
	}
#btn_box a{
    text-decoration: none;
	}
    @media screen and (max-width:768px){      
    #sns_box{
        width:100%;
        margin:  0 auto;
        padding:20px 0 ;
        text-align:center;
        background-color: #FFF;   /* 背景色 */

        }
    #btn_box{
        width:100%;
        text-align:center;
        margin:0 auto 5%;
        padding: 0 ;
        }
    #btn_box img{
        width:13%;
        float:none;
        margin: 0 auto;
        padding:2%;
        }
    }
    
/*============= Page-top =============*/
#page_top{
    width: 60px;
    height: 60px;
    position: fixed;
    right: 15px;
    bottom: 15px;
    background: #0168b7;
    opacity: 1;
	/*border:3px solid #de5337;*/
    border-radius: 50%;
	box-shadow:3px 3px 2px #78341e30;
    z-index: 10;
    }
    #page_top a{
        position: relative;
        display: block;
        width: 60px;
        height: 60px;
        }
    #page_top a::before{
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        content: '\f106';
        font-size: 25px;
        color: #FFF;
        position: absolute;
        /*width: 37%;*/
        height: 50%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        }
    @media screen and (max-width:768px){   
        #page_top a::before{/*width: 25%;*/}
    }

/*==============================================
           PC
==============================================*/
@media screen and (min-width: 980px) {

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

 *, *:before, *:after {
box-sizing: border-box;
	}	
}