@charset "UTF-8";
/* window-size + 17px */


#container {
  margin: 0px auto 120px;
  width: 1000px;
}


@media screen and (max-width: 768px) {
  #container {
    margin: 20px auto 0px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0px 15px;
    width: 100%;
    
  }
}


#container .content_only {
    float: none;
    width: 100%;
    margin-bottom: 40px;
}


#chart-frame {
	width: 100%;
	height: 850px;
	min-width: 333px;
	max-width: 1000px;
}

@media screen and (max-width: 768px) {
	#chart-frame {
		height: 600px;
	}
}


.market_ttl{
	font-family: 'IBM Plex Sans JP', sans-serif;
	text-align:center;
	color:#001f7a;
	padding:3px 0 ;
	margin-bottom:30px;
	font-weight:800;
	white-space: nowrap;
	font-size: clamp(12px, 5vw, 300%);
}


@media screen and (max-width: 768px) {
.market_ttl{
	padding:5px;
	margin-bottom:15px;
}
}

.currency_report{
border:solid #777 1px ;
padding:5% 10%;
background:#fff;
}

@media screen and (max-width: 768px) {
.currency_report{
border:none;
padding:2%;
}
}

.currency_report .rate{
	width:100%;
	padding:1% 0;
	margin:1% auto;
	overflow:hidden;
}


.currency_report .rate .price_box01 .bid,
.currency_report .rate .price_box01 .ask{
	font-size:270%;
	float:left;
	width:38%;
	font-family:"IBM Plex Sans JP", sans-serif;
	font-weight:700;
}

.currency_report .rate .price_box01 .bid{
	color:#001f7a;
	text-align:right;
	padding-right:3%;
}

.currency_report .rate .price_box01 .ask{
	color:#cc0000;
	text-align:left;
	padding-left:3%;

}

.currency_report .rate .price_box01 .spread{
	font-size:150%;
	color:#fff;
	background:#555;
	padding:1%;
	float:left;
	width:12%;
	text-align:center;
	line-height:1.5;
	font-family:"IBM Plex Sans JP", sans-serif;
	font-weight:600;
}


@media screen and (max-width: 768px) {
.currency_report .rate .price_box01 .bid,
.currency_report .rate .price_box01 .ask{
	font-size:160%;
	width:38%;
}

.currency_report .rate .price_box01 .spread{
	font-size:90%;
	padding:1%;
	width:12%;
	text-align:center;
	line-height:1.8;
}
}

.currency_report .rate .price_box02 .high,
.currency_report .rate .price_box02 .low,
.currency_report .rate .price_box02 .day,
.currency_report .rate .price_box02 .ask_swap,
.currency_report .rate .price_box02 .bid_swap {
	float:left;
	font-size:100%;
	width:calc(99%/5);
	border-right:1px #ccc solid;
	text-align:center;
}

@media screen and (max-width: 768px) {
.currency_report .rate .price_box02 .high,
.currency_report .rate .price_box02 .low,
.currency_report .rate .price_box02 .day,
.currency_report .rate .price_box02 .ask_swap,
.currency_report .rate .price_box02 .bid_swap {
	font-size:80%;
	width:calc(98%/5);
}
}


.currency_report .rate .price_box02 .ask_swap {
	border:none;
}


.currency_report .rate .price_box02 .high span,
.currency_report .rate .price_box02 .low span,
.currency_report .rate .price_box02 .day span,
.currency_report .rate .price_box02 .ask_swap span,
.currency_report .rate .price_box02 .bid_swap span {
display:block;
font-weight:bold;
padding:1%;
}


.market_sort{
	background-color:#f8f8ff;
	padding:3% 1%;
}


.economic_nav_box {
	margin: 2% 0 0;
}

.economic_nav_box label {
	position:relative;
	display:inline-block;
	width:200px;
	height:36px;
	border:solid 1px #001f7a;
	border-radius:5px;
	background:#fff;
}

.economic_nav_box input[type="date"]{
	position:relative;
	padding:0 3px;
	width:200px;
	height:36px;
	border:0;
	background:transparent;
	box-sizing:border-box;
	font-size:14px;
	color:#001f7a;
}

.economic_nav_box .symbol {
	display:inline-block;
	margin: 1% 1% 0% 1%;
}

.economic_label{
	line-height: 2.5;
	margin-left:3%;
}


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

.economic_nav_box label {
	width:38%;

}

.economic_nav_box label:first-of-type {
	margin-left:7%;
}

.economic_nav_box input[type="date"]{
	width:90%;
}

