@charset "utf-8";

body {
line-height: 1.8;
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','sans-serif';
color:#696969;
background-color:#FFEEED;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}


.fadein {
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein02 {
opacity : 0;
transform : translate(-150px, 0);
transition : all 1500ms;
}
.fadein02.scrollin {
opacity : 1;
transform : translate(0, 0);
}


.center{
text-align:center;
}

.pc{
	display:block;
}

.sp{
	display:none;
}


ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

img {
max-width:100%;
}

.cf:before,
.cf:after {
content: " "; 
display: table; 
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.fLft {
float:left;
}

.fRgt {
float:right;
}

.title{
float:left;
}

.blocklink {
display:block;
}

/* headder */

#basicheader {
background: #E3232D;
color: #FFF;
height: 35px;
font-size: 13px;
}

.contentsizer {
width:1300px;
margin:0px auto;
padding:6px 0;
}

.header-right{
float:right;
width:300px;
}

/* history */

.history{
width:770px;
padding:30px 15px;
margin:50px auto;
background-color: rgba(255,255,255,0.6);
box-shadow:0px 0px 8px 1px #bfbcbc;
}

.history img{
float:left;
margin-right:20px;
}

.history p{
font-size:14px;
color:#696969;
margin:0;
}



/* point */

.point{
width:800px;
margin:0 auto 100px;

}

.point img{
text-align:center;
}

.point_txt{
width:740px;
padding:40px 30px;
background-color: rgba(255,255,255,0.6);
box-shadow:0px 0px 8px 1px #bfbcbc;
margin-top:30px;
}

.point_txt img{
margin:0;
}

.point_txt p{
margin:10px 0 0 0;
font-size:14px;
}

.sakura{
position: relative;
}

.sakura .sakura_01{
position:absolute;
top: 50px; left: 3%;
}

.sakura .sakura_02{
position:absolute;
top: 0px; left: 13%;
}

.sakura .sakura_03{
position:absolute;
bottom: 0px; right: 3%;
}

.sakura .sakura_04{
position:absolute;
bottom: -50px; right: 13%;
}

/* preorder */

.preorder{
width:760px;
background-color:#E3232D;
margin:0 auto 50px;
padding:20px;
}

.preorder p{
color:#fff;
margin:0;
}

.preorder p.name{
font-weight:bold;
font-size:20px;
margin-bottom:20px;
}

.preorder ul{
padding:0;
margin:0 0 20px;
}

.preorder li{
color:#fff;
font-size:14px;
}

.preorder .kasumi{
float:left;
margin-right:30px;
}

.preorder .date{
font-weight:bold;
font-size:18px;
}

.preorder .btn img{
margin-bottom:10px;
box-shadow:3px 3px 5px 0px #8d1219;
}


a:hover img.overwhite{
cursor:pointer;
filter: alpha(opacity=80);        /* ie lt 8 */
-ms-filter: "alpha(opacity=80)";  /* ie 8 */
-moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.8;              /* Safari 1.x */
opacity:0.8;
zoom:1;
}




/* cocoen */

.cocoen{
box-sizing:border-box;
cursor:pointer;line-height:0;
margin:0;overflow:hidden;
padding:0;
position:relative;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

.cocoen *{
box-sizing:inherit
}

.cocoen ::after,.cocoen ::before{
box-sizing:inherit
}

.cocoen img,.cocoen picture>img{
max-width:none
}

.cocoen>img,.cocoen>picture>img{
display:block;
width:100%
}

.cocoen>div:first-child,picture .cocoen>div{
height:100%;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:50%
}

.cocoen-drag{
background:#fff;
bottom:0;
cursor:ew-resize;
left:50%;
margin-left:-1px;
position:absolute;
top:0;
widows: 2px;
}

.cocoen-drag::before{
	background-image:url(../images/btn_scroll.png);
content:'';height:64px;
left:50%;
margin-left:-30px;
margin-top:-18px;
position:absolute;
top:50%;
width:64px;
}

h1{
	margin:0;
}

h2{
	margin:0;
}

h3{
	margin:0;
}



/* footer */

footer{
background:#E3232D;
}

footer img{
float:left;
}

footer p{
float:right;
color:#fff;
margin:0;
}

footer .footer-inneer{
width:1300px;
margin:0 auto;
padding:20px 0; 
}



/* rought form styles for when JS is disabled */

#language-select form {
width: 160px;
padding: 0;
}

#language-select select,
#language-select input {
display: inline;
padding: 0;
margin: 0;
}


/* JS-created definition list */

#language-select .dropdown dd { position: absolute; }

dt {
line-height: 11px!important;
}

dd {
line-height: 16px!important;
}

#language-select .dropdown{
margin:0;
float:right;
}

#language-select .dropdown a {
text-decoration: none;
outline: 0;
font-size: 11px;
display: block;
width: 65px;
text-align:center;
overflow: hidden;
}

#language-select .dropdown dt a {
background: #fff; 
border: 1px solid #E3232D;
padding: 3px 10px 4px 10px;
color: #e53135;
}

#language-select .dropdown dt a.activemode {
background: #fff;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
-moz-box-shadow: 0 1px 7px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,.2);
box-shadow: 0 1px 7px rgba(0,0,0,.2);
color: #e53135;
}

