a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html, body { height: 100%; }
body { position: relative; margin: 0; padding: 0; background: #eee; color: #222; font-size: 12px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height:  130%;　-webkit-text-size-adjust: 100%; }

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

a, a:visited { color: #1A237E; text-decoration: none; }
a:hover { text-decoration: underline; }
p { padding: 5px 0 15px; line-height: 180%; }
img{ max-width: 100%; height: auto; width /***/:auto;　}

header { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 5px 0 0; background: #fff; text-align: center; }
header img { width: 180px; margin-bottom: 5px; }
h1 { padding: 0 10px 0 10px; font-size: 11px; text-align: left; }
h2 { position: relative; clear: both; margin: 30px 0 15px; padding: 10px 5px 8px 30px; background: #eee; font-size: 16px; font-weight: bold; }
h2:before, h2:after { display: block; content:""; position: absolute; top:50%; left:0; width: 6px; height: 12px; }
h2:before { margin: -6px 0 0 10px; background: #1A237E;}
h2:after { margin: -6px 0 0 16px; background: #FF5722;}
h3, h5 { clear: both; margin: 0; padding: 8px 5px 6px; background: #ddd; font-size: 14px; text-align: center; }
h4 { padding: 0; font-size: 12px; font-weight: bold; }

.menu{ width: 100%; max-width: 1120px; border-top: 3px solid #1A237E; margin: 0 auto; padding: 0; }
.menu li{ display: block; float: left; width: 10%; margin: 0; padding: 0; }
.menu li a{ display: block; padding: 10px 0 8px; background: #FF5722; color: #fff; text-align: center; text-decoration: none; }
.menu li a:hover{ background: #E64A19; }
#toggle{ display: none; }
#toggle-btn { display: none; }
@media only screen and (max-width: 960px) {
.menu li{ width: 20%; border-bottom: 1px solid #FF8A65; }
}
@media only screen and (max-width: 480px) {
.menu{ display: none; border-top: 0; }
.menu li{ width: 50%; }
.menu li:nth-child(2n) a { border-left: 1px solid #FF8A65; }
#toggle{ display: block; position: relative; width: 100%; background: #E64A19; }
#toggle label { border-bottom: 1px solid #FF8A65; color: #fff; display: block; padding: 12px 0 10px; position: relative; font-weight: bold; text-align: center; text-decoration: none; }
#toggle:before { background: #fff; content: ""; display: block; height: 20px; left: 10px; margin-top: -10px; position: absolute; top: 50%; width: 20px; }
#toggle label:before, #toggle label:after { background: #E64A19; content: ""; display: block; height: 4px; left: 10px; position: absolute; top: 50%; width: 20px; }
#toggle label:before { margin-top: -5.5px; }
#toggle label:after { margin-top: 2.5px; }
.menu-open { display: block !important; }
#toggle-btn:checked + #toggle-menu { display: block; }

#footer-menu { display: block; }
}

.clear:before, .clear:after { content: ""; display: table; }
.clear:after { clear: both; }
.clear { *zoom: 1; }

.main { overflow: hidden; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0; background: #fff; }
.main-left { float: left; width: 100%; margin-right: -250px; padding: 0 285px 30px 35px; background: #fff; }
.chart-box { width: 100%; height: 400px; margin: 0 0 20px; padding: 0; }
.chart-box-border { border: 1px solid #ddd; }
.chart-box-short { height: 300px; }
.chart-box-long { height: 500px; max-height: 80vh; }
.chart-box-long-long { height: 600px; max-height: 80vh; }
.chart-box-height-auto { height: auto; }
.chart-box-tradingview { margin: 0 0 30px; }
.chart-info { padding: 0 5px 5px; line-height: 130%;}
.info-box { margin-bottom: 0px; }
.info-box-p, .info-box-ad { float: left; width: 50%; }
.info-box-p { padding: 0 15px 5px 10px; text-indent: 1em; }
.info-box-ad { padding: 0 0 0 10px; text-align: center; }
.widget-box { float: left; width: 50%; height: 500px; padding: 0 5px; margin-bottom: 20px; }
.chart-bottom-ad { clear: both; width: 100%; padding: 0 0 10px; text-align: center; }
.chart-top-ad { clear: both; width: 100%; padding: 20px 0 10px; text-align: center; }

.main-right { float: right; width: 250px; margin-bottom: -10000px; padding: 20px 0 10000px; background: #f9f9f9; }
.social { position: absolute; top: 20px; right: 10px; padding: 0; }
.social-icon { padding: 3px 0 0; text-align: center; }
.news-box, .side-chart-box { padding: 10px 0 20px; }
.side-chart-box { text-align: center; }
.news-box ul { list-style-type: none; padding: 5px 0 0; }
.news-box li { list-style-type: none; line-height:130%; }
.news-box a { display: block; padding: 7px 8px 6px; border-bottom: 1px dotted #aaa; }
.news-box li:last-child a { border-bottom: 0px; }
.news-box-ad { clear: both; width: 100%; padding: 0 0 20px; text-align: center; }

@media only screen and (max-width: 960px) {
h2 { margin: 20px 0 15px; }
.main-left { float: none; width: 100%; padding: 0 20px 10px; }
.main-right { float: none; width: 100%; margin-bottom: 0; padding: 20px 0 0; }
.news-box, .side-chart-box { float: left; width: 48%; margin: 0 1%; padding: 0 0 5px; }
.news-box a { width: 95%; margin: 0 auto; padding: 7px 5px 5px; }
.news-box-ad { padding: 10px 0; }
}

@media only screen and (max-width: 768px) {
h2 { margin: 10px 0 5px; }
.main-left { padding: 5px 10px 0; }
.chart-box-tradingview { margin: 0 0 10px; }
.info-box { width: 98%; margin: 0 auto 10px; }
.info-box-p, .info-box-ad { float: none; width: 100%; padding: 5px; }
.chart-bottom-ad { padding: 0 0 10px; }
.widget-box { float: none; width: 100%; height: 400px; padding: 0; }
.main-right { padding: 15px 0 0; }
}
@media only screen and (max-width: 480px) {
h2 { margin: 5px 0 5px; }
p { padding: 0 0 10px; line-height: 150%;}
header { text-align: left; }
header img { margin: 0 0 0 5px; }
h1 { text-align: center; }
.social { top: 25px; }
.main-left { padding: 5px 5px 0; }
.chart-box { height: 300px; }
.chart-box-short { height: 240px; }
.chart-box-long { height: 360px; }
.chart-box-long-long { height: 420px; }
.main-right { padding: 10px 0 0; }
.news-box, .side-chart-box { float: none; width: 100%; margin: 0; padding: 0 0 10px; }
}

footer { clear: both; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0; }
.footer-info { clear: both; padding: 10px 0 5px; background: #fff; }
.footer-info p { margin: 0; padding: 0; text-align: center; font-size: 11px; line-height: 120%; }

footer { width: 100%; max-width: 100%; background: #3a3a3a; color; #ccc; }
#footer-box a { color: #bbb; }
#footer-box { width: 100%; max-width: 1120px; margin: 0 auto; padding: 30px 20px; }
#footer-logo { float: left; width: 300px; padding: 70px 80px 0 0; color: #777; text-align: center; }
#footer-logo img { width: 180px; }
#footer-logo p { padding: 0 0 0 10px; }
#footer-logo p a { color: #777; }
#footer-box ul { float: left; width: 160px; padding-bottom: 20px; }
#footer-box li { padding: 5px 0; }
#footer-box li a { display: block; }
#footer-fx-menu { float: left; width: 400px; }
#footer-fx-menu p { line-height: 100%; color: #ccc; }
#footer-fx-menu a { display: inline-block; width: 80px; padding: 5px 10px; color: #bbb; } 
.footer-info { clear: both; padding: 15px 0 10px; background: #333; color: #fff; }
.footer-info p { margin: 0; padding: 0; color: #999; text-align: center; font-size: 12px; line-height: 120%; }
@media only screen and (max-width: 860px) {
#footer-logo { float: none; width: 100%; padding: 10px 0 20px; text-align: center; }
#footer-logo img { width: 180px; }
#footer-box ul { width: 40%; text-align: center; }
#footer-fx-menu { width: 60%; }
}
@media only screen and (max-width: 480px) {
#footer-logo { float: none; width: 100%; padding: 0 0 20px; text-align: center; }
#footer-box ul { float: none; width: 100%; padding-bottom: 20px; }
#footer-box li { float: left; width: 50%; padding: 5px 0; text-align: center; }
#footer-fx-menu { float: none; width: 100%; }
}