/*
 *  felica-j / consumer / app / app.css
 *  created --- 2021/09/18
 *
 */

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

 *  created --- 2021/09/18

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

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

common

---------------------------------------------------------------*/
ul{
    list-style:none;
}
/* pc/sp switch */
img.sp{
	display: none;
}
@media screen and (max-width: 639px) {
img.pc{
	display: none;
}
img.sp{
	display: block;
}
}

.fade {
	transition: .3s ease-in-out;
}
.fade:hover {
	opacity: .5 !important;
	filter: alpha(opacity=60);
}

.idx_ttl{
	margin: 20px 0 30px;
	border-bottom: solid 2px #bfbfbf;
	font-size: 16px;
	line-height: 1.2;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: normal !important;
	position: relative;
	padding-bottom:6px;
}
@media screen and (max-width: 639px) {
.idx_ttl{
	font-weight:bold !important;
}
}



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

index

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

/* common
---------------------------------------------------------------*/
/* head */
.head_1st{
	line-height: 56px;
	margin:0 0 60px;
	font-size: 24px;
	text-align: center;
  }
  @media (max-width: 639px) {
	.head_1st{
	  line-height: 32px;
	  margin:35px 0;
	  font-size: 20px;
	  }
	}
.head_2nd{
  line-height: 1.2;
  margin-bottom:30px;
  padding-bottom:14px;
  text-align: center;
  font-size: 20px;
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  border-bottom: solid 2px #bfbfbf;
  position: relative;
}
  @media (max-width: 639px) {
	.head_2nd{
    font-size: 18px;
    margin-bottom: 30px;
    }
  }
