@charset "utf-8";
/* newTop common */

body {
 font: normal 18px Hiragino Kaku Gothic Pro;
 letter-spacing: 0;
 color: #000;
 margin: 0;
}

a:link { color:#000; }
a:visited { color:#000; }


img {
	max-width: 100%;
	height: auto;
	-ms-interpolation-mode: bicubic;
}

.wrapper {
  margin: 0 auto;
  text-align: center;
}

header {
  /*background: #EDEDED;*/
}

.first_header {
 padding: 0 15px;
 height: 90px;
 border-bottom: 1px solid #707070;
/*background: #F30692;*/
  overflow: hidden;
}

.first_header .finner { 
/*  max-width: 1200px;*/
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
  font-size:12px;
  overflow: hidden;
	display:flex;
	justify-content:space-between;
}

.first_header h1 {
  /*float:left;*/
/*	padding:11px 0;*/
	padding:7px 0;
}

.first_header .siteLink {
  /*float:left;*/
  padding:0;
}

.first_header .siteLink ul.site {
  float:left;
  list-style: none;
}

.first_header .siteLink ul.site li {
  float:left;
  border-right:1px solid #CCC;
 padding:0 1em;
}

.first_header .siteLink ul.site li:first-child {
  border-left:1px solid #CCC;
}

.first_header .siteLink ul.site li:last-child {
/*  padding-bottom:12px;*/
}

.first_header .siteLink ul.site li:last-child img {
    height: 40px;
    margin-top: 4px;
    margin-bottom: 3px;
}

.first_header .inq {
  /*float:right;*/
/*  padding-top: 15px;*/
  padding-top: 24px;
}

.first_header .inq-lang {
  /*float:right;*/
/*  padding-top: 15px;*/
  padding-top: 24px;
	display: flex;
}

.first_header .inq-lang .link-lang {
	margin-right:20px;
	line-height:200%;
	text-align: left;
	pading-top:2px;
}

.first_header .inq-lang .link-inq {
	text-align: center;
}

.second_header {
	position: relative;
	width:100%;
  height: 100px;
  margin: 0;
  text-align: center;
  background: #FFF;
  font-size:12px;
  overflow: hidden;
	z-index: 10000;
}

.second_header.gnav_fixed {
  position: fixed;
  top: 0;
 box-shadow: 1px 0 6px #00000029;
}

nav.PCnav {
	margin:0 auto;
	max-width: 1200px;
	display:flex;
	justify-content: space-between;
/*	align-items: flex-end;*/
}

nav.PCnav .card,
nav.PCnav .netgift,
nav.PCnav .bstore,
nav.PCnav .bweb,
nav.PCnav .btopics,
nav.PCnav .original,
nav.PCnav .faq,
nav.PCnav .balance {
  float:left;
  padding:1em;
}

nav.PCnav a {
	width:12.5%;
	display: inline-block;
	text-decoration: none;
}

nav.PCnav a.card:hover {
  background: transparent linear-gradient(180deg, #FCE0CD 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  color:#EC805C;
}
nav.PCnav a.netgift:hover {
  background: transparent linear-gradient(180deg, #CDE6FC 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  color:#35318F;
}
nav.PCnav a.bstore:hover {
  background: transparent linear-gradient(180deg, #F6E7AB 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  color:#ECAA46;
}
nav.PCnav a.bweb:hover {
  background: transparent linear-gradient(180deg, #CDFCFC 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  color:#64D3D7;
}
nav.PCnav a.btopics:hover {
  background: transparent linear-gradient(180deg, #E4C29C 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  color:#8C5715;
}
nav.PCnav a.original:hover {
  background: transparent linear-gradient(180deg, #B1E7FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  color:#52B3E3;
}
nav.PCnav a.faq:hover {
  background: transparent linear-gradient(180deg, #D0FCCD 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  color:#43A328;
}
nav.PCnav a.balance:hover {
  background: transparent linear-gradient(180deg, #EDCDFC 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  color:#BF6DFF;
}


.footer {
	/*background: #1eaa39;*/
	text-align: center;
	background: transparent url("/assets/images/bg_footer.png") repeat-x bottom;
	padding-top:100px;
	padding-bottom:8em;
}

.footerinner {
	width:100%;
	max-width:1200px;
	display: flex;
	justify-content: space-between;	
	color: #333333;
	margin:0 auto;
}

.footerinner .linklist {
	width:23%;
}

.footerinner h4.linktogg,
.spnav-flink h4.linktogg {
	text-align: left;
	font-weight: bold;
	padding-left:8px;
	padding-bottom:0.2em;
	border-bottom:1px solid #333;
	border-top:none;
	border-radius: 0;
	background:none;
	margin-bottom:25px;
	font-size:14px;
	color:#333;
}

.footerinner a.footerlink,
.spnav-flink a.footerlink {
	display: block;
	text-align: left;
	margin-bottom: 0.7em;
	padding:0 16px 0 8px;
	text-decoration: none;
	font-size:13px;
	position: relative;
}
/*
.footer-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  margin-right: 5px;
  float:right;
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(-45deg);
  / *transition: all 0.5s ease-in;* /
}
*/
.footer-arrow {display:none;
}
.footerinner a.footerlink::after, .spnav-flink a.footerlink::after {
  display: block;
  content:" ";
  width: 7px;
  height: 7px;
/*  margin-top: 4px;*/
/*  margin-right: 5px;*/
/*  float:right;*/
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(-45deg);
  /*transition: all 0.5s ease-in;*/
  right:5px;
  top:4px;
  bottom:4px;
  position:absolute;
}

.footerinner a.footerlink:hover,
.spnav-flink a.footerlink:hover { color:#0096E9; }

.footerinner a.footerlink:hover .footer-arrow,
.spnav-flink a.footerlink:hover { border-bottom: 1px solid #0096E9; border-right: 1px solid #0096E9; }

.copyright {
	margin-top:3em;
	color: #35318F;
	font-size:12px;
}

#pagetop a {
	position:fixed;
	display:block;
	bottom:10px;
	right:10px;
	z-index:9000;
	font-size:12px;
	color: #35318F;
	height:15px;
	padding-top:50px; 
}

#pagetop a {
	text-decoration: none;
	background:url(/assets/images/icon_tokkun_totop.png)no-repeat  17px 0;
}
#pagetop a:hover {
	color:#0096E9;
	background:url(/assets/images/icon_tokkun_totop_on.png)no-repeat  17px 0;
}

/*----------------------
	レスポンシブ
----------------------*/

@media screen and (min-width: 640px) {
	
	.SP,
	nav.sp-nav { display: none; }
}

@media screen and (max-width: 639px) {
	
	body { font-size: 77.7%; }
	.PC { display: none; }
	
	header {margin:0;}

	.footer {
  /*background: #1eaa39;*/
  background-image: url("/assets/images/bg_footer.png");
	background-position: bottom;
	background-repeat: repeat-x;
	background-size:300% auto;
	padding-bottom:80px;
	padding-top: 20px;
	}
	
	.footerinner {
	max-width:95vw;
	display: block;
	}
	
	.footerinner .linklist {
	display: block;
	width:100%;
	}

.footerinner h4.linktogg,
.spnav-flink h4.linktogg {
	cursor:pointer;
	margin-bottom:15px;
	}

	.flink_plus {
  display: inline-block;
  position: relative;
  float: right;
  width: 14px;
  height: 14px;
  margin: 0 8px 0 2px;
	}
	
	.flink_plus:before, .flink_plus:after {
  display: block;
  content: '';
  background-color: #333;
  /*border-radius: 10px;*/
  position: absolute;
  width: 14px;
  height: 2px;
  top: 11px;
  left: 0;
	}
	
	.flink_plus:before {
  width: 2px;
  height: 14px;
  top: 5px;
  left: 6px;
	}
	
	.flink-group {
	display: none;
	}
	
	.flink_plus:after,
	.flink_plus:before {
		transition: all 0.5s ease-in;
	}
	
.footerinner h4.active .flink_plus:after,
.spnav-flink h4.active .flink_plus:after {
  	transform: rotate(90deg);
	opacity: 0;
	}
	
.footerinner h4.active .flink_plus:before,
.spnav-flink h4.active .flink_plus:before {
  	transform: rotate(90deg);
	}
	
	.copyright {
	margin-top:5em;
	font-size:10px;
	}

	#pagetop a {
	background:url(/assets/images/icon_tokkun_totop.png)no-repeat  25px 0;
	background-size:45%;
	height:15px;
	padding-top:40px; 
	}

	#pagetop a:hover {
	background:url(/assets/images/icon_tokkun_totop_on.png)no-repeat  25px 0;
	background-size:45%;
	}
}


@media screen and (max-width: 320px) {
	
	body { font-size: 60%; }
}

/* ロゴ部分レスポンシブ */
@media screen and (min-width: 640px) and (max-width: 700px) {
.first_header .siteLink ul.site li {
font-size: 11px;
margin-top: 4px;
}

.first_header .siteLink ul.site img {
height: 40px;
}

.first_header .siteLink ul.site li:last-child img {
height: 33px;
}
}

/* ロゴ部分レスポンシブ */
@media screen and (min-width: 640px) and (max-width: 950px) {
br.width-wide {display:none;}
}

/* GB　PCレスポンシブ */
br.w1200pc,br.w900pc,br.w800pc{display:none;}

@media screen and (min-width: 640px) and (max-width: 1200px) {
br.w1200pc{display:block;}
}

@media screen and (min-width: 901px) and (max-width: 1200px) {
nav.PCnav a:nth-of-type(6) {
line-height: 1.2;
}
}

@media screen and (min-width: 640px) and (max-width: 900px) {
br.w900pc{display:block;}
.second_header {font-size: 11px;}
nav.PCnav a img {height:40px;}
}

@media screen and (min-width: 640px) and (max-width: 800px) {
br.w800pc{display:block;}
}