.economic_nav_box .symbol {

	margin: 2% 0% 0% 0%;
}

.economic_nav_box .economic_label{
	display:block;
	margin-left:7%;
}
}



.market_nav_box{
	display:inline;
}


@media screen and (max-width: 768px) {
.market_nav_box{
	display:block;
	margin:2% 0;
}

}


.market_nav_box label {
	margin-right: 5px;
}

.market_nav_box label input {
	display: none;
}


.market_label{
	line-height: 2.5;
	margin-left:3%;
}

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

.market_label{
	margin-left:7%;
}
}



.economic_table {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  table-layout: fixed;
}

.economic_table th {
  border: 1px solid #aaa;
  border-collapse: collapse;
  padding: 5px;
  background: #001f7a;
  color: #fff;
  font-weight: bold;
  font-size: 100%;
  text-align:center;
}



.economic_table td {
  padding: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #aaa;
  font-size: 100%;
  border-collapse: collapse;
  text-align:center;
  vertical-align:middle;
}

.economic_table .star span{
display:none;
}


.economic_table .star3 .star {
color:#cc0000;
}


.economic_table td.name {
text-align:left;
}

.economic_table .star3 td.date,
.economic_table .star3 td.star,
.economic_table .star3 td.name,
.economic_table .star3 td.value {
font-weight:bold;
color:#cc0000;
}


.economic_table td.value {
width:33%;

}


.economic_table .star2 .country,
.economic_table .star3 .country {
font-size:85%;
line-height:1.7;
text-align:left;
padding-left:1%;
}

.economic_table .star2 .country img,
.economic_table .star3 .country img{
padding-right:3%;
height:20px;
}




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


.economic_table .thead{
display:none;
}


.economic_table .star span{
display:inline;
}


.economic_table td {
  text-align:left;
  padding:1%;
}

.economic_table .star3 td.date,
.economic_table .star3 td.value {
font-weight:normal;
color:#000;
}




.economic_table .star2 .date,
.economic_table .star3 .date {
display:inline-block;
vertical-align:middle;
font-size:110%;
width:17%;
padding:2% 0 0 2%;
}


.economic_table .star2 .country,
.economic_table .star3 .country {
display:inline-block;
width:48%;
padding:1% 0;
font-size:90%;
vertical-align:middle;
padding-top:3%;
line-height:1.7;

}

.economic_table .star2 .country img,
.economic_table .star3 .country img{
display:inline-block;
padding-right:3%;
height:20px;
}



.economic_table .star2 .star,
.economic_table .star3 .star {
display:inline-block;
vertical-align:middle;
font-size:100%;
text-align:right;
width:32%;
padding-top:2%;
font-weight:normal!important;
}



.economic_table .star2 .name,
.economic_table .star3 .name {
display:block;
width:99%;
padding-left:2%;
font-size:110%;
color:#000!important;
}



.economic_table .sp{
display:block;
padding: 5px;
background: #001f7a;
color: #fff;
font-weight: bold;
text-align:center;
font-size:90%;
}


.economic_table tr {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 1px solid #aaa;
  font-size: 100%;
  border-collapse: collapse;
  text-align:left;
  vertical-align:middle;
}


.economic_table td {
border:none;
}


.economic_table td.value {
display:inline-block;
width:33%;
vertical-align:top;
text-align:center;
font-weight:normal;
color:#000;
}

.economic_table td.value p {
padding:5px;

}



}


.period span {
	color: #001f7a; 
	border: 1px solid #001f7a; 
	border-radius: 20px; 
	padding: 5px 0;
	width:100px;
	display:inline-block;
	text-align:center;
	background-color:#fff;
	line-height:1.5;
}

.period input:checked + span{
	color: #FFF;
	background: #001f7a; 
}

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

.period span {
padding: 5px 0;
width:110px;
font-size:85%;
}
}

.notes_box{
	background-color:#f8f8ff;
	padding:3%;
	color:#000;
	margin:3% 0;
}

.notes_box p{
	font-size:85%;
}

.morebtn{
	background-color:#001f7a;
	color:#fff;
	padding:1% 3%;
	text-align:center;
	font-size:120%;
	border-radius:10px;
	text-decoration:none;
	width:250px;
	margin:3% auto;
	display:block;
}

a.morebtn:link {
	color:#fff;
	text-decoration:none;
}

.morebtn:hover{
	color:#fff;
	text-decoration:none;
	background-color:#5560d4;
}



