@charset "UTF-8";

/*----------------------------------------------------
  01-取引コストが安い
----------------------------------------------------*/

table.spread {
	border-collapse: collapse;
	border-spacing: 0;
}

.table {
	margin: 0 -15px;
}
@media (min-width: 768px) {
.table {margin: 0 -25px;}
}

.table_wrapper {width: 100%;}

@media (max-width: 768px) {
.table_wrapper {position: relative;padding-left: 202px;box-sizing: border-box;}
}

.table_wrapper table {
	table-layout: fixed;
	width: 100%;
}

.table_wrapper table th, .table_wrapper table td {
	white-space: nowrap;
	vertical-align: middle;
	box-sizing: border-box;
	text-align: left;
}
.table_wrapper table th {
	background-color:#fff;
	text-align: center;
	padding: 10px 0;
	font-size:3rem;
	font-weight:100;
}
@media (max-width: 768px) {
.table_wrapper table th {font-size: 11px;}
}

.table_wrapper table td {
	padding: 20px 10px;
	text-align: center;
}
@media (max-width: 768px) {
.table_wrapper table td {padding: 10px 5px;}
}

.img_spread {
	width: 75%;
}
@media (max-width: 768px) {
	.img_spread {width: auto;}
}

/* Flag area */

.table_wrapper .base {
	float: left;
	width: 20%;
}
@media (max-width: 768px) {
.table_wrapper .base {position: absolute;top: 0;left: 0;width: 100px;margin-right: 1px;}
}
@media (max-width: 411px) {
.table_wrapper .base {position: absolute;top: 0;left: 0;width: 70px;margin-right: 1px;}
}

.table_wrapper .base th {
	border-top: 1px solid #0066ff;
	border-left: 1px solid #0066ff;
	border-bottom: 1px solid #0066ff;
}

.table_wrapper .base td {
	border-left: 1px solid #0066ff;
	border-bottom: 1px solid #0066ff;
	font-size:2rem;
	font-weight: bold;
	padding: 17px 20px 18px 20px;
	color: #343452;
	text-align:left;
}
@media (max-width: 1199px) {
.table_wrapper .base td {font-size:1.5rem;padding:19px 20px;}
}
@media (max-width: 991px) {
.table_wrapper .base td {font-size:1.5rem;padding:23px 25px 23px 7px;}
}
@media (max-width: 768px) {
.table_wrapper .base td {font-size: 12px;padding: 8px 5px 0;}
}
@media (max-width: 414px) {
.table_wrapper .base th {font-size:1rem;text-align:left;padding-left:5px;}
}

/* FX broadnet area */

.table_wrapper .fxbroad {
	float: left;
	width: 25%;
	margin: 0;
}

@media (max-width: 768px) {
.table_wrapper .fxbroad {position: absolute;top: 0;left: 100px;width: 130px;margin: 0;
} 
.table_wrapper .fxbroad table {table-layout: auto;}
}
@media (max-width: 414px) {
.table_wrapper .fxbroad {left: 71px;}
}

.table_wrapper .fxbroad th {
	backgroung: #fff;
	border-top: 4px solid #0066ff;
	border-left: 4px solid #0066ff;
	border-right: 4px solid #0066ff;
	border-bottom: 1px solid #0066ff;
	padding: 8px 0;
}

.table_wrapper .fxbroad td {
	border-left: 4px solid #0066ff;
	border-bottom: 1px solid #0066ff;
	border-right: 4px solid #0066ff;
	background: #fefacb;
	color: #000;
	font-size:5.5rem;
	font-weight: bold;
	padding: 6px 20px;
}

