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

body{margin: 0; padding: 0;}

#primaryContainer{
    margin: 0;
    padding: 0;
    background: url("../images/prize/miku_shifuku2019_bg.jpg");
    background-size: auto;
    }
    

/*全体設定*/

section{padding-left: 0.5em; padding-right: 0.5em;}
p{font-size: 1em; line-height: 1.6em;}
img{max-width: 100%;}

:hover{
	transition: all  0.7s ease;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	}


/*メインビジュアル*/
.mainVisual{
	width: 100%;
	background-image: url("../images/prize/miku_shifuku2019_main.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	}

.mainVisual section{
	width: 98%;
	max-width: 1380px;
	margin: 0 auto;
	padding: 2em 2% 42.5% 0!important;}

.mainVisual h1{
	width: 55%;
	height: 0;
	margin: 0 0 0 45%;
	padding-top: 40%;
	background: url("../images/prize/miku_shifuku2019_h1.png") no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
	background-position: top center;
	}


/*コンテンツ*/
.mainContents{padding: 2em 0;}

.details{
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
	}

.details section{padding-bottom: 5%;}

.FlexBox{display: flex; flex-wrap: wrap;}
.block03 div{width: 32%; margin: auto;}
.block04 div,.block04 p{width: 24%; margin: auto 0.5% 1em;}

h3{
	padding: 0.65em 1em;
	font-size: 1.1em;
	color: #FFF;
	border-radius: 5px;
	}

h4{
	margin: 0;
	padding: 0.75em;
	font-size: 1.1em;
	color: #FFF;
	text-align: center;
	}

	.Normal h4{background: #73c7c7;}
	.Shop h4{background: #0068b7;}
	.TOC h4{background: #e60012;}

	.Normal h4 + p{margin-bottom: 1em; border: solid 3px #73c7c7; border-top: none!important;}
	.Shop h4 + p{margin-bottom: 1em; border: solid 3px #0068b7; border-top: none!important;}
	.TOC h4 + p{margin-bottom: 1em; border: solid 3px #e60012; border-top: none!important;}

.LinkButton a{
	padding: 0.5em;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	color: #FFF;
	border: solid 2px #FFF;
	border-radius: 20px;
	background: #e5004f;
	display: block;
	}

.LinkButton a:hover{
	border: solid 2px #e5004f;
	color: #e5004f;
	background: #FFF;
	}

/*footer*/
footer{
	color: #004986;
	padding: 3em 1em 2em;
	display: block;
	background: #FFF;
	}

	footer section{width: 100%; max-width: 1380px; margin: auto;}

	/*SNS*/
	.sns ul{margin:0 0 4em; padding:0; text-align:center;}
	
	.sns li{
		width:60px;
		height:60px;
		display:inline-block;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
		margin-left: 1em;
		margin-right: 1em;
		text-align: center;
		list-style-type:none;
		}
		
		.fb{border: solid 2px #3b579d;}
		.tw{border: solid 2px #55acee;}
		.ln{border: solid 2px #00cc00;}

	.sns li:hover{background-color:rgba(255,255,255,0.8);}

	.sns img{padding-top: 20.5%;}


	/*タイトーリンク*/
	ul.taitoLink{
		margin-top:1.5em;
		padding: 0;
		}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #004986;}
	ul.taitoLink a:hover{color: #4b8bc1;}

	.copy{
		margin-top: 2em;
		padding: 2em 0 0;
		border-top: solid 1px #4778b2;
		text-align: center
		}


@media only screen and (max-width: 800px) {
.mainVisual section{padding: 2em 2% 35.5% 0!important;}
.block03 div{width: 48%; margin: 0 1% 2em;}
}

@media only screen and (max-width: 480px) {

.mainVisual{
	background-position: top 0% left -60px;
	background-size: 150%;
	}

.mainVisual section{padding: 2em 2% 70.5% 0!important;}


	
.block03 div{width: 94%; margin: 0 auto 2em;}
.block04 div,.block04 p{width: 49%; margin: auto 0.5% 0.25em;}

ul.taitoLink{margin-bottom: 3em;}
ul.taitoLink li{
	display: block;
	margin-bottom: 0.6em;
	}

}