@charset "utf-8";

/* base
================================================== */
body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	top:0;
	left:0;
	display:block;
}

html, body {
	font-size:100%;
	font-family:'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}

ul,li   {  
    margin:0;  
    padding:0;  
    list-style:none;  
	display:inline-block;
}

/* index bg
================================================== */
#index:before {
	background:url(../images/common/bg.jpg) center top no-repeat;
	background-size:100% auto;
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	min-width:1120px;
	padding-bottom:108px;
	content:"";
	z-index:-1;
}

/* other bg
================================================== */
#other_bg:before {
	background:url(../images/common/other_bg.png) center top repeat-x;
	background-size:100% auto;
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	min-width:1120px;
	content:"";
	z-index:-1;
}

/* header
================================================== */
#fixed {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:80px;
	min-width:1280px;
	background:#fff;
	border-bottom:solid 2px #000;
	box-sizing:border-box;
	z-index:9999;
}

#header {
	position:relative;
	width:1120px;
	height:80px;
	margin:0 auto;
	background:#fff;
	text-align:center;
	border-bottom:solid 2px #000;
	box-sizing:border-box;
}

/* logo
------------------------------ */
#logo a{
	width:155px;
	height:80px; 
	float:left;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/common/logo.png) 0 0  no-repeat;
	margin-right:80px;
}

/* navi
------------------------------ */
ul.navi_content{
	width:885px;
	height:80px;
    display:inline-block;
	text-align:center;
}

ul.navi_content li {
	float:left;
}

ul.navi_content li#topics a{
	width:67px;
	height:80px; 
	float:left;
	display:block;
 	text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
	background:url(../images/common/topics.png) 0 0  no-repeat;
	margin-right:52px;
}


ul.navi_content li#introduction a{
	width:133px;
	height:80px; 
	float:left;
	display:block;
 	text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
	background:url(../images/common/introduction.png) 0 0  no-repeat;
	margin-right:52px;
}

ul.navi_content li#character a{
	width:86px;
	height:80px; 
	float:left;
	display:block;
 	text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
	background:url(../images/common/character.png) 0 0  no-repeat;
	margin-right:52px;
}

ul.navi_content li#system a{
	width:101px;
	height:80px; 
	float:left;
	display:block;
 	text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
	background:url(../images/common/system.png) 0 0  no-repeat;
	margin-right:52px;
}

ul.navi_content li#goods a{
	width:43px;
	height:80px; 
	float:left;
	display:block;
 	text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
	background:url(../images/common/goods.png) 0 0  no-repeat;
	margin-right:52px;
}

ul.navi_content li#special a{
	width:73px;
	height:80px; 
	float:left;
	display:block;
 	text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
	background:url(../images/common/special.png) 0 0  no-repeat;
	margin-right:88px;
}

ul.navi_content li#help a{
	width:62px;
	height:80px; 
	float:left;
	display:inline;
 	text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
	background:url(../images/common/help.png) 0 0  no-repeat;
}

/* navi hover
------------------------------ */
ul.navi_content li a:hover{
    cursor:pointer;
    filter:alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity:0.6;
    zoom:1;
	-webkit-transition: all .3s ease;
  	transition: all .3s ease;
}

/* navi access
------------------------------ */
.menu a.on{	
	position:relative;
	border-bottom:solid 4px #000;
	box-sizing:border-box;
}

/* pankuzu
================================================== */
.pankuzu_area_wid{
	position:relative;
	width:1120px; 
	min-width:1280px; 
	margin:0 auto;
	z-index:9000; 
}


.pankuzu_area{
	position:relative;
	width:1120px; 
	margin:0 auto;
	padding:12px 0px 0px 0px;
	z-index:9000;
}
.pankuzu{
	position:absolute;
	margin:0 auto;
	width:1120px; 
}

ul.pan {
	float:left;
	}

ul.pan  li {
	display:inline-block;
	padding:0px;
	margin:0px;
	font-size:0.813em;
	color:#666; 
 }

