@charset "utf-8";

/* ================== reset ================= */

*{ margin: 0; padding:0; }

h1,h2,h3,h4,h5,h6 { font-weight:normal; line-height:1; }

ul{ list-style:none; }

img { vertical-align:bottom; }

/* ================== body ==================== */
body{
	background-color:#fff;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体","Yu Gothic","Meiryo",sans-serif; 
	color:#555;
	font-size:15px;
	-webkit-text-size-adjust: 100%;　/*sp font*/
	overflow-x:hidden;
}

/* ================== common ================== */
h2 { margin-bottom:30px; font-size:26px; text-align:center; }
section { padding:30px 0; margin-bottom:190px; }
p.linkBtn { display:block; width:20%; border-radius:2px; text-align:center; background-color:#cc6600; color:#fff; }
p.linkBtn a { display:block; padding:7px 30px; color:#fff; }
p.linkBtn a:hover,
p.linkBtn a:active { background-color:#cc6600; }

/* ================== parts =================== */
.spBreak { display:inline-block; }

.txtLink { text-align:center; }

.clearBoth { clear:both; }

.pt10 { padding-top:10px; }
.pt20 { padding-top:20px; }
.pb10 { padding-bottom:10px; }
.pb20 { padding-bottom:20px; }

.mt10 { margin-top:10px; }
.mt20 { margin-top:20px; }
.mb10 { margin-bottom:10px; }
.mb20 { margin-bottom:20px !important; }

.imgL { display:block; width:250px; margin-left:50px; float:left; }
.imgR { display:block; overflow:hidden; }
.imgR img{ margin-right:50px; float:right; }

/* =================== link =================== */
a:link,
a:visited { color:#cc6600; text-decoration:none; }
a:hover{ color:#66ccff; transition: all 0.3s ease-in-out; }

/* =============== fead & load ================ */
#onload { display:none; }

#PageLoad { position : fixed; top : 0; left : 0; width: 100%; height : 100%;
    background-color : #fff;
    background-image : url( ../img/anime-loading.gif );
    background-repeat : no-repeat;
    background-position : 50% 50%;
    z-index: 9999; }

/* ================== header ================== */
header { width:100%; height:600px; display:block; overflow:hidden; }
header h1 { position:absolute; top:60px; left:60px; z-index:9998; }
header p { position:absolute; top:285px; left:95px; z-index:9997; }
header #mainVisual {
 position:relative; width:100%; height:100%; background: url(../img/mainVisual.jpg) no-repeat center center scroll; background-size:cover; }

header #scroll{ display:block; position:absolute; width:100%; height:300px; background-color:#fff; }
header #scroll span{ position: relative; display:block; width:50px; padding-top:150px; margin:0 auto; overflow:hidden; }
header #scroll span:before { content:""; position:absolute; bottom:-6px; left:-5px; width: 0; height: 0; border: 30px solid transparent; border-top: 29px solid #333; }
header #scroll span:after{ content:""; position:absolute; bottom:0; left:-2px; width: 0; height: 0; border: 27px solid transparent; border-top: 27px solid #fff;  }

#parallax div { }
#pbg01 { width:100%; height:600px; background:url(../img/parallax_Bg01.jpg) no-repeat 0 0; background-size:cover; }

/* ================== informartion ================== */
#Informartion { padding:70px 0; position:relative; overflow:hidden; }
#Informartion p { margin:0 auto; text-align:center; }
#Informartion dl { width:480px; overflow:hidden; margin:0 auto; }
#Informartion dl dt { float:left; width:100px; clear:both; padding-bottom:10px; }
#Informartion dl dd { float:left; width:380px; padding-bottom:10px; }
#Informartion #artworkR { position:absolute; top:0; right:20px; width:330px; height:194px; }
#Informartion #artworkL { position:absolute; top:250px; left:20px; width:270px; height:160px; overflow:hidden; }

/* ==================== highlight =================== */
#Highlight div { width:340px; height:350px; margin:0 auto 20px; }
#Highlight p { width:620px; margin:auto; }

/* ===================== profile ==================== */
#Profile { display:block; overflow:hidden; clear:both; margin-bottom:0;}
#Profile p { width:620px; margin:auto; text-align:center; }
#Profile h3 { text-align:center; font-size:100%; margin-bottom:10px; }

#Profile .linkBtn { width:600px; margin:30px auto 0; } 
#Profile .linkBtn .Btn-A a,
#Profile .linkBtn .Btn-B a
{ display:block; float:left; width:230px; padding:7px 30px; margin-right:10px; color:#fff; text-align:center; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }

#Profile .Btn-A a { background-color:#cc6600; }
#Profile .Btn-B a { background-color:#cc6600; }
#Profile .Btn-A a:hover,
#Profile .Btn-B a:hover,
#Profile .Btn-A a:active,
#Profile .Btn-B a:active { background-color:#e69748; }

/* =================== top up icon ================== */
#topUp span { position:fixed; bottom:100px; right:40px; padding:16px 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color:#cc6600; font-size:130%; color:#fff; z-index:1000; }
#topUp span:hover,
#topUp span:active { background-color:#e69748; }

/* ====================== footer ==================== */
footer { display:block; position:relative; width:100%; }
footer p.txtCopy { position:absolute; bottom:0; display:block; box-sizing:border-box; width:100%; padding:2px 5px; font-size:70%; background-color:#423220; opacity: 0.8;  color:#fff; }
footer #fotVisual { width:100%; height:450px; background: url(../img/fotVisual.png) no-repeat 0 0; background-size:cover; }

/* ====================== pc on/off ==================== */
header #scroll { display:block;}
header #scrollsp { display:none; }

#fc2_footer { display:none; }
#fc2_footer span { font-size:8px; }
body > img { display:none; }