@charset "euc-jp";

@import url('https://fonts.googleapis.com/css?family=Poppins:700');

/* credit_top

クレジットカードトップのみで使用するスタイル

------------------------------------------------ */

/*  共通
------------------------------------------------ */

/* レイアウト調整 */
.contents {
    width: 100%;
    overflow: inherit;
    margin: 0;
    padding: 0;
}
.creditcard {
  width: 950px;
  overflow: hidden;
  margin: 0 auto 40px;
}

.creditcard a:hover { color: #5a9fdf;}

/*  メイン
------------------------------------------------ */

/* 見出し */
.creditcard h2,
.credit_shop h2{
	height: auto;
	clear: both;
	margin-bottom: 30px;
	padding: 7px 0 12px 0;
	border: none;
	border-bottom: #2879c4 2px solid;
  background-color: #fff;
  letter-spacing: 1px;
  font-size: 25px;
	color: #3b3b3b;
}

/* カードローテション */
.credit_rotation {
 height: 510px;
 margin-bottom: 35px;
}
.credit_rotation .inner {
 height: 445px;
 position: relative;
 margin: 0 auto;
 padding-top: 30px;
 background: #c1e0fe;
 background: -moz-linear-gradient(to right,  #b3fafd 0%, #b3fafd 47%, #c1e0fe 100%);
 background: -webkit-gradient(linear, left, right, color-stop(0%,#b3fafd), color-stop(47%,#c1dffe), color-stop(100%,#c1dffe));
 background: -webkit-linear-gradient(right,  #b3fafd 0%, #c1dffe 47%,#c1dffe 100%);
 background: linear-gradient(to right,  #b3fafd 0%, #c1dffe 47%, #c1dffe 100%);
}
.credit_rotation .main {
 width: 950px;
 height: 345px;
 margin: 0 auto;
}
.credit_rotation .status1  {
 margin-bottom: 40px;
}
.credit_rotation .status1 p {
 display: table-cell;
 vertical-align: top;
}
.credit_rotation .status1 p:nth-child(1) {
 width: 325px;
 box-sizing: border-box;
 }
.credit_rotation .status1 p:nth-child(2) {
 width: 625px;
 box-sizing: border-box;
 padding-left: 15px;
}
.credit_rotation .thumnail {
 width: 325px;
 height: 205px;
 background: url(../../../img/15/credit/bg_shadow1.png) 0 bottom no-repeat;
}
.credit_rotation .thumnail img {
 height: 190px;
 margin: 0 auto;
}

.credit_rotation .status1 .name,
.credit_rotation .status1 .usually {
 display: block;
}
.credit_rotation .status1 .name {
 width: 610px;
 box-sizing: border-box;
 margin-bottom: 15px;
 padding: 15px 0 25px;
 border-bottom: #2879c4 2px solid;
 -moz-text-shadow: 1px 1px 2px #fff;
 -webkit-text-shadow: 1px 1px 2px #fff;
 text-shadow: 1px 1px 2px #fff;
 font-size: 43px;
 color: #272727;
}
.credit_rotation .status1 .usually {
 font-size: 20px;
}
.credit_rotation .status1 .point,
.credit_rotation .status1 .unit {
 display: inline-block;
}
.credit_rotation .status1 .usually del { margin-left: 5px;}


.credit_rotation .status1 .point {
 background: none;
 padding: 50px 0 0 0;
 -webkit-text-stroke: 5px #662b07;
 text-shadow: 3px 2px 0 #ffbe0f, -3px -2px 0 #fff5d1, 0 0 0 #fff, 3px 3px 4px #30527b;
 letter-spacing: 4px;
 font-weight: bolder;
 font-size: 122px;
 color: rgba(255,255,255,0);
font-family: 'Poppins', sans-serif;
}
.credit_rotation .status1 .unit {
 margin-left: 5px;
 -webkit-text-stroke: 4px #662b07;
 text-shadow: 2px 2px 0 #ffbe0f, -3px -3px 0 #fff5d1, 0 0 0 #fff, 3px 3px 4px #30527b;
 letter-spacing: 1px;
 font-weight: bolder;
 font-size: 80px;
 color: rgba(255,255,255,0);
 font-family: 'Poppins', sans-serif;
}
/* IE11 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .credit_rotation .status1 .point, .credit_rotation .status1 .unit { 
    text-shadow: -1px -1px 0 #fff4ab, 2px 2px 3px #283341;
    color: #ffbe0f;
    } 
}
/* MS Edge */
@supports (-ms-ime-align:auto) {
.credit_rotation .status1 .point,
.credit_rotation .status1 .unit  {
    -webkit-text-stroke: 4px #662b07;
    text-shadow: 1px 1px 2px #30527b;
    color: #ffbe0f;
  }
}

.credit_rotation .status2 span {
 float: left;
 box-sizing: border-box;
 }
 .credit_rotation .status2 span:nth-child(1) {
 width: 460px;
 margin-left: 15px;
 padding-bottom: 9px;
 border-bottom: #2879c4 1px solid;
 line-height: 1.5em;
 font-size: 20px;
 }
.credit_rotation .status2 span:nth-child(2) {
 width: 475px;
 text-align: center;
 }
 .credit_rotation .status2 a.btn_detail {
 width: 320px;
 position: relative;
 padding: 26px 15px 21px;
 border: #ffd94e 1px solid;
 font-size: 25px;
 }
 .credit_rotation .status2 a.btn_detail::before,
 .credit_rotation .status2 a.btn_detail::after {
	position: absolute;
	top: 50%;
	right: 55px;
	display: block;
	content: '';
	width: 17px;
	height: 3px;
	background: #3b3b3b;
	border-radius: 4px;
}
 .credit_rotation .status2 a.btn_detail::before {
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
 .credit_rotation .status2 a.btn_detail::after {
	margin-top: 5px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.credit_rotation .main .bx-wrapper .bx-viewport {
 background: none;
}

/* カードサムネイル */
.slider_thumnail {
 width: 950px;
 position: absolute;
 left: 0;
 right: 0;
 overflow: hidden;
 margin: 0 auto;
 text-align: center;
}
.slider_thumnail h2 {
 padding-top: 5px;
 text-align: center;
 font-weight: bold;
 font-size: 25px;
}
.slider_thumnail h2 span {
 display: block;
 padding: 4px 0 7px;
 letter-spacing: 4px;
 font-size: 10px;
 color: #2977e2;
}
.credit_rotation .inner ul.bx-pager {
 height: 85px;
}
.credit_rotation .inner .bx-pager li {
  display: inline-block;
  padding: 0 10px;
}
.credit_rotation .inner .bx-pager li img { height: 76px;}
.credit_rotation .inner .bx-pager li img:hover {
 box-shadow: 0 0 4px #2977e2;
 opacity: 0.7;
}
.credit_rotation .inner .bx-pager li a {
 display: block;
 background: url(../../../img/15/credit/bg_shadow2.png) 0 bottom no-repeat;
}

/* 新着のクレジットカード */
.creditcard .credit_new ul {
 overflow: hidden;
 margin-bottom: 40px;
}
.creditcard .credit_new li {
 width: 215px;
 height: 485px;
 float: left;
}
.creditcard .credit_new li { margin-right: 30px;}
.creditcard .credit_new li:last-child { margin-right: 0;}

.creditcard .credit_new li a {
 display: block;
 text-decoration: none;
}
.creditcard .credit_new li span { display: block;}
.creditcard .credit_new li a .thumnail {
 width: 215px;
 height: 140px;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.creditcard .credit_new li a .name {
 height: 50px;
 white-space: normal;
 margin: 15px 0;
 line-height: 1.5em;
 font-size: 17px;
 color: #3b3b3b;
}
.creditcard .credit_new li a img {
 vertical-align: bottom;
}
.creditcard .credit_new li a img,
.creditcard .credit_new li a .name {
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
}
.creditcard .credit_new li a img:hover { opacity: 0.6;}
.creditcard .credit_new li a:hover .name { color: #2882d6;}
.creditcard .credit_new li p {
 height: 55px;
 margin-bottom: 15px;
 text-align: center;
}
.creditcard .credit_new li .point {
 margin-bottom: 15px;
 display: inline-block;
 font-size: 28px;
}
.creditcard .credit_new li .usually {
 font-size: 16px;
}
.creditcard .credit_new li .recommend1 {
 height: 100px;
 box-sizing: border-box;
 margin-bottom: 30px;
 padding: 15px 10px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 background: #f4f4f4;
 line-height: 1.7em;
 font-size: 13px;
}
.creditcard .credit_new li a.btn_detail {
 width: 100%;
 border: #dcad00 1px solid;
}
.creditcard .credit_new .btn_more a {
 width: 460px;
 position: relative;
 display: block;
 box-sizing: border-box;
 margin: 0 auto;
 padding: 15px 0;
 border: #2882d6 1px solid;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 text-align: center;
 text-decoration: none;
 font-weight: bold;
 font-size: 17px;
 color: #2882d6;
}
.creditcard .credit_new .btn_more a:hover {
  border: #5a9fdf 1px solid;
	background-color: #c6def5;
}
.creditcard .credit_new .btn_more a::before,
.creditcard .credit_new .btn_more a::after {
	position: absolute;
	top: 50%;
	right: 115px;
	display: block;
	content: '';
	width: 12px;
	height: 3px;
	background: #2882d6;
	border-radius: 4px;
}
.creditcard .credit_new .btn_more a::before {
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.creditcard .credit_new .btn_more a::after {
	margin-top: 2px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



/*  お買い物・特典でお得になるクレジットカード
------------------------------------------------ */
.credit_shop {
 margin-bottom: 45px;
 background: #f4f4f4;
}
.credit_shop .inner {
 width: 950px;
 overflow: hidden;
 margin: 0 auto;
 padding-bottom: 35px;
 padding-top: 35px;
}
.credit_shop h2 {  background-color: #f4f4f4;}

.credit_shop li {
 width: 215px;
 height: 420px;
 box-sizing: border-box;
 float: left;
 margin: 0 30px 15px 0;
 padding: 10px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 background: #fff;
}
.credit_shop li:nth-child(4n) {
 margin: 0 0 15px 0;
}
.credit_shop li span { display: block;}
.credit_shop li span:nth-child(5) { padding: 0 5px;}
.credit_shop li .shop {
 height: 70px;
 box-sizing: border-box;
 border-bottom: #e0e2e4 1px solid;
 text-align: center;
}
.credit_shop li .recommend1 {
 height: 90px;
 position: relative;
 box-sizing: border-box;
 margin-bottom: 30px;
 padding: 15px 0;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 line-height: 1.7em;
 font-size: 13px;
}
.credit_shop li .recommend1::before,
.credit_shop li .recommend1::after {
	position: absolute;
	top: 95px;
	right: 52%;
	display: block;
	content: '';
	width: 18px;
	height: 3px;
	background: #2882d6;
	border-radius: 4px;
}
.credit_shop li .recommend1::before {
	margin-top: 0;
  margin-right: -11px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.credit_shop li .recommend1::after {
	margin-top: 0;
  margin-left: 0;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.credit_shop li .thumnail {
 height: 81px;
 text-align: center;
}
.credit_shop li .name {
 height: 45px;
 white-space: normal;
 margin: 10px 0 15px;
 line-height: 1.5em;
 font-size: 15px;
 color: #3b3b3b;
}
.credit_shop li a { text-decoration: none;}
.credit_shop li a img,
.credit_shop li a .name {
	transition: .2s linear;
	-webkit-transition: .2s linear;
	-moz-transition: .2s linear;
	-o-transition: .2s linear;
	-ms-transition: .2s linear;
}
.credit_shop li a img:hover { opacity: 0.6;}
.credit_shop li a:hover .name { color: #2882d6;}

.credit_shop li a.btn_detail {
 width: 100%;
 border: #dcad00 1px solid;
}