@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: #d1eaf8;
	/*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;
	}
#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: #F7C9DD;
	background: linear-gradient(0deg,rgba(247, 201, 221, 1) 10%, rgba(255, 246, 127, 1) 60%, rgba(255, 230, 122, 1) 100%);
	position: relative;
	}
	@media screen and (max-width:767px){
		#top{
			background-size:100%;
		}
	}
/*#top{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background:url("img/bg.jpg");
	background-size:cover;
	background-repeat:repeat;
	background-position:top center;
	}
	@media screen and (max-width:767px){
		#top{
			background-size:100%;
		}
	}*/
.top{
	padding: 2rem 0;
	background:url("img/bg-top.png");
	background-size:600px;
	background-repeat:repeat;
	background-position:center;
	position: relative;
	}
	@media screen and (max-width:767px){
		.top{
			background-size:430px;
		}
	}
	.top img{
		width: 95%;
		max-width: 1000px;
		margin: auto;
		}
		@media screen and (max-width:767px){
			.top img{
				width: 98%;
			}
		}
.top-deco{
	width: 100%;
	padding: 7rem 0;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjgwIDE4MCIgd2lkdGg9IjEwMCUiPiA8cGF0aCBkPSJNIC02NDAgMTMwIFEgLTMyMCAxMzAgMCAxODAgUSAzMjAgMTMwIDY0MCAxMzAgUSA5NjAgMTMwIDEyODAgMTgwIFEgMTYwMCAxMzAgMTkyMCAxMzAgTCAxMjgwIDAgTCAwIDAgWiIgZmlsbD0iIzU3YzNlOCI+PC9wYXRoPjwvc3ZnPg==");;
    background-size: 1500px;
    background-position: top center;
    background-repeat: repeat-x;
	/*padding: 5rem 0;
	background-color: #57c3e8;*/
	position: absolute;
	}
	@media screen and (max-width:767px){
		.top-deco{
			padding: 4rem 0;
			background-size: 230%;
		}
	}
hr{
	border: 0;
	width: 100%;
	margin: 5rem auto 0;
	padding: 5rem 0;
	background-image:url("img/flag.png");
	background-size:1500px;
	background-repeat:repeat-x;
	background-position:top center;
	position: absolute;
	}
	@media screen and (max-width:1023px){
		hr{
			margin: 2rem auto 0;
			padding: 8% 0;
			background-size:150%;
		}
	}
h1{
	width: 100% !important;
	max-width: 1000px;
	margin:0 auto;
	line-height:0;
	}
	@media screen and (max-width:767px){
		h1{
			width: 95%;
		}
	}
.image-map img{
	margin:1rem auto;
	}
	@media screen and (max-width:767px){
		.image-map img{
			width: 95%;
		}
	}

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

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

#detail{
    width: 90%;
    max-width: 1000px;
    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: 2.5% 0;
	}
.contents-area {
	width: 94%;
	margin: 0 auto;
	padding:10px 0px 30px 0px;
	box-sizing:border-box;
	transform: rotate(0.05deg);
	}	
	.contents-area p {
		padding: 0;
		margin-bottom: 15px;
		}
	.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%;
	margin:2rem auto 0;
	padding:2% 0;
	font-size:1.5em;
	color:#E85298;
	background-color: #E8529830;
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px;
	border-radius: 15px;
	}

.text-area{
	text-align:left;
	margin:.5rem auto;
    padding: .5rem;
	box-sizing:border-box;
}
.text-s {font-size:90%;}

.pink{color:#e62e8b;}
.attention-box {
	background: #FFFCD7;
	border-radius: 15px;
	margin: 3% auto 6%;
	padding: 3% 0;
	box-sizing:border-box;
}
.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{
		font-size: 1rem;
		padding:0 0 10%;
		}
	.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 0 5%;
        font-size:0.9em;
        }
    h3 {
        width: 100%;
		margin:1rem auto 0;
		padding: 3% 0;
        font-size:1em;
		border-radius: 10px;  
        }
	.contents-area ul {
  		padding: 0 0 0 1em;
		font-size:90%;
	}
	.attention-box { 
		width:100%;
		margin: 5% auto 8%;
		padding: 5% ;
		box-sizing:border-box;
	}
	.deadline { font-size:1.5em;}
	.sponsorship { font-size:0.75em;}
}

/*---------Oubo--------*/
.oubo-box {
	/*width: 100%;
    margin: 2% auto;
	padding: 0;
	border:4px solid #69318E;
	box-sizing:border-box;*/
	}
	.oubo-box .inner{
		padding: 0 1rem;
		box-sizing: border-box;
		}
		@media screen and (max-width:767px){
			.oubo-box .inner { 
				padding: 0;
			}
		}
.oubo-title {
    font-size: 1.1em;
    background: #69318E;
	margin: 0 auto 2%;
    padding: 10px 0;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
	text-align:center;
	}
	@media screen and (max-width:767px){
		.oubo-title { 
			margin: 0 auto 5%;
			padding: 2% 0;
		}
	}
    .oubo-title:after{
        font-family: "Font Awesome 5 Free";
        content: '\f044';
        padding:0 1%; 
        /*vertical-align: middle;*/
        }


/*---------Btn--------*/
.btn-pdf {
	display: block;
	width:100%;
	margin: 3% auto;
	padding: 1.5em 0;
	box-sizing: border-box;
	font-size: 1.5em;
	text-decoration: none;
	color: #663300;
    background: #ffe100;
	border: solid 2px #663300;
	border-radius: 15px;
	transition: .2s;
	text-align:center;
	}
	.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 {
	display: 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;
	text-align:center;
	}
	.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;*/
        }

.center{
	text-align:center;
}

@media screen and (max-width:767px){
	.btn-pdf { 
		width:100%;
		margin:1rem auto;
		padding: 1.2em 0;
    	font-size: 1.1em;
	}
	.btn-toysrus { 
		width:100%;
		padding: 1em 0;
		font-size: 1em;
	}
	.sp-left{
		text-align:left !important;
	}
}


/*============= その他のキャンペーンバナー =============*/
.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;
        }

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

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

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