@charset "UTF-8";


/*///////////////////////////
reset Item
////////////////////////////*/

img { vertical-align: bottom; }
.txtOrangeB {
	color: #ff5400;
	font-weight: bold;
}
.txtBlue { color: #008cd0; }
.txtU { text-decoration: underline; }
.super {
	vertical-align: super;
	color: #000;
	font-size: 0.6em;
	font-weight: normal;
}


/* PC */
/*///////////////////////////
Base Item
////////////////////////////*/

.pc { display: block; }
.sp { display: none; }
@media screen and (max-width: 640px) {
	.pc { display: none; }
	.sp { display: block; }
}


h1 {
	font-size: 250%;
	text-align: center;
	margin-bottom: 2rem;
}
.jrep_headline {
	margin: 0 -15px 1.4em;
	padding: 0.2em;
	font-size: 160%;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #085eb4;
}
.jrep_h2_img {
	text-align: center;
	margin: 0 auto 1em;
}
.jrep_h2 {
	font-size: 180%;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1rem;
}

.ssimg,
.ssimg02 { width: 100%; max-width: 850px; }

/*重要なお知らせ*/
#main .importantInfo p span {
	color: #000000;
	font-size: 130%;
}

h4.txtBlue {
	font-size: 215.4%;
}

.main_img_spal {
	margin:3em 0 3em;
}

/*jrep_checkpoint*/
.jrep_checkpoint {
	border: 2px #085eb4 solid;
	border-radius: 6px;
	color: #085eb4;
	font-size: 1.6em;
	font-weight: bold;
	text-align: center;
	padding: 1em;
	margin-bottom: 3em;
}
.jrep_checkpoint dl {
	display: inline-block;
	text-align: left;
	line-height: 1.4;
}
.jrep_checkpoint dt {
	background: url(/card/point/pre/img/icon_star01.png) no-repeat left 0.2em;
	padding-left: 30px;
	margin-bottom: 0.5em;
}

.jrep_checkpoint dd {
	font-size: 0.65em;
	font-weight: normal;
	text-indent: -1em;
	margin-left: 1em;
	padding: 0 1em 0 1em;
	color: #000000;
}


.jrep_checkpoint li + li { margin-top: 0.6em; }



/*青ボタン*/
#main .section .blue_btn a {
	border-radius: 4px;
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 15px 20px 11px;
	border-bottom: 3px solid #0077B1;
	color: #FFF;
	background: #008CD0;
	position: relative;
	line-height: 1.3;
	font-size: 130%;
}

#main .section .blue_btn a:hover {
	background: #085EB4;
	border-bottom-color: #008CD0;
}

#main .section .blue_btn a:before {
	background: transparent url(/card/common/img/cmn-parts.png) no-repeat scroll -52px 0px;
	display: block;
	content: "";
	height: 16px;
	position: absolute;
	left: 25px;
	top: 50%;
	width: 10px;
	margin: -8px 0px 0px;
}
#main .section .blue_btn.blank a {
	padding: 30px 20px 28px 36px;
}
#main .section .blue_btn.blank a:before {
	background-position: -265px -36px;
	width: 12px;
	height: 12px;
}

#main .section .blue_btn.registration a{
	width: 70%;
	margin: 0 auto;
	font-weight: bold;
	line-height: 1.5;
}
#main .section .blue_btn.registration a:before {
	display: inline-block;
	position: relative;
	left: -12px;
}


/*///////////////////////////
Contets
////////////////////////////*/
#main .content { padding-top: 3rem; }
#main #mainwrap + .content { padding-top: 0.4rem; }
#main .section + .section {
	margin-bottom: 4rem;
}

.jrep_comparison {
	display: flex;
	align-items: flex-start;
	margin: 3em auto 5em;
}
.jrep_comparison > div {
	width: 44%;
}
.jrep_comparison > div > div {
	padding: 20px 15px 15px;
	position: relative;
}
.jrep_comparison_before { position: relative; }
.jrep_comparison_before > div {
	background: #008cd0;
}
.jrep_comparison_after {
	margin-left: 12%;
}

