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

	電話・インターネット投票 初めての方へ　JRAダイレクト

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



/* - 1.JRAダイレクトとは？
---------------------------------------------------------------------- */

/* ----- レイアウト ----- */

#direct_how1.unit > .grid > .cell.img { width: 200px; }
#direct_how1.unit > .grid > .cell.txt { padding-left: 30px; }

#direct_how2.unit > .grid > .cell.txt { padding-right: 30px; }
#direct_how2.unit > .grid > .cell.img { width: 346px; }

#direct_how4.unit > .grid > .cell.txt { padding-right: 30px; }
#direct_how4.unit > .grid > .cell.img { width: 250px; }



/* ----- ご利用可能なクレジットカードとは？ ----- */


/* ----- 2024/1 追記 ----- */
div.link_list.card_link {
	display: flex;
	flex-wrap: wrap;
}

div.link_list.card_link.center > div {
	float: none;
}
/* ----- 2024/1 追記 ここまで----- */

div.link_list.card_link.center > div > a > .wrap {
    display: table;
    margin: 0 auto;
    width: auto;
}
div.link_list.card_link.center > div > a > .wrap > .content {
	display: table-cell;
	vertical-align: middle;
}

div.link_list.card_link > div > a > .wrap > .content > .inner { display: table; }

div.link_list.card_link.center > div > a > .wrap > .content > .inner {
    display: table;
    margin: 0 auto;
    width: auto;
}

div.link_list.card_link > div > a > .wrap > .content > .inner > span {
    display: table-cell;
    vertical-align: middle;
}

div.link_list.card_link > div > a > .wrap > .content > .inner > span.icon {
    padding-right: 0.5em;
    color: #188542;
}

div.link_list.card_link > div > a > .wrap > .content > .inner > span.icon img { vertical-align: top; }



/* - 2.ご利用について
---------------------------------------------------------------------- */

/* ----- レイアウト ----- */

#direct_use1.unit > .grid > .cell.txt { padding-right: 30px; }
#direct_use1.unit > .grid > .cell.img { width: 346px; }

#direct_use4.unit > .grid > .cell.txt { padding-right: 30px; }
#direct_use4.unit > .grid > .cell.img { width: 346px; }

#direct_use5.unit > .img { text-align: center; }

/* ----- 表 ----- */

#direct_use2.unit table.basic tbody > tr > td span.block { display: block; }



/* - 3.ご利用可能なクレジット
---------------------------------------------------------------------- */

#direct_card1 > .card_block { overflow: hidden; }


/* ----- 2024/1 flex追記 ----- */
#direct_card1 > .card_block > .card_line {
	margin-right: -15px;
	display: flex;
	flex-wrap: wrap;
}

#direct_card1 > .card_block > .card_line:after {
	content: '';
	display: block;
	clear: both;
}



#direct_card1 > .card_block > .card_line > li {
	float: none;
	width: 25%;
	margin-top: 20px;
	padding-right: 15px;
}

#direct_card1 > .card_block > .card_line > li > a {
	display: block;
	text-decoration: none;
}

#direct_card1 > .card_block > .card_line > li > a > .unit > h4 {
	background-color: #1b521f;
	color: #FFF;
	padding: 6px 12px;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}

#direct_card1 > .card_block > .card_line > li > a > .unit > .content {
	padding: 19px;
	border: 1px solid #e0e0e0;
	border-top: none;
	display: table;
	width: 100%;
	text-align: center;
}

#direct_card1 > .card_block > .card_line > li > a > .unit > .content > .inner {
	display: table-cell;
	vertical-align: middle;
}

#direct_card1 > .card_block > .card_line > li > a > .unit > .content > .inner > .opt {
	font-size: 1.2rem;
	color: #333;
	margin-top: 10px;
}

#direct_card1 > .card_block > .card_line > li > a > .unit > .content > .inner img {
	vertical-align: top;
	max-width: 100%;
}

#direct_card1 > .card_block > .card_line > li > a > .unit > .btn {
	background-color: #eaeaea;
	border: 1px solid #e0e0e0;;
	border-top: none;
	padding: 9px;
	text-align: center;
}

#direct_card1 > .card_block > .card_line > li > a > .unit > .btn .inner {
	background-color: #fff;
	padding: 7px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	text-align: center;
	display: block;
	border-radius: 4px;
	font-weight: bold;
	font-size: 1.4rem;
	color: #06a;
}

