@charset "utf-8";

/*  
--------------------============== media screen and 800px start ===============------------------- */
@media screen and (max-width: 800px) {

/* common
 ==================================================== */
body{
	font-size:15px;
	line-height:1.8em;
	-webkit-overflow-scrolling: touch;
}
section { padding:0; margin:30px auto; }

p.linkBtn { width:85%; }

/* parts
 ==================================================== */
.spBreak { display:none; }

/* header
 ==================================================== */
header{ width:100%; }
header #mainVisual { position:static; width:100%; height:450px; margin-top:20px; background-position:top right;  background-size:800px; }
header h1 { position:static; margin-top:40px; text-align:center; }
header p { position:static; margin-top:5px; text-align:center; }
header h1 img,header p img { width:350px; }

/* scroll icon 
 ==================================================== */
#scrollsp { display:block; width:100%; }
#scrollsp span { position: relative; display:block; width:50px; padding:20px 0; margin:0 auto; }
#scrollsp span:before { content:""; position:absolute; bottom:-86px; left:-5px; width: 0; height: 0; border: 30px solid transparent; border-top: 29px solid #333; }
#scrollsp span:after { content:""; position:absolute; bottom:-80px; left:-2px; width: 0; height: 0; border: 27px solid transparent; border-top: 27px solid #fff; }

/* ================== informartion ================== */
#Informartion h2,
#Informartion .imgL { margin-top:40px; }

/* profile
 ==================================================== */
#Profile p { text-align:left; }

/* footer
 ==================================================== */
footer { width:100%; }
footer #fotVisualSp { width:100%; height:300px; background: url(../img/fotVisual.png) no-repeat bottom center; background-size:100%; }

/* tb on/off
 ==================================================== */
#fotVisual,
#pbg01,
header #scroll{ display:none; }

header #scrollsp,
#fotVisualSp { display:block; }

} 
/*  
-----------------------============== media screen and 800px end ===============------------------- */

/*
---------------------============== media screen and 555px start ===============------------------- */
@media screen and (max-width: 555px) {

/* common
 ==================================================== */
.imgL,
.imgR img { float:none; text-align:center; margin:0 auto 20px;  }

/* header
 ==================================================== */
header #mainVisual { position:static;background-position:top right;  background-size:555px; }
header h1 img,header p img { width:80%; }


#scrollsp span:before { bottom:30px; }
#scrollsp span:after { bottom:36px; }

/* informartion
 ==================================================== */
#Informartion { padding:0; text-align:center;}
#Informartion dl { width:350px; }
#Informartion dl dt,
#Informartion dl dd { float:none; width:100%; padding-bottom:0; }
#Informartion dl dd { margin-bottom:20px; }


/* highlight & profile 
 ==================================================== */
#Highlight div,
#Highlight p,
#Profile h3,
#Profile p { width:100%; box-sizing:border-box; padding:0 40px; }

#Highlight img { width:260px; }
#Highlight div { text-align:center; margin-bottom:0; }

#Profile .linkBtn { display:block; width:100%; margin:0; }
#Profile .linkBtn .Btn-A,
#Profile .linkBtn .Btn-B,
#Profile .linkBtn .Btn-A a,
#Profile .linkBtn .Btn-B a { display:block; width:80%; margin:20px auto 0; }

/* top up icon
 ==================================================== */
#topUp span { bottom:80px; right:30px; }

/* tb on/off
 ==================================================== */
#Informartion .imgL,
#Profile .imgR,
header #scroll { display:none; }

#Informartion .imgL{ display:block; }
}
/*
-----------------------============== media screen and 555px end ===============------------------- */