.table_wrapper .fxbroad tr:last-child td {
	border-bottom-width: 4px;
	padding-bottom: 4px;
	padding-left: 42px;
}
@media (max-width: 1199px) {
.table_wrapper .fxbroad th {padding: 8px 0 9px;}
.table_wrapper .fxbroad td {font-size: 4.5rem;padding:8px 3px;}
.table_wrapper .fxbroad tr:last-child td {padding-bottom:6px;padding-left:10px;}
}
@media (max-width: 768px) {
.table_wrapper .fxbroad th {padding: 7px 5px 8px;}
.table_wrapper .fxbroad td {font-size: 2rem;padding:11px 3px 9px;}
.table_wrapper .fxbroad tr:last-child td {padding-bottom: 7px;padding-left: 8px;}
}

/* Other company area */

.table_wrapper .other {
	float: left;
	width: 54.5%;
}
@media (max-width: 768px) {
.table_wrapper .other {position: relative;width: 100%;margin:0;padding-left:28px;}
}
@media (max-width: 414px) {
.table_wrapper .other {position: relative;width: 100%;margin:0;padding-left:0;}
}

.table_wrapper .other th {
	background-color:#fff;
	font-size: 3rem;
	background: #fff;
	border-top: 1px solid #3b6db8;
	border-right: 1px solid #3b6db8;
	border-bottom: 1px solid #3b6db8;
	padding: 10px 0;
	text-align:center;
	vertical-align:middle;
	width:11%;
}

.table_wrapper .other th:last-child {
	border-right-color: #3b6db8;
}

.table_wrapper .other td {
	background-color:#fff;
	border-right: 1px solid #3b6db8;
	border-bottom: 1px solid #3b6db8;
	font-size: 4rem;
	font-weight: bold;
	line-height:1;
	padding: 21px 0;
	vertical-align: middle;
	width: 11%;
}