.jrep_comparison_after > div { background: #00833e; }


.jrep_comparison_hlaf_g { position: relative; }
.jrep_comparison_hlaf_g {
	background: #00833e;
	padding: 15px 15px 7px !important;
}

.jrep_3times {
	background: #ffffde !important;
	border: solid 3px #ABCF35;
}

.jrep_3times:after { 
	background-image: url(/card/caution/change/img/icon_3times.png); 
}


.jrep_comparison_hlaf_b { position: relative; }
.jrep_comparison_hlaf_b {
	background: #008cd0;
	padding: 1px 15px 15px !important;
	position: relative;
}

.jrep_comparison_hlaf_g .jrep_comparison_icon {
    width: 13em;
    margin-left: -6.5em;
    color: #000;
    font-size: 1.4em;
    border-color: #00833e;
    top: -0.8em;
}

.jrep_comparison_after {
	margin-left: 12%;
}



.jrep_comparison_icon {
	position: absolute;
	top: -1em;
	left: 50%;
	
	font-weight: bold;
	text-align: center;
	background: #fff;
	border: 2px #008cd0 solid;
	border-radius: 1em;
}
.jrep_comparison_before .jrep_comparison_icon {
	width: 13em;
	margin-left: -6.5em;
	color: #008cd0;
	font-size: 1.4em;
}
/*210204
.jrep_comparison_before .jrep_comparison_icon {
	width: 7em;
	margin-left: -3.5em;
	color: #008cd0;
	font-size: 1.2em;
}
*/
.jrep_comparison_after .jrep_comparison_icon {
	width: 13em;
	margin-left: -6.5em;
	color: #000;
	font-size: 1.4em;
	border-color: #00833e;
	top: -0.8em;
}

.jrep_comparison > div > div > dl {
	background: #fff;
	margin-top: 0.6em;
	border-radius: 6px;
}

.jrep_comparison > div > div > dl > dt {
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	padding: 0.4em;
	border-bottom: 1px #008cd0 dashed;
}
.jrep_comparison > div > div > dl > dt img {
	width: auto;
	vertical-align: text-bottom;
}
.jrep_comparison > .jrep_comparison_after > div > dl > dt { border-color: #00833e; }

.jrep_comparison > div > div > dl > dd {
	padding: 1em;
	display: flex;
	align-items: center;
}
.jrep_comparison > div > div > dl > dd img {
	width: 70px;
	margin-right: 1em;
}
.jrep_comparison_txt { width: 100%; }
img + .jrep_comparison_txt { width: auto; }

.jrep_new,
.jrep_3times,
.jrep_same {
	border: 3px #ff5400 solid;
	position: relative;
	margin-top: 40px;
	background: #ffffde;
}
.jrep_3times { border-color: #ABCF35; }
.jrep_comparison .jrep_comparison_after .jrep_same { border: none; background: #fff; }


.jrep_comparison .jrep_comparison_after .jrep_new dt {
	font-size: 1.1rem;
	border-bottom: 2px #ff5400 dashed;
	padding: 0.4em 1em;
}
/*.jrep_comparison .jrep_comparison_after .jrep_new:before,
.jrep_3times:before,
.jrep_comparison .jrep_comparison_after .jrep_same:before {
	content: url(../img/icon_plus01.png);
	margin-left: -10px;
	position: absolute;
	left: 50%;
	top: -32px;
}*/
.jrep_comparison .jrep_comparison_after dl:first-of-type { margin-top: 0.6em; }
.jrep_comparison .jrep_comparison_after dl:first-of-type:before { display: none; }


.jrep_comparison .jrep_comparison_after .jrep_new:after,
.jrep_3times:after,
.jrep_comparison .jrep_comparison_after .jrep_same:after {
	content: "";
	width: 76px;
	height: 83px;
	background: url(/card/caution/change/img/icon_new.png) no-repeat right top;
	
	position: absolute;
	right: -52px;
	top: -42px;
}
.jrep_3times:after,
.jrep_3times:after {
	background-image: url(/card/caution/change/img/icon_3times.png); 
	position: absolute;
}
.jrep_comparison .jrep_comparison_after .jrep_same:after { background-image: url(/card/caution/change/img/icon_same.png); }

.jrep_comparison_before:after{
	content: "";
	width: 66px;
	height: 60px;
	background: url(/card/caution/change/img/icon_arrow01.png) no-repeat center center;

	position: absolute;
	right: -22%;
	top: 50%;

	margin-top: -24px;
}

.after_arrow {
	position: relative;
}

.after_arrow:after {
    content: "";
    width: 66px;
    height: 60px;
    background: url(/card/caution/change/img/icon_arrow01.png) no-repeat center center;
    position: absolute;
    right: -22%;
    top: 50%;
    margin-top: -24px;
}



.qaListWrap {
	margin: 30px 0 0;
	padding: 0 0 19px;
	border: 1px solid #cce8f6;
	position: relative;
}
.qaListWrap:after {
	content: "";
	width: 120px;
	height: 5px;
	background: #008cd0;
	position: absolute;
	left: 19px;
	top: -1px;
}
.qaListWrap dt {
	padding: 28px 20px 22px 50px;
	position: relative;
}
.qaListWrap dt .icon {
	position: absolute;
	left: 19px;
	top: 29px;
}
.qaListWrap dd {
	padding: 20px 20px 15px 55px;
	position: relative;
	background: #f0f8fc;
}
.qaListWrap dd .icon {
	position: absolute;
	left: 19px;
	top: 20px;
}

/*吹き出し*/

.balloon_box .card_headline {
    background: #e6f2f8;
    color: #000000;
    margin: 0 0 30px;
    padding: 8px 10px 7px 35px;
    font-size: 150%;
}

.balloon_box_inner {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.0em;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #ffffff;
  font-size: 16px;
  background: #008cd0;
  border: solid 3px #008cd0;
  box-sizing: border-box;
}

.balloon_box_inner:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #008cd0;
  z-index: 2;
}

.balloon_box_inner:after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #008cd0;
  z-index: 1;
}

.balloon_box_inner p {
	margin: 0;
	padding: 0;
}
/*newアイコン*/

.new_icon::after {
    content: "NEW";
    background: #dd271c;
    color: #fff;
    padding: 0.2em 0.4em 0.2em;
    margin-left: 10px;
    border-radius: 3px;
    font-size: 0.7em;
    font-weight: bold;
	position: relative;
}



/* SP landscape */
@media screen and (max-width: 1034px) and (min-width: 641px){
	.jrep_headline { margin-right: -2%; margin-left: -2%; }
	.jrep_comparison .jrep_comparison_after .jrep_new dt { padding-right: 60px; }
	.jrep_comparison .jrep_comparison_after .jrep_new:after,
	.jrep_3times:after,
	.jrep_comparison .jrep_comparison_after .jrep_same:after { right: -15px; }
}
@media screen and (max-width: 949px) and (min-width: 641px){
	/*///////////////////////////
	Contets
	////////////////////////////*/
	#main .content {
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
	}

	#main .toTop { right: 2%; }
}

@media screen and (max-width: 640px) {
	/*///////////////////////////
	Base Item
	////////////////////////////*/
	.jrep_headline { margin: 0 -2% 1.4em; }
	.jrep_h2_img { max-width: 120px; }
	.jrep_h2 { font-size: 140%; }
	#main .section .blue_btn.registration a{ width: 100%; }
	
	.ssimg { max-width: 319px; }
	.ssimg02 { max-width: 420px; }
	
	/*///////////////////////////
	Contets
	////////////////////////////*/
	#main .content { padding-top: 1rem; }
	
	.jrep_comparison {
		display: block;
		margin: 0;
	}
	.jrep_comparison > div {
		width: 100%;
		margin: 3em auto 2em;
	}
	.jrep_comparison_after { margin-top: 90px !important; }
	
	.jrep_comparison_before { padding-top: 20px !important; }
	.jrep_comparison_before:after {
		background-size: 80%;
		transform: rotate(90deg);
		top: auto;
		left: 50%;
		bottom: -66px;
		margin-left: -33px;
	}
	.after_arrow{ padding-top: 20px !important; }
	.after_arrow:after {
		background-size: 80%;
		transform: rotate(90deg);
		top: auto;
		left: 50%;
		bottom: -66px;
		margin-left: -33px;
	}
	.jrep_comparison .jrep_comparison_after .jrep_new dt,
	.jrep_3times dt,
	.jrep_comparison .jrep_comparison_after .jrep_same dt { padding-right: 35px; }
	.jrep_comparison .jrep_comparison_after .jrep_new:after,
	.jrep_3times:after,
	.jrep_comparison .jrep_comparison_after .jrep_same:after {
		background-size: 80%;
		right: -25px;
		top: -25px;
	}
	.jrep_comparison .jrep_comparison_after .jrep_same:after { right: -23px; }
	
	.cardlist { text-align: center; }
	.cardlist img {
		width:100%;
		max-width: 330px;
	}

}

/*カード詳細　表*/

.CardDetailWrap {
    border: 20px solid #f5f5f5;
    padding: 30px;
}

.cardDetailTable {
	width: 100%;
}
.cardDetailTable th {
	width: 244px;
	background: #f3fbff;
	padding: 14px 15px;
	border: 1px solid #ccc;
}
.cardDetailTable td {
	padding: 14px 15px;
	border: 1px solid #ccc;
}
.cardDetailTable td img {
	vertical-align: middle;
}

.cardNotes li {
	margin-bottom: 5px;
}


/*見出し*/

.title-1 {
	font-size: 180%;
}





/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/



/*
default.html
index.html
////////////////////////////*/
#mainwrap {
	width: 100%;
	padding: 3em 0 0;
	
	/* ie6-9 */
	background: url(../img/jrep01_bg02.jpg) repeat-x left top;
	
	/* ie10+ */
	background: url(../img/jrep01_bg01.png) no-repeat center 1em,
		-ms-linear-gradient( top, #008bd0, #ffffff );
	
	/* firefox */
	background: url(../img/jrep01_bg01.png) no-repeat center 1em,
		-moz-linear-gradient( top, #008bd0, #ffffff );
	
	/* safari, chrome */
	background: url(../img/jrep01_bg01.png) no-repeat center 1em,
		-webkit-linear-gradient( top, #008bd0, #ffffff );
	
	/* opera */
	background: url(../img/jrep01_bg01.png) no-repeat center 1em,
		-o-linear-gradient( top, #008bd0, #ffffff );

}
#mainwrap h1 {
	color: #fff;
	font-size: 2.8em;
}
#mainwrap h1 img {
	max-width: 361px;
	vertical-align: middle;
	margin: 0 10px;
}

.jrep_checkpoint {
	border: 2px #085eb4 solid;
	border-radius: 6px;
	color: #085eb4;
	font-size: 1.6em;
	font-weight: bold;
	text-align: center;
	padding: 1em;
}
.jrep_checkpoint ul {
	display: inline-block;
	text-align: left;
	line-height: 1.4;
}
.jrep_checkpoint li {
	background: url(../img/icon_star01.png) no-repeat left 0.2em;
	padding-left: 30px;
}
.jrep_checkpoint li + li { margin-top: 0.6em; }


@media screen and (max-width: 640px) {
	#mainwrap {
		padding-left: 2%;
		padding-right: 2%;
	}
	#mainwrap h1 { font-size: 2.2em; }
	#mainwrap h1 img { width: calc(100% - 20px); }
	#mainwrap .txt24 { font-size: 150%; }
	
	.jrep_checkpoint { font-size: 1.4em; }


	/*カード詳細　表*/
	
	.CardDetailWrap {
    border: 0 ;
    padding: 0;
	}
	.cardDetailTable th {
		width: 30%;
		background: #f3fbff;
		padding: 3%;
		border: 1px solid #ccc;
	}
	.CardDetailWrap img {
		width: 100%;
	}
	
	.CardDetailWrap .img {
		width: auto;
	}

	
	/*見出し*/

	.title-1 {
		font-size: 120%;
	}
	
	/*見出し文字サイズ*/
	h4.txtBlue {
		font-size: 140%;
	}

	
	#main .section + .section {
		margin-bottom: 1rem;
	}

}


