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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}


@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

#fixedTop {
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #000;
    font-size: 20px;
    text-align: center;
    display: none;
    background: #CCC;
    position: fixed;
    z-index: 9999;
    border-radius: 5px;
    -webkit-transform: translateZ(0);
}
#fixedTop:hover {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0.7;
}

a {
	color: #fff;
}
a:link {
	text-decoration: none;
	color:#fff;
}
a:visited {
	text-decoration: none;
	color: #fff;
}
a:hover {
	text-decoration: underline;
	color:#fff;
}
a:active {
	text-decoration: underline;
	color:#fff;
}

ul li{
	list-style:none;
	padding-bottom:0.5em;
}

body{
	width:100%;
	height:100%;
	min-height:100%;
	margin:0px;
	padding:0px;
	text-align:left;
	color:#fff;
	font-size:12px;
	line-height:1.6;
	font-family: 'Noto Sans Japanese', sans-serif;
	background:#000;
	-webkit-font-smoothing:subpixel-antialiased;
	-webkit-text-size-adjust: 100%;
}
.ie8 body{min-width:1000px;}


/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){

header{
	background:url(../images/bg_photo.png) center center no-repeat;
	background-size:cover;
	width:100%;
	max-width:1130px;
	margin:0 auto;
	position:relative;
}


header h1 {
	width:437px;
	margin:0 auto;
	padding:200px 100px 100px;
}



header .logo{
	width:160px;
	position:absolute;
	top:15%;
	left:30%;
}



#wrapper{
	width:960px;
	margin:0 auto;
	padding:30px 0;
}

div .day{
	padding:10px 0;
}

h2 {
	font-size:1.8em;
	font-weight:600;
	line-height:1.4em;
	letter-spacing:0.1em;
	padding-bottom:1em;
}

div .present{
	position:relative;
}

div .present img{
	width:100%;
	height:auto;
	max-width:100%;
}
.main-copy{
	position: absolute;
	left: 285px;
	top: 320px;
	font-size:1.4em;
	font-weight:400;
	line-height:1.6em;
}

div .mobile{
	display:none;
}

h4 {
	font-size:2em;
	font-weight:600;
	line-height:1.4em;
	letter-spacing:0.1em;
	padding:4em 0 2em;
	text-align:center;
}

.contents{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	margin:1em 0;
}

.section{
	width: calc(50% - 10px);
	margin: 5px;
	text-align:center;
	padding-top:2em;
}

.name{
	font-size:1.4em;
	font-weight:600;
	line-height:1.6em;
	padding:1em 0 0;
}

.number{
	line-height:2em;
}

div .buybtn{
	padding:10px 0;
}

h5 {
	font-size:1.1em;
	font-weight:500;
	line-height:1.4em;
	padding:4em 0 0.5em;
}



#footer {
	width: 100%;
	height: 65px;
	padding-top:30px;
	text-align: center;
	font-size:1em;
}

}


/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){

header{
	background:url(../images/bg_photo.png) center center no-repeat;
	background-size:cover;
	width:100%;
	max-width:1130px;
	margin:0 auto;
	position:relative;
}


header h1 {
	width:70%;
	margin:0 auto;
	padding:150px 0 100px;
}



header .logo{
	width:30%;
	position:absolute;
	top:15%;
	left:15%;
}

header .logo img{
	width:70%;
	height:auto;
	}



#wrapper{
	width:90%;
	margin:0 auto;
	padding:30px 0;
}

div .day{
	padding:10px 0;
}

h2 {
	font-size:1.4em;
	font-weight:600;
	line-height:1.4em;
	padding-bottom:1em;
}

h2 br{
	display:none;
}

div .present{
	display:none;
}

div .mobile{
	width:100%;
	text-align:center;
	position:relative;
}

div .mobile p{
	padding:1em 0;
}

div .mob-copy{
	position:absolute;
	width:45%;
	left:30%;
	top:80%;
	font-size:1.2em;
	font-weight:400;
	line-height:1.7em;
	text-align:left;
	margin-bottom:2em;
}

.contents{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	margin:1em 0;
}

.section{
	width: calc(50% - 10px);
	margin: 5px;
	text-align:center;
	padding-top:2em;
}

.name{
	font-size:1.4em;
	font-weight:600;
	line-height:1.6em;
	padding:1em 0 0;
}

.number{
	line-height:2em;
}

div .buybtn{
	padding:10px 0;
}

h5 {
	font-size:1.1em;
	font-weight:500;
	line-height:1.4em;
	padding:4em 0 0.5em;
}



#footer {
	width: 100%;
	height: 65px;
	padding-top:30px;
	text-align: center;
	font-size:1em;
}




}

/*===============================================
●smart.css  画面の横幅が480pxまで
===============================================*/
@media screen and (max-width: 480px){

header{
	background:url(../images/bg-mobile.png) center center no-repeat;
	background-size:cover;
	width:100%;
	max-width:480px;
	margin:0 auto;
	position:relative;
}

header .logo{
	width:40%;
	position:absolute;
	top:30px;
	left:50px;
}

header .logo img{
	width:70%;
	height:auto;
}


header h1 {
	width:75%;
	margin:0 auto;
	padding:100px 0 100px;
}

header h1 img{
	width:100%;
	height:auto;
}



#wrapper{
	width:95%;
	margin:0 auto;
	padding:20px 0;
}

div .day{
	padding:10px 0;
}

div .day img{
	width:95%;
	height:inherit;
	}

h2 {
	font-size:1.4em;
	font-weight:600;
	line-height:1.4em;
	padding-bottom:1em;
}

h2 br{
	display:none;
}

div .present{
	display:none;
}

div .mobile{
	width:100%;
	text-align:center;
	position:relative;
}

div .mobile p{
	padding:1em 0;
}

div .mob-copy{
	position:absolute;
	width:75%;
	left:20%;
	top:82%;
	font-size:1.2em;
	font-weight:400;
	line-height:1.4em;
	text-align:left;
	margin-bottom:2em;
}



h4 {
	font-size:2em;
	font-weight:600;
	line-height:1.4em;
	letter-spacing:0.1em;
	text-align:center;
	margin:1em 0 0.5em;
}

.contents{
	flex-direction: column;
}

.section{
	width: calc(100% - 10px);
	margin: 10px;
	text-align:center;
	padding:0 0 1em;
	display: 1;
}

p .photo img{
	width:90%;
	height:auto;
}

.name{
	font-size:1.6em;
	font-weight:600;
}

.number{
	line-height:2em;
	font-size:1.2em;
}

div .buybtn{
	padding:10px 0;
	
}

h5 {
	font-size:1.1em;
	font-weight:500;
	line-height:1.4em;
	padding:4em 0 0.5em;
}



#footer {
	width: 100%;
	height: 65px;
	padding-top:30px;
	text-align: center;
	font-size:0.8em;
}

}