ul.pan li:after {
	padding:5px;
	content:">";
}

ul.pan li:last-child:after {
	content: "";
}

ul.pan  li a{
	text-decoration:none;
	color:#666; 
}

ul.pan  li a:hover{
	text-decoration:underline;
	color:#666;
}

/* footer
------------------------------ */
#footer{
	clear:both;
	width:100%;
	height:100%;
	min-width:1280px;
	margin:0;
	padding:0;
	background-color:#000;
}


footer #footer_nav_area{
	width:100%;
	height:auto;
	background-color:#000;
}

footer #footer_nav {
	width:1120px;
	height:auto;
	margin:0 auto;
}

/* footer logo
------------------------------ */
footer #footer_nav #footer_logo { 
	float:left;
	margin:0px 80px 0px 0px;  
}

footer #footer_nav #footer_logo a {
	display:block;
	width:177px;
	height:37px;
	margin:64px 0px 0px 0px;
	text-indent: -9999px;
	overflow:hidden;
	background:url(../images/common/footer_logo.png) 0 0 no-repeat;
}

/* footer navi
------------------------------ */
.line{
	border-top:1px solid #fff;
	width:16px;
}


footer #footer_nav ul .link_title{
	font-size:1em;
	padding:24px 0px 16px 0px;
	color:#fff;
	float:left;
	width:180px;
	font-weight:bold;
}

footer #footer_nav ul {
	float:left;
	width:16px;
	height:324px;
	margin:64px 180px 0px 0px;
}

footer #footer_nav ul .link{ 
	float:left;
	width:180px;
}

footer #footer_nav ul .link a{ 
	font-size:0.75em;
	color:#fff;
	line-height:32px;
	text-decoration:none; 
}

footer #footer_nav ul .link_service{
	font-size:0.75em;
	color:#fff;
	line-height:12px;
	float:left;
	padding-top:10px;
	width:180px;
}

footer #footer_nav ul .link_settlement{
	font-size:0.75em;
	color:#fff;
	line-height:12px;
	float:left;
	margin-top:24px;
	width:180px;
}

footer #footer_nav ul .link_app_category{
	font-size:0.75em;
	color:#fff;
	width:180px;
}

footer #footer_nav ul .link_app_category a{
	font-size:0.75em;
	color:#fff;
	text-decoration:none; 
}

footer #footer_nav ul .link_bottom{ 
	width:180px;
}

footer #footer_nav ul .link_bottom a{ 
	font-size:0.75em;
	color:#fff;
	line-height:44px;
	text-decoration:none; 
	float:left;
	margin-top:8px;
}

footer #footer_nav ul .link a:hover{
	color:#fff;
	text-decoration:underline;
}

footer #footer_nav ul .link_bottom a:hover{
	color:#fff;
	text-decoration:underline;
}

footer #footer_nav ul .link_app_category a:hover{
	color:#fff;
	text-decoration:underline;
}

/* copy right
================================================== */
footer #footer_copyright_area {
	width:100%;
	height:100px;
	background-color:#000;
}

footer #footer_copyright {
	width:1120px;
	height:20px;
	margin:0 auto;
	padding:20px 0px 0px 0px;
	border-top:1px solid #313131;
}

footer #c_cybird { 
	float:left;
	color:#fff; 
	height:20px;
	font-size:0.75em;
}

footer #note{
	float:left;
	color:#bfbfbf; 
	padding:0px 0px 0px 20px;
	font-size:0.625em;
}

.app_gl{
	line-height:18px; 
}

/* clear fix
================================================== */
.clearfix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  overflow:hidden;
  font-size:0.1em;
  line-height:0;
}

/* btn page top
------------------------------ */
#btn_page_top p a {
	display: block;
	width:60px;
	height:60px;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/common/totop.png) 0 0 no-repeat;
	position:fixed;
	bottom:24px;
	right:24px;
	z-index:9990; 
}