/*
default.html
////////////////////////////*/
.jrep_cardlist { margin-top: 3em; }
.jrep_cardlist dl {
	background: #E2F1F9;
}
.jrep_cardlist dt {
	padding: 0.4em;
	color: #fff;
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	background: #008CD0;
}
.jrep_cardlist dd ul {
	display: flex;
	flex-wrap: wrap;
}
.jrep_cardlist dd li {
	width: 33.3%;
	padding: 1em;
}
.jrep_cardlist dd li a {
	display: block;
	padding: 1em;
	color: #333;
	font-weight: bold;
	text-decoration: none;
}
.jrep_cardlist dd li a:hover {
	background-color: #B5DDF1;
}





/*
index.html
////////////////////////////*/
.img_iimark { width: auto; height: auto; }
.jrep_mainimg { width: 100%; max-width: 640px; }
.jrep_point { display: flex; font-size: 240%; }
.jrep_point dl {
	width: 46%;
	border-radius: 6px;
	background: #f6f6f6;
}
.jrep_point dl:first-child { margin-right: 8%; }

.jrep_point dt,
.jrep_point dd { text-align: center; }
.jrep_point dt {
	padding: 0.2em;
	color: #fff;
	background: #008cd0;
	font-weight: bold;
	border-radius: 6px 6px 0 0;
}
.jrep_point dd {
	padding: 0.4em 0.2em 0.5em;
	font-size: 0.8em;
}