@media (max-width: 1199px) {
.table_wrapper .other th {font-size: 3rem;}
.table_wrapper .other td {font-size: 3.6rem;padding: 21px 0 20px;}
}
@media (max-width: 991px) {
.table_wrapper .other td {padding: 21px 0 20px 15px;}
}
@media (max-width: 768px) {
.table_wrapper .other th {border-left: 1px solid #3b6db8;font-size: 2rem;padding: 7px 0;}
.table_wrapper .other td {font-size: 1.5rem;border-left: 1px solid #3b6db8;padding: 15px 0;}
.table_wrapper .other td:first-child {border-right-color: #3b6db8;}
}

.table_wrapper .other__contents {width: 100%;}

@media (max-width: 768px) {
.table_wrapper .other__contents {overflow: auto;} 
/*.table_wrapper .other__contents table {width: 300px;}*/
}
@media (max-width: 414px) {
td.tb-spread_fxt img {width:20%;height:auto;margin-right: 3px;}

.table_wrapper .other__contents {overflow: auto;} 
.table_wrapper .other__contents table {width: 300px;}
}

.other td.crown{
	background:url(../images/other_crown.png) no-repeat 15px center;
	background-size: 20px;
}
/*SP*/
td.pair img {vertical-align: bottom;width: 50%;margin-right: 3px;}
td.tb-spread_fxt img {vertical-align: bottom;width:20%;height:auto;margin-right: 3px;}
.other img {vertical-align: middle;width:20%;height:auto;margin:0;}
.tb-spread_logo img {width:100%;}
.ns {display: none;}

@media (max-width : 991px) { 
.other td.crown{background:url(../images/other_crown.png) no-repeat 10px center;background-size: 15px;}
}
@media (min-width : 769px) { 
td.pair img {vertical-align: bottom;width:30%;margin-right: 3px;}
td.tb-spread_fxt img {vertical-align: middle;width:50px;height:48px;margin:0 10px 5px 0;}
.other img {vertical-align: middle;width:30px;height:28px;margin:0 5px 5px 0;}
.tb-spread_logo img {width:81%;height: auto;}
td.pair {text-align:left;}
}
@media (max-width : 768px) { 
td.pair img {vertical-align: bottom;width:27%;margin-right: 3px;}
.ns {display: block;}
}

.table__note {margin-top: 10px;font-size: 50px;float:left;}

@media (min-width: 768px) {
.table__note {font-size: 50px;}
}

.sen {font-size: 0.5em;} 
.pips {font-size: 0.5em;font-weight: 800;}

/*----------------------------------------------------
  04-4,000円から取引可能!
----------------------------------------------------*/
table.deal { width: 100%;font-size:2.5rem;margin-bottom:30px;}
table.deal th, table.deal td { padding: 10px; border: 2px solid #ddd;border-collapse: collapse;border-spacing:0;vertical-align:middle;}
table.deal th { text-align:center;}
table.deal tr.sec01 { background:#fffbd3;color:#f08800;font-weight:bold;}
table.deal tr.sec02 { color:#15156d;font-weight:bold;}
table.deal td { text-align:right;line-height:1.2; }
table.deal td.tsuka { width: 15%; } 
table.deal td.free { background:#fff59d url(../images/img_star.png) no-repeat center; }
table.deal td.text-center,
table.deal td:first-child  { text-align:center;font-size:3rem;}
table.deal span.txt-black {color:#000;font-size:2.3rem;font-weight:normal;}
table.deal span.txt-m {font-size:3rem;}
th.two .ns,td.free .ns {display: none;}
table.deal span.txtL {font-size:5rem;}

@media only screen and (max-width: 768px) { /*tablet*/
h2#featuretop04 .ns,
th.two .ns,td.free .ns {display:inline;}
}

@media only screen and (max-width: 678px) {  /*sp*/
table.deal { width: 100%;font-size:1.5rem;margin-bottom:30px;}
table.deal th, table.deal td { padding: 10px; border: 2px solid #ddd;border-collapse: collapse;border-spacing:0;vertical-align:middle;}
table.deal th { text-align:center;}
table.deal tr.sec01 { background:#fffbd3;color:#f08800;font-weight:bold;}
table.deal tr.sec02 { color:#15156d;font-weight:bold;}
table.deal td { text-align:right;line-height:1.3; }
table.deal td.tsuka { width: 10%;font-size:1rem; } 
table.deal td.free { background:#fff59d url(../images/img_star.png) no-repeat center; }
table.deal td.text-center,
table.deal td:first-child  { text-align:center;font-size:2rem;}
table.deal span.txt-black {color:#000;font-size:1.8rem;font-weight:normal;}
table.deal span.txt-m {font-size:2rem;}
th.two .ns,td.free .ns {display: inline-block;}
img.deal-icon {width:70%;height:auto;}
}
@media only screen and (max-width: 414px) {  /*sp*/
table.deal { display: block;font-size:1.5rem;width: 100%; margin:0 0 30px 20px;}
table.deal th,
table.deal td { width:100%;height:45px;}
table.deal td.tsuka { width: 100%; }
table.deal thead{ display: block; float: left;}
table.deal th,table.deal td { padding: 5px; border: 1px solid #ddd;}
table.deal tbody{ display: block; font-size:0.5rem;width: auto; white-space: nowrap;}
table.deal th{ display: block;font-size:1.5rem;width:auto;}
table.deal tbody tr{ display: inline-block; margin: 0 -1px;}
table.deal td{ display: block;font-size:1rem;}
table.deal td.text-center,
table.deal td:first-child  {font-size:1.5rem;}
table.deal span.txt-black {color:#000;font-size:1.5rem;font-weight:normal;}
table.deal span.txt-m {font-size:1.5rem;}
table.deal span.txtL {font-size:1.4rem;}
img.deal-icon {display:none;}
table.deal td.deal-info {background: url(../images/img-deal-icon01.png) no-repeat left bottom;background-size:80px;}
table.deal td.deal-info2 {background: url(../images/img-deal-icon02.png) no-repeat left bottom;background-size:80px;}
th.two .ns,td.free .ns {display: none;}
table.deal span.smallM {font-size:0.5rem;color:#990000;}
}
@media only screen and (max-width: 384px) {
table.deal { display: block;font-size:1.5rem;width: 100%; margin:0 0 30px 0;}
}

@media only screen and (max-width: 320px) {
table.deal tbody{overflow: auto;}
}