/* btn */
.btn_app a{
	width:380px;
	padding: 10px 20px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #604c9a;
	display: block;
	box-sizing: border-box;
	position: relative;
}
@media screen and (max-width: 639px) {
	.btn_app a{
		width:auto;
	}
}
.btn_app a:after{
	content: "\e826";
	position: absolute;
	right: 4.3859649%;
	top: 50%;
	margin-top: -6.5px;
	font-size: 8px;
	font-family: "fontello";
	line-height: 13px;
}
.btn_app.wauto a{
	width:auto;
}
.btn_app.col_bl a{
	background: #145189;
}
/* jump */
img.jump{
	margin-left:5px;
}
/* kv
---------------------------------------------------------------*/
.main_visual{
	position:relative;
}
.main_visual > h2 img{
	width: 100%;
	vertical-align: bottom;
}
.main_visual .kv_wrap{
	width:100%;
	position:absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.kv_wrap .kv_catch{
	width: auto;
	margin:0 0 0 60%;
}
@media screen and (max-width: 1200px) {
	.kv_wrap .kv_catch{
		width:1190px;
		margin:0 0 0 60%;
	}
}
.kv_wrap .kv_catch dt{
	margin-bottom: 30px;
	font-size:24px;
	font-weight:bold;
}
.kv_wrap .kv_catch dd{
	font-size: 18px;
}
@media screen and (max-width: 639px) {
	.kv_wrap .kv_catch{
		width: auto;
		margin:0 0 0 50%;
	}
	.kv_wrap .kv_catch dt{
		margin-bottom: 10px;
		font-size:17px;
	}
	.kv_wrap .kv_catch dd{
		font-size: 12px;
	}
}
/* card_viewer
---------------------------------------------------------------*/
.card_viewer{
	padding:120px 15px 100px;
	background: #f1f5f9;
}
@media screen and (max-width: 639px) {
	.card_viewer{
		padding:20px 15px 50px;
	}
}
/* viewer_block */
.viewer_block{
	width:960px;
	margin:0 auto 70px;
	display: flex;
}
@media screen and (max-width: 639px) {
	.viewer_block{
		width:auto;
		margin:0 auto 40px;
		display: block;
	}
}
.viewer_block:last-of-type{
	margin:0 auto 0;	
}
.viewer_block li:first-child{
	flex:1;
}
@media screen and (max-width: 639px) {
	.viewer_block li:first-child{
		margin-bottom:30px;	
	}
}
.viewer_block li > h3{
	font-size: 24px;
}
@media screen and (max-width: 639px) {
	.viewer_block li > h3{
		font-size: 20px;
	}
}
.viewer_block .reader_list{
	margin-bottom:20px;	
}
.viewer_block .reader_list dt{
	margin-bottom:10px;
	font-size:14px;
}
.viewer_block .reader_list dd span{
	width:100px;
	margin-right: 12px;
	font-size:13px;
	font-weight: bold;
	text-align: center;
	color:#145189;
	border:2px #145189 solid;
	display:inline-block;
}
.viewer_block .reader_txt{
	margin-bottom:20px;
	font-size:14px;
}
.viewer_block li:last-child{
	width: 385px;
	text-align: right;
}
.viewer_block li:last-child img{
	max-width: 100%;
	vertical-align: bottom;
}
@media screen and (max-width: 639px) {
	.viewer_block li:last-child{
		width: auto;
		text-align: center;
	}
}
/* etax
---------------------------------------------------------------*/
.etax{
	width:960px;
	margin:0 auto;
	padding:120px 15px;
}
@media screen and (max-width: 680px) {
	.etax{
		width:auto;
	}
}
@media screen and (max-width: 639px) {
	.etax{
		padding:20px 15px;
	}
}
.etax img.imgetax{
	margin-right: 50px;
}
@media screen and (max-width: 639px) {
	.etax img.imgetax{
		margin-right:0;
	}
}
.etax .etax_txt{
	margin-top: 30px;
	font-size:13px;
}
.etax .etax_txt a{
	text-decoration: underline;
}
.etax .etax_txt a:hover{
	text-decoration: none;
}
/* emoney
---------------------------------------------------------------*/
.emoney{
	padding:120px 15px 100px;
	background: #f1f5f9;
}
@media screen and (max-width: 639px) {
	.emoney{
		padding:20px 15px 50px;
	}
}
.emoney .inner{
	width:960px;
	margin:0 auto 70px;
}
@media screen and (max-width: 639px) {
	.emoney .inner{
		width:auto;
		margin:0 auto 0px;
	}
}
.emoney_block{
	margin-bottom: 45px;
	justify-content: space-between;
	display: flex;
}
@media screen and (max-width: 639px) {
	.emoney_block{
		margin-bottom: 25px;
		display: block;
	}
}
.emoney_block li{
	width:47%;
	padding: 50px;
	box-sizing: border-box;
	background:#fff;
	display:flex;
	flex-direction: column;
}
@media screen and (max-width: 639px) {
	.emoney_block li{
		width:auto;
		padding: 30px;
		display:block;
		flex-direction: row;
	}
	.emoney_block li:first-child{
		margin-bottom: 30px;
	}
}
.handle{
	margin-bottom: 20px;
	justify-content: space-between;
	display: flex;
}
@media screen and (max-width: 639px) {
	.handle{
		margin-bottom: 0px;
	}
}
.handle li{
	margin:0;
	padding: 0;
}
.handle li:first-child{
	flex: 1;
}
@media screen and (max-width: 639px) {
	.handle li:first-child{
		margin-bottom: 15px;
	}
}
.handle li:first-child >h3{
	font-size: 20px;
}
.handle_list dt{
	margin-bottom:10px;
	font-size:14px;
}
.handle_list dd span{
	width:100px;
	margin-right: 12px;
	font-size:13px;
	font-weight: bold;
	text-align: center;
	color:#145189;
	border:2px #145189 solid;
	display:inline-block;
}
.handle_txt{
	margin-bottom:20px;
	font-size:16px;
}
.handle li:last-child{
	width:84px;
	margin-left:20px;
}
.handle_btn{
	margin-top: auto;
}
.handle_txt2{
	font-size:13px;
}
.handle_txt2 a{
	text-decoration: underline;
}
.handle_txt2 a:hover{
	text-decoration: none;
}
/* rel_block
---------------------------------------------------------------*/
.rel_block{
	padding: 60px 15px 30px;
}
@media screen and (max-width: 639px) {
	.rel_block{
		padding: 20px 15px 20px;
	}
}
/* rel_product */
.rel_product{
	justify-content: center;
	display: flex;
}
@media screen and (max-width: 639px) {
	.rel_product{
		display: block;
	}
}
.rel_product li{
	width:390px;
	margin:0 20px;
	padding: 25px;
	box-sizing: border-box;
	border:1px #bfbfbf solid;
	display: flex;
}
@media screen and (max-width: 639px) {
	.rel_product li{
		width:auto;
		margin:0;
	}
	.rel_product li:first-child{
		margin-bottom:30px;
	}
}
.rel_product li > h3{
	margin-right:30px;
}
@media screen and (max-width: 414px) {
	.rel_product li > h3{
		margin-right:15px;
	}
	.rel_product li > h3 img{
		width:80px;
	}
}
.rel_list{
	flex: 1;
}
.rel_list dt{
	margin-bottom: 10px;
	font-size:16px;
}
.rel_list dd.title{
	margin-bottom: 10px;
	font-size: 21px;
	font-weight: bold;
}
/*
/* rel_product2 */
.rel_product2{
	display: flex;
}
@media screen and (max-width: 639px) {
	.rel_product2{
		display: block;
	}
}
.rel_product2 li{
	width:390px;
	margin:0 20px;
	padding: 25px;
	box-sizing: border-box;
	border:1px #bfbfbf solid;
	display: flex;
}
@media screen and (max-width: 639px) {
	.rel_product2 li{
		width:auto;
		margin:0;
	}
	.rel_product2 li:first-child{
		margin-bottom:30px;
	}
}
.rel_product2 li > h3{
	margin-right:30px;
}
@media screen and (max-width: 414px) {
	.rel_product2 li > h3{
		margin-right:15px;
	}
	.rel_product2 li > h3 img{
		width:80px;
	}
}
/*
---------------------------------------------------------------

sfcardviewer_web

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

/* kv
---------------------------------------------------------------*/
.main_visual_sf{
	position:relative;
}
.main_visual_sf > h2 img{
	width: 100%;
	vertical-align: bottom;
}
.main_visual_sf .kv_wrap_sf{
	width:100%;
	padding:20px 0;
	position:absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.kv_wrap_sf .kv_catch_block{
	width:1250px;
	margin:0 auto;
	padding-left:60px;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	display: flex;
}
@media screen and (max-width: 639px) {
	.kv_wrap_sf .kv_catch_block{
		width:auto;
		margin:0 15px;
		padding-left:0px;
		align-items: normal;
	}
	.kv_wrap_sf .kv_catch_block li:first-child{
		flex:1;
	}
	.kv_wrap_sf .kv_catch_block li:last-child{
		width:30%;
		margin-left:30px;
	}
	.kv_wrap_sf .kv_catch_block li:last-child img{
		width:100%;
	}
}
@media screen and (max-width: 414px) {
	.kv_wrap_sf .kv_catch_block li:last-child{
		margin-left:10px;
	}
}
.kv_catch_block .sf_ttl{
	margin-bottom: 10px;
	font-size:26px;
}
.kv_catch_block .sf_ttl span{
	font-size: 16px;
	font-weight: normal;
	display:block;
}
@media screen and (max-width: 639px) {
	.kv_catch_block .sf_ttl{
		line-height:1.2;
		margin-bottom: 5px;
		font-size:18px;
	}
	.kv_catch_block .sf_ttl span{
		font-size: 13px;
	}
}
.sf_list{
	margin-bottom: 40px;
}
@media screen and (max-width: 639px) {
	.sf_list{
		margin-bottom: 20px;
	}
}
.sf_list span{
	width:100px;
	margin-right: 12px;
	font-size:13px;
	font-weight: bold;
	text-align: center;
	color:#145189;
	border:2px #145189 solid;
	display:inline-block;
}
@media screen and (max-width: 414px) {
	.sf_list span{
		width:80px;
		margin-right: 6px;
	}
}
.sf_item_list dt{
	font-size: 16px;
	font-weight: bold;
}
.sf_item_list dd{
	margin-bottom: 20px;
	font-size: 13px;
}
.sf_item_list dd a{
	color: #000;
	text-decoration: underline;
}
/* btn */
.btn_kv a{
	width:470px;
	padding: 20px 20px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #604c9a;
	display: block;
	box-sizing: border-box;
	position: relative;
}
.btn_kv span{
	width:470px;
	padding: 20px 20px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #604c9a;
	display: block;
	box-sizing: border-box;
	position: relative;
}
@media screen and (max-width: 639px) {
	.btn_kv a{
		width:auto;
		padding: 15px 15px;
		font-size: 13px;
	}
	.btn_kv span{
		width:auto;
		padding: 15px 15px;
		font-size: 13px;
	}
}
@media screen and (max-width: 414px) {
	.btn_kv a{
		padding: 15px 30px 15px 10px;
		font-size: 10px;
	}
	.btn_kv span{
		padding: 15px 30px 15px 10px;
		font-size: 10px;
	}
}
.btn_kv a:after{
	content: "\e826";
	position: absolute;
	right: 4.3859649%;
	top: 50%;
	margin-top: -6.5px;
	font-size: 8px;
	font-family: "fontello";
	line-height: 13px;
}
/* jump */
img.sf_jump{
	margin-left:5px;
}
@media screen and (max-width: 414px) {
	img.sf_jump{
		margin-left:2px;
	}
	img.sf_jump{
		width: 12px;
	}
}
/* sf_connect
---------------------------------------------------------------*/
.sf_connect{
	width:1190px;
	margin:130px auto 100px;
	padding-left:30px;
	box-sizing: border-box;
}
@media screen and (max-width: 639px) {
	.sf_connect{
		width:auto;
		margin:60px 15px 50px;
		padding-left:0px;
	}
}
.sf_connect_block{
	justify-content: space-between;
	display: flex;
}
@media screen and (max-width: 639px) {
	.sf_connect_block{
		display: block;
	}
}
.sf_connect_block li:first-child{
	font-size: 16px;
	flex: 1;
}
@media screen and (max-width: 639px) {
	.sf_connect_block li:first-child{
		margin-bottom: 30px;
	}
}
.sf_connect_block li:first-child code{
	font-size: 11px;
	vertical-align:top;
	display: inline-block;
}
.sf_connect_block li:first-child span{
	font-size: 13px;
	display: block;
}
.sf_connect_block li:last-child{
	width: 480px;
}
@media screen and (max-width: 639px) {
	.sf_connect_block li:last-child{
		width: auto;
		text-align: center;
	}
	.sf_connect_block li:last-child img{
		max-width: 100%;
	}
}
/* sf_card
---------------------------------------------------------------*/
.sf_card{
	width:1190px;
	margin:0px auto 0px;
	padding-left:30px;
	box-sizing: border-box;
}
@media screen and (max-width: 639px) {
	.sf_card{
		width:auto;
		margin:60px 15px 50px;
		padding-left:0px;
	}
}
.sf_card_block{
	margin-bottom: 80px;
	justify-content: space-between;
	display: flex;
}
@media screen and (max-width: 639px) {
	.sf_card_block{
		margin-bottom: 40px;
		display: block;
	}
}
.sf_card_block li:first-child{
	flex: 1;
}
@media screen and (max-width: 639px) {
	.sf_card_block li:first-child{
		margin-bottom: 30px;
	}
}
.sf_card_ttl{
	margin-bottom: 30px;
	font-size: 18px;
}
@media screen and (max-width: 639px) {
	.sf_card_ttl{
		margin-bottom: 20px;
	}
}
.sf_card_txt{
	margin-bottom: 10px;
	font-size: 16px;
}
.sf_card_txt img{
	max-width: 100%;
}
.sf_card_txt2{
	margin-bottom: 20px;
	padding-left:1em;
	text-indent:-1em;
	font-size: 13px;
}
.sf_card_txt3{
	padding-left:1em;
	text-indent:-1em;
	font-size: 13px;
}
.sf_card_block li:last-child{
	width: 480px;
}
@media screen and (max-width: 639px) {
	.sf_card_block li:last-child{
		width: auto;
		text-align: center;
	}
	.sf_card_block li:last-child img{
		max-width: 100%;
	}
}
/* btn */
.btn_sfcard a{
	width:530px;
	margin:0 auto;
	padding: 30px 20px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #604c9a;
	display: block;
	box-sizing: border-box;
	position: relative;
}
.btn_sfcard span{
	width:530px;
	margin:0 auto;
	padding: 30px 20px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #604c9a;
	display: block;
	box-sizing: border-box;
	position: relative;
}
@media screen and (max-width: 639px) {
	.btn_sfcard a{
		width:auto;
		padding: 30px 20px;
		font-size: 16px;
	}
	.btn_sfcard span{
		width:auto;
		padding: 30px 20px;
		font-size: 16px;
	}
}
@media screen and (max-width: 414px) {
	.btn_sfcard a{
		padding: 20px 20px;
		font-size: 14px;
	}
	.btn_sfcard span{
		padding: 20px 20px;
		font-size: 14px;
	}
}
.btn_sfcard a:after{
	content: "\e826";
	position: absolute;
	right: 4.3859649%;
	top: 50%;
	margin-top: -6.5px;
	font-size: 8px;
	font-family: "fontello";
	line-height: 13px;
}
/* sf_help_txt
---------------------------------------------------------------*/
.sf_help_txt{
	text-align: center;
	font-size:16px;
}
.sf_help_txt a{
	text-decoration: underline;
}
.sf_help_txt a:hover{
	text-decoration: none;
}

/* pickup
---------------------------------------------------------------*/
.pickup_cmn_block{
	list-style:none;
	flex-wrap: wrap;
	display:flex;
}
.pickup_cmn_block li{
	width:23%;
	margin-right:2.6%;
	margin-bottom:3.5%;
}
.pickup_cmn_block li:nth-child(4n){
	margin-right:0%;
}
@media screen and (max-width: 639px) {
.pickup_cmn_block li{
	width:48.5%;
	margin-right:2.6%;
}
.pickup_cmn_block li:nth-child(2n){
	margin-right:0%;
}
}
.pickup_cmn_block li a{
	display:block;
}
.pickup_cmn_list dt{
	margin-bottom:10px;
}
.pickup_cmn_list dt img{
	width:100%;
	vertical-align:bottom;
}
.pickup_cmn_list dd{
	text-align:center;
	color:#565656;
	font-size:15px;
	font-weight:bold;
}
@media screen and (max-width: 414px) {
.pickup_cmn_list dd{
	font-size:12px;
}
}
.pickup_cmn_list dd br.pc-none{
	display:none;
}
@media screen and (max-width: 414px) {
.pickup_cmn_list dd br.pc-none{
	display:block;
}
}