.jrep_point_kigen_image {
	background: #f0f8fc;
	padding: 2em 10px;
}


.jrep_process_list {
	margin: 1em auto;
	padding: 0.8em;
	background: #f0f8fc;
	font-size: 1.2rem;
	text-align: center;
}
.jrep_process_list ul {
	display: inline-block;
	text-align: left;
	margin-left: 1em;
}
.jrep_process_list li {
	list-style: disc;
}

.jrep_charge_lead {
	display: flex;
	align-items: center;
}
.jrep_charge_lead .pc { display: inline-block; }
.jrep_charge_lead .sp { display: none; }

.jrep_charge_lead > p:first-child { margin-right: 15px; }
.jrep_charge_lead > p.img_jrep img { width: 180px; }
.jrep_charge_lead > p.img_atm img { width: 90px; }
.jrep_charge_lead > p.img_ticketmachine img { width: 347px; }
.jrep_charge_lead > p.img_mobilesuica img { width: 200px; }

.jrep_charge_case {
	padding: 1.4rem;
	border: 2px #008cd0 solid;
	border-radius: 6px;
}

@media screen and (max-width: 640px) {
	.jrep_point { display: block; }
	.jrep_point dl {
		width: 100%;
		margin: 1em auto 0;
	}
	
	.jrep_process_list { width: 95%; }
	
	.jrep_charge_lead { display: block; }
	.jrep_charge_lead .pc { display: none; }
	.jrep_charge_lead .sp { display: inline-block; }
	.jrep_charge_lead > p:first-child {
		width: auto;
		margin-right: 0;
		margin-bottom: 15px;
		text-align: center;
	}
	.jrep_charge_lead > p.img_jrep img { width: 200px; }
	/*
	.jrep_charge_lead > p.img_atm img { width: 90px; }
	.jrep_charge_lead > p.img_ticketmachine img { width: 347px; }
	*/
	
	#point_kigen p.txt26.txtB { font-size: 140%; }
}