@media screen and (max-width: 768px) {
.morebtn{
	padding:3% 0%;
	font-size:100%;
	width:80%;
}
}

.quantity{
	position:relative;
}


.quantity::before,
.quantity::after{
	position:absolute;
	content:'';
	pointer-events:none;
}

.quantity::before{
	right:0;
	display:inline-block;
	width:2.8em;
	height:2.8em;
	border-radius:0 3px 3px 0;
	background-color:#001f7a;
	content:'';
}

.quantity::after{
	position:absolute;
	top:50%;
	right:1.4em;
	transform:translate(50%,-50%) rotate(45deg);
	width:6px;
	height:6px;
	border-bottom:3px solid #fff;
	border-right:3px solid #fff;
	content:'';
}

.quantity select{
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	min-width:230px;
	height:2.8em;
	padding: .4em 3.6em .4em .8em;
	border:2px solid #001f7a;
	color:#333;
	font-size:1em;
	cursor:pointer;
}


@media screen and (max-width: 768px) {
.quantity select{
	height:2.5em;
	margin-bottom:2%;
}

.quantity::before{
	width:2.5em;
	height:2.5em;
}

.quantity::after{
	right:1.2em;
}
}


.market_rate{
width:100%;
overflow:hidden;
}

.rate_title .box01,
.rate_title .box02 .bid,
.rate_title .box02 .ask,
.rate_title .box02 .spread,
.rate_title .price_box02 .high,
.rate_title .price_box02 .low,
.rate_title .price_box02 .day,
.rate_title .price_box03 .ask_swap,
.rate_title .price_box03 .bid_swap{
	float:left;
	border: 1px solid #b3b8e6;
	border-left:none;
	border-bottom:none;
	padding:2% 0;
	width:9%;
	text-align:center;
	background:#001f7a;
	font-weight:bold;
	color:#fff;
}

.market_rate .box01,
.market_rate .box02 .bid,
.market_rate .box02 .ask,
.market_rate .box02 .spread,
.market_rate .price_box02 .high,
.market_rate .price_box02 .low,
.market_rate .price_box02 .day,
.market_rate .price_box03 .ask_swap,
.market_rate .price_box03 .bid_swap{
	float:left;
	border: 1px solid #b3b8e6;
	border-left:none;
	border-bottom:none;
	padding:2% 0;
	width:9%;
	text-align:center;
}



.market_rate .box01{
	border-left:1px solid #b3b8e6;
}

.market_rate:last-child{
	border-bottom:1px solid #b3b8e6;
}


.rate_title .box01:first-child {
    border-left: 1px solid #001f7a;
}

.rate_title .box01{
	width: 208px;
	background:#001f7a;
	font-weight:bold;
	color:#fff;
	padding:2% 3%;
}

.market_rate .box01 {
	width: 208px;
	background-color: #f8f8ff;
	padding: 2% 3%;
}

.market_rate .box01 .currency_flag img{
	width:24px;
	float:left;
	padding-right:2px;
}

.market_rate .box01 .currency{
	font-size:97%;
	float:left;
}

.market_rate .price_box02 .high span,
.market_rate .price_box02 .low span,
.market_rate .price_box02 .day span,
.market_rate .price_box03 .ask_swap span,
.market_rate .price_box03 .bid_swap span{
	display:none;
}


@media screen and (max-width: 768px) {
.rate_title{
	display:none;

}



.market_rate{
	width:100%;
	overflow:hidden;
}


.market_rate .box01,
.market_rate .box02 {
	float:left;
	border: 1px solid #b3b8e6;
	height:65px;
	border-bottom:none;
}

.market_rate .box01{
	width:72px;
	text-align:center;
	padding:1% 0;
	background-color:#f8f8ff;
}


.market_rate .box02{
	width:77%;
	border-left:none;
	padding:1% 0;
}


.market_rate .price_box01{
	margin:1% 0;
}

.market_rate .price_box02,
.market_rate .price_box03{
	clear:both;
}

.market_rate .box01 .currency_flag img{
	width:26px;
	margin:10% 1% 0;
	float:none;
}

.market_rate .box01 .currency{
	font-size:80%;
	margin:5% 0 0 0 ;
	float:none;
}


.market_rate .price_box02 .high,
.market_rate .price_box02 .low,
.market_rate .price_box02 .day,
.market_rate .price_box03 .ask_swap,
.market_rate .price_box03 .bid_swap{
	float:left;
	font-size:65%;
	width:32%;
	padding:0 0 0 1%;
	border:none;
	text-align:left;
}

.market_rate .box02 .bid,
.market_rate .box02 .ask{
	font-size:110%;
	color:#001f7a;
	margin:2% 2% 1% 2%;
	float:left;
	width:37%;
	border:none;
	padding:0;
}

.market_rate .box02 .bid{
	color:#001f7a;
}

.market_rate .box02 .ask{
	color:#cc0000;
}

.market_rate .box02 .bid span,
.market_rate .box02 .ask span{
	font-size:160%;
	line-height:0.8;
}

.market_rate .box02 .spread{
	font-size:80%;
	color:#fff;
	background:#555;
	margin-top:1%;
	padding:1%;
	float:left;
	width:12%;
	border:none;
}

.market_rate .price_box02 .high span,
.market_rate .price_box02 .low span,
.market_rate .price_box02 .day span,
.market_rate .price_box03 .ask_swap span,
.market_rate .price_box03 .bid_swap span{
	display:inline;
}

}



