@charset "utf-8";
/* CSS Document */

/* ---------------------------------------------
　header
------------------------------------------------ */
.jcb .header {
  height: 193px;
  border: none;
}

.jcb .header .logo { top: 15px; }
.jcb .header .logo .icon_dc,
.jcb .header .logo .icon_jcb { display: none; }

.jcb header .global-dc {
  border-bottom: none;
}
.jcb header .global-jcb {
  height: 53px;
  border-top: solid 4px #0090f3;
  border-bottom: solid 2px #d2d2d2;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.jcb header .global-jcb ul { display: block; }
.jcb header #utility-jcb { display: block; }

.jcb header .utility-nav .jcb { display: block; }
.jcb header #utility-jcb .to-top {
	background: #0090f3;
	color: #fff;
	border-color: #0090f3;
}
.jcb header #utility-jcb a.to-top::after {
	border-color: #fff;
}
.header .global-jcb ul li:hover { border-bottom: solid 4px #0090f3; }
.header .global-jcb ul li:hover a { color: #008de6; }

/* ---------------------------------------------
container
------------------------------------------------ */

/* ------ title -------------------------------- */

.page-title h1{
  color: #008de6;
}
.policyfont .page-title h1{
  color: #000;
}

/* ------ topic-path --------------------------- */

.topic-path li a::after {
  border-top: solid 2px #008de6;
  border-right: solid 2px #008de6;
}
.topic-path li:first-child::before {
  color: #008de6;
}

/* ------ local-navigation --------------------- */

.sidebar .local-navigation h2{
  background:#008de6;
}

/* ---------------------------------------------
　sidenav
------------------------------------------------ */

.sidebar .local-navigation li a::after {
  border-color: #008de6;
}

.sidebar .utility-nav {
  padding: 12px;
  background: url(/themes/main/images/bg_hatching.png) repeat;
}
.utility-nav .my-jcb {
  padding: 12px;
  background: #fff;
  border-right: 4px;
}
.utility-nav .img-l { margin-right: 10px; }
.utility-nav .my-jcb .img-l { margin: 6px 10px 0 -5px; }
.utility-nav .summary {
  font-family: "Noto Sans Japanese";
  font-weight: bold;
  font-size: 12px;
}

.utility-nav .btn-area {
  clear: both;
}
.utility-nav .my-jcb .btn-area { margin-top: 10px; }
.utility-nav .btn-login { margin-bottom: 8px; }
.utility-nav .btn-login a {
  display: block;
  padding: 12px 12px 12px 12px;
  background: linear-gradient(0deg, #0746b8, #084ece, #77a7ff);
  border-bottom: solid 4px #042C73;
  border-radius: 5px;
  font-family: "Noto Sans Japanese";
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  text-decoration: none;
}
.utility-nav .btn-login a i {
  width: 22px;
  height: 22px;
  line-height: 22px;
  margin-right: 8px;
  background: #fff;
  border-radius: 4px;
  color: #0746B8;
  text-align: center;
}
.utility-nav .btn-login a:hover {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.utility-nav .btn-regist a {
  display: block;
  padding: 5px 10px 5px 10px;
  background: #097DF3;
  border-bottom: solid 4px #064D95;
  border-radius: 5px;
  font-family: "Noto Sans Japanese";
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  text-decoration: none;
}
.utility-nav .btn-regist a i {
  width: 22px;
  height: 22px;
  line-height: 22px;
  margin-right: 8px;
  text-align: center;
}
.utility-nav .btn-regist a:hover {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.utility-nav .contact {
	float: left;
	font-size: 14px;
	width: 118px;
  height: 108px;
  margin: 10px 0 0;
  padding: 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.utility-nav .contact * {
  vertical-align: middle;
}
.utility-nav .contact a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 15px 10px;
  background: #fff;
  text-decoration: none;
  font-family: "Noto Sans Japanese";
  font-weight: bold;
	line-height: 2;
  color: #008de6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.utility-nav .contact a:hover {
  text-decoration: underline;
}
.utility-nav .contact a img {
	display: block;
	margin: 0 auto 8px;
}

.utility-nav .faq {
	float: left;
	font-size: 14px;
	width: 118px;
	height: 108px;
  margin: 10px 0 0 10px;
  padding: 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.utility-nav .faq * {
  vertical-align: middle;
}
.utility-nav .faq a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 15px 10px;
  line-height: 2;
  background: #fff;
  text-decoration: none;
  font-family: "Noto Sans Japanese";
  font-weight: bold;
  color: #008de6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.utility-nav .faq a:hover {
  text-decoration: underline;
}
.utility-nav .faq a img {
	display: block;
	margin: 0 auto;
}

.utility-nav .btn-lost {
  float: none;
  clear: both;
  margin-top: 8px;
}
.utility-nav .btn-lost a {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 30px;
  padding: 10px 15px;
  background: #fff;
  border-radius: 5px;
  font-family: "Noto Sans Japanese";
  font-weight: bold;
  color: #333;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.utility-nav .btn-lost a:hover {
  text-decoration: underline;
}
.utility-nav .btn-lost a i {
  color: #fccd12;
}

/* ---------------------------------------------
　blog-area
------------------------------------------------ */

.blog-area dl::after {
  border-color: #008de6 !important;
}

.blog-area dl dd.cat .cat-icon {
  width: 107px;
  border: solid 1px #008de6 !important;
  background: #fff !important;
  color: #008de6 !important;
}

.blog-area dl dd.cat .cat-icon.cat-system { background: #0090f3 !important; color: #fff !important; }
.blog-area dl dd.cat .cat-icon.cat-security { background: #954fb6 !important; border-color: #954fb6 !important; color: #fff !important; }
.blog-area dl dd.cat .cat-icon.cat-114jcb { background: #0090f3 !important; color: #fff !important; }

/* ---------------------------------------------
　footer
------------------------------------------------ */
.banner-area {
  width: 100%;
  padding: 25px 0;
  border-top: solid 1px #c9c9c9;
  border-bottom: solid 1px #c9c9c9;
  text-align: left;
}
.banner-area li {
  display: inline-block;
  margin-right: 10px;
}
.banner-area li:last-child { margin-right: 0; }

.pagetop p { bottom: 0; }

.footer .footer_jcb { float: none; width: 100%; }
.footer .footer_jcb .wrap {
  width: 980px;
  margin: 20px auto 0;
  padding: 0;
  border: none;
  position: relative;
}
.footer .link-wrap { margin-bottom: 30px; }

.footer .footer_jcb .wrap ul {
  height: auto;
}

.footer .footer_jcb .wrap .logo{
	padding:6px 0 0;
}

.footer .link-wrap .link2 { float: left; margin-top: 15px; }
.footer .link-wrap .link2:nth-child(1) { width: 30%; }
.footer .link-wrap .link2:nth-child(2) { width: 35%; }
.footer .link-wrap .link2:nth-child(3) { width: 35%; }

.footer .footer_jcb .wrap .link2 li { margin-bottom: 10px; }

.footer .footer_jcb .wrap .btn {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.footer .footer_jcb .wrap .btn a {
  width: 320px;
}

.footer .info-area {
  vertical-align: bottom;
  text-align: left;
  position: relative;
}
.footer address {
  display: inline-block;
  width: 34%;
  margin-right: 30px;
}
.footer address img {
	margin-right: 7px;
	margin-bottom: 10px;
}
.footer .contact-area {
  float: none;
  display: inline-block;
  width: 31%;
  font-family: "Noto Sans Japanese";
  font-weight: 900;
}
.footer .contact-area .tel { font-size: 220%; }
.footer .contact-area .tel * { vertical-align: middle; }
.footer .contact-area .mail { font-size: 130%; }
.footer .contact-area .mail * { vertical-align: middle; }
.footer .regist-area {
  border: none;
  position: absolute;
  bottom: 0;
  right: 0;
}

.footer .footer_jcb .copyright {
  padding-right: 0;
  text-align: center;
}

.footer .footer_jcb .wrap .pci {
  width: 102px!Important;
  height: auto!Important;
}
/* ---------------------------------------------
layout modules
------------------------------------------------ */

.note { color:#666; }

/* ------ title -------------------------------- */

.content h2, 
.content .wysiwyg h1{
  color: #008de6;
  border-left: solid 4px #008de6;
}
.policyfont .content h2, 
.policyfont .content .wysiwyg h1{
  color: #000;
  border-left: solid 4px #008de6;
}

.content h3, 
.content .wysiwyg h2{
  background:#008de6;
}

.content h5, 
.content .wysiwyg h4{
  color: #008de6;
}
.policyfont .content h5, 
.policyfont .content .wysiwyg h4{
  color: #000;
}

/* ------ ul ----------------------------------- */

.list.w100 li,
.link.w100 li{
  float: none;
  width: 100%;
}

/* --- number list --- */

ol li:before {
  color: #008de6;
}
.policyfont ol li:before{
  color: #000;
}

ol.nocss-num li span.red {
  color: #008de6;
}
.policyfont ol.nocss-num li span.red {
  color: #000;
}

/* ------ table -------------------------------- */

table thead th,
th.head {
  background:#729dd3;
}



/* ---------------------------------------------
card
------------------------------------------------ */
.jcb .card .copy {
  color: #729dd3;
}

.content .card-face ul {
	font-size:87%;
	margin:0 -5px -10px;
}

.card-face ul li {
	display:inline-block;
	text-align:center;
	width:155px;
	margin:0 5px 10px;
}

.card-face ul li img {
	max-width:100%;
	height:auto;
	margin:0 0 5px;
}


/* ---------------------------------------------
giftcard
------------------------------------------------ */

.btn.big a { width: 400px !important; }

.giftcard_type li {
  display: inline-block;
  margin-right: 10px;
  vertical-align:top;
  width:30%;
}