/*
point_charge.html
////////////////////////////*/
.jrep_rate {
	width: 50%;
	display: flex;
	font-size: 160%;
	margin: 2em auto;
	text-align: center;
}
.jrep_rate > * {
	width: 30%;
	margin-right: 2%;
	border: 2px #00833e solid;
	border-radius: 6px;
}
.jrep_rate dt {
	color: #fff;
	font-weight: bold;
	background: #00833e;
}
.jrep_rate dd {
	padding: 0.6em 0.1em;
	font-size: 1.2em;
}
.jrep_rate > *:last-child {
	width: 32%;
	margin: 0 0 0 4%;
	border: none;
	text-align: left;
}
.jrep_rate > *:last-child dt {
	color: #000;
	font-size: 1.2em;
	background: none;
	padding: 0.2rem 1rem 0;
}
.jrep_rate > *:last-child dd {
	color: #00833e;
	font-size: 1.6em;
	font-weight: bold;
	border-bottom: 4px #00833e dashed;
	padding: 0 1rem 0.6rem;
}
@media screen and (max-width: 949px) and (min-width: 641px){
	.jrep_rate { width: 60%; }
}
@media screen and (max-width: 640px) {
	.jrep_rate { width: 90%; }
}

.jrep_rate_etc {
	margin: 2em auto;
	padding: 2em;
	border: 4px #aace38 solid;
}
.jrep_rate_etc_block01 {
	display: flex;
	width: 90%;
	margin: 2em auto;
}
.jrep_rate_etc_block01 dl {
	width: 43%;
	border: 2px #00833e solid;
	border-radius: 6px;
	font-size: 169.2%;
	display: flex;
	align-items: center;
	position: relative;
}
.jrep_rate_etc_block01 dl:nth-child(2) { margin-left: 14%; }
.jrep_rate_etc_block01 dl:nth-child(2):before {
	display: block;
	width: 20px;
	height: 20px;
	content: "";
	background: url(../img/icon_plus02.png) no-repeat left top;
	
	position: absolute;
	top: 50%;
	left: -21%;
	margin-top: -10px;
}