.no-touch #direct_card1 > .card_block > .card_line > li > a:hover > .unit > .btn .inner { background-color: #fff8e1; }

#direct_card1 > .card_block > .card_line > li > a > .unit > .btn .inner i {
	margin-right: 0.4em;
	color: #188542;
}

ul.note_list.wide > li { margin-top: 10px; }


/* ----- カード詳細　ページナビ ----- */

#card_nav { margin-bottom: 10px; }

#card_nav > ul {
	display: table;
	table-layout: fixed;
	width: 100%;
	background-color: #ebebeb;
	padding: 3px;
}

#card_nav > ul > li {
	display: table-cell;
	padding: 3px;
	vertical-align: middle;
	text-align: center;
}

#card_nav > ul > li > a {
	text-decoration: none;
	color: #555;
	font-weight: bold;
	display: block;
	background-color: #FFF;
	font-size: 1.1rem;
	padding: 5px;
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.no-touch #card_nav > ul > li > a:hover { 
	background-color: #fff8e1;
}

#card_nav > ul > li.current > a {
	background-color: #128749;
	color: #fff;
	font-weight: bold;
}

.no-touch #card_nav > ul > li.current > a:hover {
	background-color: #128749;
}


#card_nav > ul > li > a i { margin-right: 0.4em; color: #188542; }
#card_nav > ul > li.current > a i { color: #FFF; }
#card_nav > ul > li > a i.fa-chevron-circle-down { display: none; }
#card_nav > ul > li.current > a i.fa-chevron-circle-right { display: none; }
#card_nav > ul > li.current > a i.fa-chevron-circle-down { display: inline; }


/* ----- カード登録ボタンエリア ----- */

.unit.card_detail > .grid > .cell.txt { padding-right: 40px; }
.unit.card_detail > .grid > .cell.touroku { width: 300px; }

.touroku_unit > a { display: block; text-decoration: none; }

.touroku_unit > a > .content {
	padding: 50px 20px;
	border: 1px solid #e0e0e0;
	text-align: center;
}

.touroku_unit > a > .content img { vertical-align: top; }

.touroku_unit > a > .content > ul { display: inline-block; }
.touroku_unit > a > .content > ul > li { display: inline-block; }

.touroku_unit > a > .btn {
	background-color: #eaeaea;
	border: 1px solid #e0e0e0;;
	border-top: none;
	padding: 8px;
	text-align: center;
}

.touroku_unit > a > .btn > .inner {
	background-color: #fff;
	padding: 7px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	text-align: center;
	display: table;
	width: 100%;
	border-radius: 4px;
	font-weight: bold;
	font-size: 1.2rem;
	color: #06a;
	color: #555;
}

.no-touch .touroku_unit > a:hover > .btn > .inner { background-color: #fff8e1; }

.touroku_unit > a > .btn > .inner i {
	margin-right: 0.4em;
	color: #188542;
}


/* ----- カード背面　あり ----- */

.unit.card_back  > .grid > .cell.txt { padding-right: 30px; }
.unit.card_back > .grid > .cell.img { width: 420px; }


/* ----- UCカード ----- */

#direct_uc1.unit > .grid > .cell.touroku { width: 360px; }

/* ----- 楽天カード ----- */

#direct_rakuten1.unit > .grid > .cell.touroku { width: 340px; }


/* - JRAダイレクト　利用者登録
---------------------------------------------------------------------- */

#direct_kanyu1.unit > .caution ul.note_list > li > span.cap i { margin-right: 0.4em; }

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

	979px以下

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

@media screen and ( min-width : 955px ) {
	
	#direct_how2.unit > .grid > .cell.txt.pr0 { padding-right: 0; }


}
/* ------------------------------------------------------------

	979px以下

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

@media screen and ( max-width : 979px ) {
	
	#card_nav > ul > li > a {
		padding: 3px;
	}

}


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

	767px以下

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

/* - JRAダイレクトとは？
---------------------------------------------------------------------- */

/* ----- レイアウト ----- */

@media screen and ( max-width : 767px ) {

/* - 1.JRAダイレクトとは？
---------------------------------------------------------------------- */

/* ----- レイアウト ----- */
	
	#direct_how1.unit > .grid > .cell.img { width: auto; }
	#direct_how1.unit > .grid > .cell.txt {
		padding-left: 0;
		margin-top: 30px;
	}
	
	#direct_how2.unit > .grid > .cell.txt { padding-right: 0; }
	#direct_how2.unit > .grid > .cell.img {
		width: 100%;
		margin-top: 20px;
}
	
	#direct_how4.unit > .grid > .cell.txt { padding-right: 0; }
	#direct_how4.unit > .grid > .cell.img {
		width: 100%;
		margin-top: 20px;
}
	
	/* ----- ご利用可能なクレジットカードとは？ ----- */
	
	div.link_list.multi.div4.card_link > div { width: 33.33% }