/* share area
================================================== */
.share_area{
	width:100%;
	height:160px;
	bottom:0px;
	border-top:2px solid #000;
	background:url("../images/common/pattern_share.png") 0 0 ;
	min-width:1280px;
}
.share_contents{
	position: absolute;
	width:100%;
	min-width:1280px;  
	margin:0 auto; 
	padding-top:12px; 
	text-align:center;
	z-index:100; 
}

ul.share_icon li{
	margin:0 auto;
	display:inline;
	vertical-align:bottom;
}

ul.share_icon li#sns_t a{
	float:left;
	margin:32px 40px 0px 0px;
	width:67px;
	height:72px; 
	display:block;
	text-align:center;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/common/twitter_icon.png)  no-repeat center;
}

ul.share_icon li#sns_f a{
	float:left;
	margin:32px 40px 0px 0px;
	width:79px;
	height:72px; 
	display:block;
	text-align:center;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/common/facebook_icon.png)  no-repeat center;
}

ul.share_icon li#sns_l a{
	float:left;
	margin:32px 0px 0px 0px;
	width:53px;
	height:75px; 
	display:block;
	text-align:center;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/common/line_icon.png)  no-repeat center;
}

/* btn Blue
================================================== */
.blue_btn a{
	margin:0 auto; 
	display:block;
	text-align:center;
	width:272px;
	height:24px;
	background-color:#3cade8;
	color:#FFF;
	padding:20px;
	text-decoration:none;
	font-size:16px;
	line-height:24px; 
    border-radius:32px;
	-webkit-border-radius:32px;
	-moz-border-radius:32px;
	z-index:20; 
}

.arrow{
	float:right;
	right:4px;
	padding-top:5px; 	
}

.blue_btn a,
.blue_btn a::before,
.blue_btn a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.blue_btn a:hover {
	background-color:#158fcf;
}


/* back btn
================================================== */
.back_btn a{
	margin:0 auto;
	display:block;
	text-align:center;
	width:272px;
	height:24px;
	background-color:#eeeeee;
	color:#000;
	padding:20px;
	text-decoration:none;
	font-size:1em;
	line-height:24px; 
    border-radius:32px;
	-webkit-border-radius:32px;
	-moz-border-radius:32px;
	z-index:20; 
}

.back_arrow{
	float:left;
	left:4px;
	padding-top:5px; 	
}

.back_btn a,
.back_btn a::before,
.back_btn a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.back_btn a:hover {
	background-color:#bfbfbf;
}

.back_btn_area{
	margin-bottom:112px; 
}

/* help btn
================================================== */
.help_btn a{
	margin:0 auto;
	display:block;
	text-align:center;
	width:272px;
	height:24px;
	background-color:#1e446a;
	color:#fff;
	padding:20px;
	text-decoration:none;
	font-size:1em;
	line-height:24px; 
    border-radius:32px;
	-webkit-border-radius:32px;
	-moz-border-radius:32px;
	z-index:20; 
}

.help_btn a,
.help_btn a::before,
.help_btn a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.help_btn a:hover {
	background-color:#0f2c49;
}

.help_btn_area{
	margin-bottom:112px; 
}

.faq_btn_area{
	margin:64px 0px 80px 0px; 
}

.special_btn_area{
	margin:80px 0px 32px 0px; 
}

/* submit btn
================================================== */
.submit_btn_area button{
	position:relative;
	margin:0 auto;
	display:block;
	background:#1e446a;
	width:312px;
	height:64px;
	line-height:36px;
	font-size:1em; 
	color:#fff; 
	border:none; 
	cursor:pointer;
	border-radius:48px;
	-webkit-border-radius:48px;
	-moz-border-radius:48px; 
}

.search_btn_arrow{
	position:absolute;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	float:right;
	right:12px; 
}

.submit_btn_arrow{
	position:absolute;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	float:right;
	right:12px; 
}

.submit_btn_area button,
.submit_btn_area button::before,
.submit_btn_area button::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

.submit_btn_area button:hover {
	background-color:#0f2c49;
}