.jrep_rate_etc_block01 dt {
	color: #fff;
	font-weight: bold;
	background: #00833e;
	width: 6em;
	padding: 1em;
	
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.jrep_rate_etc_block01 dd {
	flex-grow: 2;
}

.jrep_rate_etc_block02 {
	text-align: center;
	position: relative;
	margin-top: 60px;
}
.jrep_rate_etc_block02:before {
	display: block;
	content: "";
	width: 52px;
	height: 31px;
	background: url(../img/icon_arrow02.png) no-repeat left top;
	
	position: absolute;
	left: 50%;
	top: -30px;
	margin-left: -26px;
}
.jrep_rate_etc_block02 p {
	display: inline-block;
	padding: 1rem 2rem;
	font-size: 2em;
	font-weight: bold;
	border-bottom: 5px #00833e dashed;
}
.jrep_rate_etc_block02 p > img {
	width: 85px;
}





@media screen and (max-width: 949px) and (min-width: 641px){
	.jrep_rate_etc_block01 { width: 100%; }
}

@media screen and (max-width: 640px) {
	.jrep_rate_etc { padding: 1em; }
	.jrep_rate_etc_block01 {
		display: block;
		width: 90%;
	}
	.jrep_rate_etc_block01 dl { width: 100%; }
	.jrep_rate_etc_block01 dl:nth-child(2) { margin-left: 0; margin-top: 30px; }
	.jrep_rate_etc_block01 dl:nth-child(2):before {
		left: 50%;
		top: -27px;
		margin: 0 0 0 -10px;
	}
	
	.jrep_rate_etc_block02:before { top: -44px; }
	.jrep_rate_etc_block02 p { padding: 0 1rem; }
	.jrep_rate_etc_block02 p > .sp { display: inline-block; }
}




/*
number.html
////////////////////////////*/
.jrep_number_nav {
	display: flex;
	margin: 2em auto;
}
.jrep_number_nav li {
	margin-left: 4%;
	width: 22%;
}
.jrep_number_nav li:first-child { margin-left: 0; }
.jrep_number_nav li a {
	display: block;
	height: 100%;
	padding: 1em 0.4em 1.6em;
	color: #000;
	text-decoration: none;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	border: 1px #008cd0 solid;
	background: #fafafa;
	position: relative;
}
.jrep_number_nav li a:hover { background: #efefef; }
.jrep_number_nav li a:after {
	content: "";
	width: 13px;
	height: 8px;
	background: url(/card/common/img/icon-down01-arrow.png) no-repeat left top;
	position: absolute;
	margin: 0 0 0 -6px;
	left: 50%;
	bottom: 8px;
}

#details img { width: 100%; max-width: 850px; }
#card img { max-width: 400px; }

@media screen and (max-width: 640px) {
	.jrep_number_nav { flex-wrap: wrap; }
	.jrep_number_nav li {
		margin-left: 10px;
		margin-bottom: 10px;
		width: calc(50% - 5px);
	}
	.jrep_number_nav li:nth-child(2n-1) { margin-left: 0; }
}



/*
point_use.html
////////////////////////////*/
.jrep_point_nav {
	display: flex;
	margin: 2em auto;
}
.jrep_point_nav > * {
	display: block;
	width: 20%;
	margin-left: 15px;
	
	color: #000;
	text-decoration: none !important;
	text-align: center;
	border: 1px #008cd0 solid;
	background: #fafafa;
	
	position: relative;
}
.jrep_point_nav > *:first-child { margin-left: 0; }
.jrep_point_nav > *:after {
	content: "";
	width: 13px;
	height: 8px;
	background: url(/card/common/img/icon-down01-arrow.png) no-repeat left top;
	position: absolute;
	margin: 0 0 0 -6px;
	left: 50%;
	bottom: 8px;
}
.jrep_point_nav > *:hover { background: #efefef; }

.jrep_point_nav > *.jrep_new:before {
	content: "New";
	color: #fff;
	font-weight: bold;
	background: #a40000;
	margin-left: -1.5em;
	padding: 0.2em 0.5em;
	
	position: absolute;
	left: 50%;
	top: -1em;
}

.jrep_point_nav dt,
.jrep_point_nav dd.image { background: #fff; }
.jrep_point_nav > *:hover dt,
.jrep_point_nav > *:hover dd.image { background: #fafafa !important; }

.jrep_point_nav > *:hover dd { color: #008cd0; }

.jrep_point_nav > *.jrep_new dt,
.jrep_point_nav > *.jrep_new dd.image { background: #fffdda; }

.jrep_point_nav dt {
	color: #000;
	font-size: 1.1em;
	font-weight: bold;
	padding: 1em 1em 0
}
.jrep_point_nav dd.image { padding: 0.4em 0 1em; }
.jrep_point_nav dd.image img {
	width: auto;
	height: 60px;
}
.jrep_point_nav dd.text {
	font-size: 0.9em;
	padding: 0.6em 1em 2em;
	border-top: 1px #008cd0 dashed;
}

h3.jrep_new { padding-left: 4rem; position: relative; }
h3.jrep_new:before {
	font-size: 1rem;
	content: "New";
	color: #fff;
	font-weight: bold;
	background: #a40000;
	padding: 0.2em 0.5em;
	
	position: absolute;
	left: 0;
	top: 0.2rem;
}


.jrep_point_list {
	display: flex;
	align-items: flex-end;
	margin: -2em auto 2em;
}
.jrep_point_list > * {
	margin: 2em 0 0 2%;
	text-align: center;
}
.jrep_point_list > *:first-child { margin-left: 0 !important; }
.jrep_point_list dt {
	color: #008CD1;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 0.4em;
}
.jrep_point_list dd {
	border: 3px #008CD1 solid;
	border-radius: 6px;
}
.jrep_point_list dd img {
	width: 100%;
	border-radius: 3px;
}

.jrep_point_list.col2 > * { width: 49%; }
.jrep_point_list.col3 > * { width: 32%; }
.jrep_point_list.col4 > * { width: 22%; margin-left: 4%; }

#shop p img {
	width: 100%;
	max-width: 850px;
}

#items .jrep_fukidashi,
#point .jrep_fukidashi {
	display: inline-block;
	margin-bottom: 10px;
	padding: 0.2em 1.4em;
	
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #018CD1;
	border-radius: 6px;
	position: relative;
}
#items .jrep_fukidashi:after,
#point .jrep_fukidashi:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #018cd1 transparent transparent transparent;
	
	position: absolute;
	left: 20px;
	bottom: -8px;
}


@media screen and (max-width: 640px) {
	.jrep_point_nav { flex-wrap: wrap; }
	.jrep_point_nav > * {
		width: calc( 50% - 8px );
		margin-bottom: 15px;
	}
	.jrep_point_nav > *:nth-child(2n-1) { margin-left: 0; }
	
	.jrep_point_list { flex-wrap: wrap; }
	.jrep_point_list > * {
		width: 49% !important;
		margin-left: 2% !important;
	}
	.jrep_point_list > *:nth-child(2n-1) { margin-left: 0 !important; }
	
	#shop p img { max-width: 550px; }
}