/* - 2.ご利用について
---------------------------------------------------------------------- */

/* ----- レイアウト ----- */

	#direct_use1.unit > .grid > .cell.txt { padding-right: 0; }
	#direct_use1.unit > .grid > .cell.img {
		width: 100%;
		margin-top: 20px;
	}
	
	#direct_use4.unit > .grid > .cell.txt { padding-right: 0; }
	#direct_use4.unit > .grid > .cell.img {
		width: 100%;
		margin-top: 20px;
	}
	
/* - 3.ご利用可能なクレジット
---------------------------------------------------------------------- */

	#direct_card1 > .card_block > .card_line > li > a > .unit > .content {
		padding: 14px;
}



/* ----- カード詳細　ページナビ ----- */


	#card_nav > ul {
		display: block;
		padding: 3px;
	}
	
	#card_nav > ul:after { 
		content: '';
		display: block;
		clear: both;
	}

	#card_nav > ul > li {
		display: block;
		float: left;
		padding: 3px;
		width: 25%;
	}
	
	#card_nav > ul > li > a { 
		padding: 7px;
	}


/* ----- カード登録ボタンエリア ----- */

	.unit.card_detail > .grid > .cell.txt { padding-right: 0; }
	.unit.card_detail > .grid > .cell.touroku {
		width: 100%;
		margin-top: 20px;
	}
	
	.touroku_unit > a > .btn > .inner {
		padding: 10px;
		font-size: 1.3rem;
	}

/* ----- カード背面 ----- */

	.unit.card_back  > .grid > .cell.txt { padding-right: 0; }
	.unit.card_back  > .grid > .cell.img {
		width: 100%;
		margin-top: 30px;
	}
	
/* ----- UCカード ----- */

	#direct_uc1.unit > .grid > .cell.touroku { width: 100%; }
	
/* ----- 楽天カード ----- */

	#direct_rakuten1.unit > .grid > .cell.touroku { width: 100%; }

}


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

	639px以下

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

/* - 購入方法
---------------------------------------------------------------------- */

@media screen and ( max-width : 639px ) {

	/* ----- ご利用可能なクレジットカードとは？ ----- */

	div.link_list.multi.div4.card_link > div { width: 50% }


/* - 3.ご利用可能なクレジット
---------------------------------------------------------------------- */

	#direct_card1 > .card_block > .card_line > li { width: 33.33%; }

}

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

	479px以下

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


@media screen and ( max-width : 479px ) {
	
/* - JRAダイレクトとは？
---------------------------------------------------------------------- */

	#direct_how1.unit > .grid > .cell.txt > h3.welcome_intro > span.block { display: inline; }
	
	
	/* ----- ご利用可能なクレジットカードとは？ ----- */
	
	div.link_list.center.card_link > div > a { text-align: center; }
	div.link_list.multi.div4.card_link > div { float: left; }
	div.link_list.card_link  > div > a { font-size: 1.3rem; padding: 10px 7px; }
	div.link_list.multi > div > a span.opt.opt-xs { font-size: 1.0rem; }

/* - 3.ご利用可能なクレジット
---------------------------------------------------------------------- */

	#direct_card1 > .card_block > .card_line > li { width: 50%; }


/* ----- カード詳細　ページナビ ----- */


	#card_nav > ul > li {
		width: 50%;
	}

}

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

	359px以下

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


@media screen and ( max-width : 359px ) {
	div.link_list.multi.div4.card_link > div {
		float: none;
		width: 100%;
	}
	
	div.link_list.center.card_link > div > a { text-align: left; }
	div.link_list.card_link  > div > a { padding: 10px; }
	div.link_list.card_link.center > div > a > .wrap { margin: 0; }


}