#language-select .dropdown dd ul {
background: #fff;
border: 1px solid #E3232D;
color: #e53135;
display: none;
position: absolute;
z-index: 999;
top: 0;
left: -40px;
padding: 2px 0 5px 0;
list-style: none;
border-top: none;
margin: 0;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-moz-box-shadow: 0 2px 6px rgba(0,0,0,.5);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,.5);
box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

#language-select .dropdown dd ul li a {
padding: 2px 10px;
}

#language-select .dropdown dd ul li a span,
#language-select .dropdown dt a span {
width: 16px;
height: 11px;
margin: 2px 6px 0 0;
background-repeat: no-repeat;
cursor: pointer;
}

#language-select .dropdown dd ul li a em,
#language-select .dropdown dt a em {
font-style: normal;
width: 65px;
cursor: pointer;
}

#language-select .dropdown dd ul li a em {
color: #e53135;
}

.dropdown dd ul li a:hover {background-color:#f2969b;}
.dropdown dd ul li a:hover em { color: #E3232D; }

li.lang {
font-size: 0.6em;
width: 33%;
}





#social_buttons {
max-height: 20px;
float:right;
}

.fb-like {
display:inline-block!important;
float:right;
margin:0px 18px;
}


.fb_iframe_widget > span {
vertical-align: baseline !important;
}





/* main_area */

.main_area{
background:no-repeat bottom url(../images/img_bg.jpg);
height:700px;
}

.main_area_inner{
width:1300px;
margin:0 auto;
position:relative;
}


.main_area_inner .item-01{
position:absolute;
top: 30px; left: 0px;
}

.main_area_inner .item-02{
position:absolute;
top: 180px; left: 0px;
}

.main_area_inner .item-03{
position:absolute;
top: 30px; right: 0px;
}

ul.main-list{
margin:0;
}

ul.main-list li{
	display:none;
}

.main_area_sp{
display: none;

}


/*PAGETOP */

#pageTop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
line-height: .1;
cursor: pointer
}

#pageTop img {
opacity: .4;
filter: alpha(opacity=40)
}

#pageTop img:hover {
opacity: 1;
filter: alpha(opacity=100)
}

#pageTop {
display: none
}


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

.point .sakura_01{
display:none;
}

.point .sakura_02{
display:none;
}	

.point .sakura_03{
display:none;
}

.point .sakura_04{
display:none;
}	

.contentsizer {
width:94%;
margin:0 3%;
}

.main_area{
height:550px;
}

.main_area_inner{
width:1000px;

}
.main_area_inner .item-01{
width:364px;
}

.main_area_inner .item-02{
width:362px;
}

.main_area_inner .item-03{
width:600px;
}

/* footer */

footer .footer-inneer{
width:1000px;
}



}





/*SUMA*/

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

.main_area{
display: none;
}

.main_area_sp{
display: block;

}


.pc{
	display:none;
}

.sp{
	display:block;
}

#pageTop {
width: 50px
}

#basicheader {
height: auto
}

span.title {
display: none
}

.smbr {
display: block
}

/* history */

.history{
width:80%;
padding:20px 5%;
}

.history img{
float:none;
margin-right:0;
}

.history .mxf_logo{
width:94px;
margin:0 auto 10px;
}

.history p{
font-size:14px;
color:#696969;
margin:0;
}


/* point */

.point{
width:90%;
margin:0 auto 50px;
position: static;
}

.point img{
text-align:center;
}

.point_txt{
width:90%;
padding:40px 5%;
background-color: rgba(255,255,255,0.6);
box-shadow:0px 0px 8px 1px #bfbcbc;
margin-top:10px;
}

.point_txt img{
margin:0;
}

.point_txt p{
margin:10px 0 0 0;
}


/* preorder */

.preorder{
width:80%;
background-color:#E3232D;
margin:0 auto 50px;
padding:20px 5%;
}

.preorder p{
color:#fff;
margin:0;
}

.preorder p.name{
font-weight:bold;
font-size:20px;
margin-bottom:20px;
}

.preorder ul{
padding:0;
margin:0 0 20px;
}

.preorder li{
color:#fff;
font-size:14px;
}

.preorder .kasumi{
float:none;
width:332px;
margin:0 auto 20px;
}

.preorder .date{
font-weight:bold;
font-size:18px;
}

.preorder .btn img{
margin-bottom:10px;

}

.preorder .preorder_txt{
width:385px;
margin:0 auto;
}

/* footer */

footer .footer-inneer{
width:600px;
margin:0 auto;
}


}

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

.title{
float:none;
text-align:center;
margin-bottom:10px;
font-size:12px;
}

#social_buttons {
float:none;
margin-bottom:10px;
}

.fb-like {
display:inline-block!important;
float: none;
}

.header-right{
width:300px;
margin:0 auto;
float:none;
text-align:center;
}

}

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


/* footer */

footer{
height:auto;
background:#E3232D;
}

footer .mxf-logo{
width:163px;
float:none;
margin:0 auto;
}

footer .footer-txt{
width:305px;
float:none;

}

footer .footer-inneer{
width:90%;
margin:10px 5% 0; 
font-size:14px;
}


}


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

.preorder .preorder_txt{
width:90%;
margin:0 auto;
}

}

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

.preorder .kasumi{
float:none;
width:90%;
margin:0 auto 20px;
}



}