.economic_nav_box {
	margin: 2% 0 0;
}

.economic_nav_box label {
	position:relative;
	display:inline-block;
	width:200px;
	height:36px;
	border:solid 1px #001f7a;
	border-radius:5px;
	background:#fff;
}

.economic_nav_box input[type="date"]{
	position:relative;
	padding:0 3px;
	width:200px;
	height:36px;
	border:0;
	background:transparent;
	box-sizing:border-box;
	font-size:14px;
	color:#001f7a;
}

.economic_nav_box .symbol {
	display:inline-block;
	margin: 1% 1% 0% 1%;
}

.economic_label{
	line-height: 2.5;
	margin-left:3%;
}


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

.economic_nav_box label {
	width:38%;

}

.economic_nav_box label:first-of-type {
	margin-left:7%;
}

.economic_nav_box input[type="date"]{
	width:90%;
}

.economic_nav_box .symbol {

	margin: 2% 0% 0% 0%;
}

.economic_nav_box .economic_label{
	display:block;
	margin-left:7%;
}
}

.importance span {
    color: #001f7a; 
    border: 1px solid #001f7a; 
    border-radius: 20px; 
    padding: 5px 0;
	width:70px;
	display:inline-block;
	text-align:center;
	background-color:#fff;
}

.importance input:checked + span {
    color: #FFF;
    background: #001f7a;
}

@media screen and (max-width: 768px) {
.importance span {
    color: #001f7a; 
    border: 1px solid #001f7a; 
    border-radius: 20px; 
    padding: 1% 0;
	width:65px;
	display:inline-block;
	text-align:center;
	background-color:#fff;
	font-size:85%;
	margin-top:1%;
}

.importance input:checked + span {
    color: #FFF;
    background: #001f7a;
}
}


.market_sort{
	background-color:#f8f8ff;
	padding:3% 1%;
}

.market_nav_box{
	display:inline;
}


@media screen and (max-width: 768px) {
.market_nav_box{
	display:block;
	margin:2% 0;
}

}


.market_nav_box label {
	margin-right: 5px;
}

.market_nav_box label input {
	display: none;
}


.market_label{
	line-height: 2.5;
	margin-left:3%;
}

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

.market_label{
	margin-left:7%;
}
}


.market_news_list_02{
	padding:2%;
	border:1px #777 solid;
}

.market_news_list_02 li{
	margin:2%;
	font-size:120%;
	border-bottom:1px #777 solid;
	padding:2% 0;
}

.market_news_list_02 li:last-child{
	border-bottom:none;
}

.market_news_list_02 li .ttl{
	padding:1%;
	color:#333;
	font-weight:bold;
}

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

.market_news_list_02 li{
	font-size:100%;
}

.market_news_list_02 li .ttl{
display:block;
}
}

.kanrencolumn_box{
	overflow:hidden;
	margin-bottom:2%;
	margin-top:2%;
}
.kanrencolumn_img{
	float:left;
	width: 35%;
}

.kanrencolumn_txt{
	width:62%;
	margin-left: 3%;
	float:left;
	color:#000000;
	font-size:110%;
	letter-spacing:0.1vw;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media screen and (max-width: 768px) {
.kanrencolumn_box{
	margin-bottom:13%;
}
.kanrencolumn_box a:hover{
	opacity: 0.7;
}

.kanrencolumn_img{
	width: 100%;
}

.kanrencolumn_txt{
	font-size:3.5vw;
	letter-spacing:0.1vw;
	width:100%;
	margin: 0;
	color:#000000;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	padding:2% 0;
}
}