@charset "UTF-8";

/*-----------------------------------------
  基本
-----------------------------------------*/
* { margin: 0; padding: 0; }
.dspnone { display: none; }

img {
  max-width: 100%;
  height: auto;
  width /***/:auto;
}
.img_c { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }

/*-- フォント装飾 -------------------------*/
.f200 { font-size: 200%; }
.f190 { font-size: 190%; }
.f180 { font-size: 180%; }
.f170 { font-size: 170%; }
.f160 { font-size: 160%; }
.f150 { font-size: 150%; }
.f140 { font-size: 140%; }
.f130 { font-size: 130%; }
.f120 { font-size: 120%; }
.f115 { font-size: 115%; }
.f110 { font-size: 110%; }
.f90 { font-size: 90%; }
.f80 { font-size: 80%; }
.b { font-weight: bold; }
.r { color: #c00; }
.u { text-decoration: underline; }
.y { color:#fba91a; }
.ym { background:#fffaba; }
.tc { text-align:center; }
.tr { text-align:right; }
.minus { color: #f00 !important; }
/*-- プレースホルダ―を消す ----------------*/
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }

/*-- ul/ol ---------------------------------*/
ul, ol { list-style-type: none; }

/*-----------------------------------------
  出し分け
-----------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/*-----------------------------------------
  body
-----------------------------------------*/
body {
  font-size: 17px;
  font-family: "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  color: #333;
  height: 100%;
}
#wrapper {
  min-height: 100vh;
  position: relative;
  box-sizing:border-box;
  padding: 5rem 0 25rem 0;
  margin-top: 0;
}

/*-----------------------------------------
  グロナビ
-----------------------------------------*/
.nav-inner { max-width: 980px; margin: 0 auto; }
.nav-inner:after { content: ""; clear: both; display: block; }

#top-head { top: -100px; position: absolute; width: 100%; margin: 100px auto 0; padding: 10px 0 0; line-height: 1; z-index: 999; }
#top-head a, #top-head { color: #333; text-decoration: none; }
#top-head .nav-inner { position: relative; }
#top-head .logo { float: left; font-size: 36px; }
#top-head .logo img { height: 40px; }
#global-nav ul { list-style: none; position: absolute; right: 0; font-size: 14px; }
#global-nav ul li { float: left; }
#global-nav ul li a { padding: 0 30px; }

/* Fixed */
/* #top-head.fixed { margin-top: 0; top: 0; position: fixed; padding-top: 10px; height: 55px; background: #fff; background: rgba(255,255,255,.7); transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; } */
#top-head.fixed .logo { font-size: 24px;  color: #333; }
#top-head.fixed .logo img { height: 28px; }
#top-head.fixed #global-nav ul li a { color: #333; padding: 0 20px; }
 
/* Toggle Button */
#nav-toggle { display: none; position: absolute; right: 12px; top: 14px; width: 34px; height: 36px; cursor: pointer; z-index: 101; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #666; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }

/* Smart Phone */
@media only screen and (max-width: 750px) {

	#top-head, .nav-inner { width: 100%; padding: 0; }
	#top-head { top: 0; position: fixed; margin-top: 0; }
	
	/* Fixed reset */
	#top-head.fixed { padding-top: 0; background: transparent; }
	#mobile-head { background: #fff; width: 100%; height: 56px; z-index: 999; position: relative; }
	#top-head.fixed .logo, #top-head .logo { position: absolute; left: 13px; top: 13px; color: #333; font-size: 26px; }
	#top-head.fixed .logo img, #top-head .logo img { height: 28px; }
	
	#global-nav {
	  position: absolute;
	  /* 開いてないときは画面外に配置 */
	  top: -500px;
	  background: #333;
	  width: 100%;
	  text-align: center;
	  padding: 10px 0;
	  -webkit-transition: .5s ease-in-out;
	  -moz-transition: .5s ease-in-out;
	  transition: .5s ease-in-out;
	}
	#global-nav ul {
	  list-style: none;
	  position: static;
	  right: 0;
	  bottom: 0;
	  font-size: 14px;
	}
	#global-nav ul li {
	  float: none;
	  position: static;
	}
	#top-head #global-nav ul li a,
	#top-head.fixed #global-nav ul li a {
	  width: 100%;
	  display: block;
	  color: #fff;
	  padding: 18px 0;
	}
	#nav-toggle {
	  display: block;
	}
	/* #nav-toggle 切り替えアニメーション */
	.open #nav-toggle span:nth-child(1) {
	  top: 11px;
	  -webkit-transform: rotate(315deg);
	  -moz-transform: rotate(315deg);
	  transform: rotate(315deg);
	}
	.open #nav-toggle span:nth-child(2) {
	  width: 0;
	  left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
	  top: 11px;
	  -webkit-transform: rotate(-315deg);
	  -moz-transform: rotate(-315deg);
	  transform: rotate(-315deg);
	}
	/* #global-nav スライドアニメーション */
	.open #global-nav {
	  /* #global-nav top + #mobile-head height */
	  -moz-transform: translateY(556px);
	  -webkit-transform: translateY(556px);
	  transform: translateY(556px);
	}
}

/*-----------------------------------------
  フッター
-----------------------------------------*/
#footer {
  width: 100%;
  background: #f4f4f4;
  clear: both;
  margin-top: 2rem;
  position: absolute;
  bottom: 0;
}
.footer-inner { max-width: 980px; margin: 0 auto; padding: 1rem; box-sizing:border-box; }
.housin {
  height: 70px;
  overflow-y: scroll;
  padding: 1.5rem;
  border: 1px solid #ccc;
  margin: 2rem auto;
  font-size: 0.8rem;
}
#go-pagetop {
  right: 20px;
  bottom: 20px;
  position: fixed;
  z-index: 2;
}
.footer-menu {
  margin-top: 1rem;
  text-align:center;
}
.footer-menu li {
  font-size: 0.8rem;
  display: inline-block;
  padding: 0.3rem;
}
.footer-menu li a {
  color: #333;
  text-decoration: none;
}
.footer-menu li a:hover {
  color: #666;
}
.copy {
  text-align:center;
  padding: 0.5rem;
  background: #333;
  color: #fff;
  font-size: 12px;
}
/*-----------------------------------------
  コンテンツ
-----------------------------------------*/
.st-top {
  margin-top:66px;
}
/* Smart Phone */
@media only screen and (max-width: 750px) {
	.st-top {
	  margin-top:56px;
	}
}

/*-- 汎用的なボックス --*/
.box {
  padding: 1rem;
  margin: 0 auto;
}
/* Smart Phone */
@media only screen and (max-width: 750px) {
.box {
  padding: 0.5rem;
  margin: 0 auto;
}
}

/*-----------------------------------------
  フォーム
-----------------------------------------*/

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*-----------------------------------------
  フォームの箱
-----------------------------------------*/
.form-area {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 1.5rem;
}
@media only screen and (max-width: 750px) {
.form-area {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0rem;
}
}

/*-----------------------------------------
  フォームの箱
-----------------------------------------*/
dl.form-list {
  margin: 1rem 0;
}
dl.form-list dt {
  font-weight: bold;
  padding-top: 0.8rem;
}
@media only screen and (max-width: 750px) {
	dl.form-list {
	  margin: 0.5rem 0;
	}
	dl.form-list dt {
	  font-weight: bold;
	  padding-top: 0.8rem;
	}
}

/*-----------------------------------------
  ボタンを囲むdiv
-----------------------------------------*/
.regbtn-area {
  margin: 1rem auto;
  text-align: center;
}

/*-----------------------------------------
  ご利用上の注意
-----------------------------------------*/
ol.notice {
  margin: 1rem 0.5rem 1rem 2rem;
  list-style-type: decimal-leading-zero;
}

ol.notice li {
  padding: 0.5rem 0;
}

h3.help-title {
  margin: 2rem 0 1rem 0;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #666;
  clear: both;
  background: #36589f;
  color: #fff;
  font-weight: bold;
}

.thumb {
  float:left;
  width: 25%;
}
.thumb img {
  max-width: 100%;
}
.text-right {
  padding: 1rem;
  margin-left: 25%;
}


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

.thumb {
  float:none;
  width: 100%;
}
.thumb img {
  max-width: 100%;
}
.text-right {
  padding: 0;
  margin-left: 0;
}


}

/*-----------------------------------------
  ログインフォーム用
-----------------------------------------*/
#login {
  max-width: 520px;
  border: 1px solid #ccc;
  -moz-border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
}
#login .logo img {
  max-width: 240px;
}
@media only screen and (max-width: 750px) {
#login {
  border: none;
  -moz-border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
}
	#login .logo img {
	  max-width: 180px;
	}
}

/*-- ログインフォーム --*/
#login .input-text {
  padding: 1rem;
  box-sizing: border-box;
  border: 2px solid #999;
  width: 100%;
  -moz-border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
}
#login input[type="submit"],
#login input[type="button"],
#login .submit-btn {
  background: #214277;
  font-weight: bold;
  padding: 1rem 2rem;
  text-align:center;
  color: #fff;
  -moz-border-radius: 0.2rem;
  -webkit-border-radius: 0.2rem;
  border-radius: 0.2rem;
  font-size: 1.2rem;
  box-shadow: 0 3px 0px #0a1e3d;
}
#login input[type="submit"]:hover,
#login input[type="button"]:hover,
#login .submit-btn {
  background: #214f94;
}

/*-----------------------------------------
  新規取引記録用
-----------------------------------------*/
#new-input {
  max-width: 800px;
  border: 1px solid #ccc;
  -moz-border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
}
#new-input .input-text {
  padding: 0.5rem;
  box-sizing: border-box;
  border: 2px solid #999;
  width: 100%;
  font-size: 1rem;
}
#new-input .input-select {
  padding: 0.5rem;
  box-sizing: border-box;
  border: 2px solid #999;
  width: 100%;
  font-size: 1rem;
}
#new-input .auto-input {
  padding: 0.5rem;
  box-sizing: border-box;
  border: 2px solid #eee;
  width: 100%;
  font-size: 1rem;
  background: #eee;
}
#new-input .auto-input-num {
  padding: 0.5rem;
  box-sizing: border-box;
  border: 2px solid #eee;
  width: 100%;
  font-size: 1rem;
  background: #eee;
  text-align: right;
}
#new-input .input-num {
  padding: 0.5rem;
  box-sizing: border-box;
  border: 2px solid #999;
  width: 35%;
  font-size: 1rem;
}
#new-input input[type="submit"],
#new-input input[type="button"],
#new-input .submit-btn {
  background: #214277;
  font-weight: bold;
  padding: 1rem 2rem;
  text-align:center;
  color: #fff;
  -moz-border-radius: 0.2rem;
  -webkit-border-radius: 0.2rem;
  border-radius: 0.2rem;
  font-size: 1.2rem;
  box-shadow: 0 3px 0px #0a1e3d;
}
#new-input input[type="submit"]:hover,
#new-input input[type="button"]:hover,
#new-input .submit-btn {
  background: #214f94;
}
.auto-input-num:after {
  content: "円";
  display: inline-block;
  padding-left: 0.5rem;
}
dl.new-form,
dl.new-form dt,
dl.new-form dd {
  box-sizing: border-box;
}
dl.new-form {
  background: #ffc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
dl.new-form dt,
dl.new-form dd {
  padding: 0.5rem 0.5rem 0 0.5rem;
  border-top: 1px solid #ccc;
}
dl.new-form dt {
  width: 40%;
  float: left;
}
dl.new-form dd {
  background: #fff;
  margin-left: 40%;
  padding-bottom: 0.5rem;
  border-left: 1px solid #ccc;
}
dl.new-form dd:after {
  content: '';
  display: block;
  clear: both;
}

@media only screen and (max-width: 750px) {
	#new-input {
	  border: none;
	  -moz-border-radius: 0.5rem;
	  -webkit-border-radius: 0.5rem;
	  border-radius: 0.5rem;
	}
	dl.new-form dt:before {
	  content: "▼";
	}
}

/*-----------------------------------------
  取引結果用　PC用
-----------------------------------------*/
#after-login {
  max-width: 1380px;
  border: 1px solid #ccc;
/*  overflow-x: scroll; */
}
@media only screen and (max-width: 750px) {
#after-login {
  border: none;
}
}
#after-login .input-num {
  padding: 0.5rem;
  box-sizing: border-box;
  border: 2px solid #999;
  font-size: 1rem;
  text-align: right;
}
span.tani {
  display:inline-block;
  padding-left: 0.5rem;
}
#after-login input[type="submit"],
#after-login input[type="button"],
#after-login .submit-btn {
  background: #1a345d;
  font-weight: normal;
  padding: 0.5rem 1.5rem;
  text-align:center;
  color: #fff;
  -moz-border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  border-radius: 0.1rem;
  font-size: 1rem;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
}
#after-login input[type="submit"]:hover,
#after-login input[type="button"]:hover,
#after-login .submit-btn {
  background: #214f94;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
}

/*-- 取引用資金を保存する --*/
.regbtn-area-right {
  margin: 1rem auto;
  text-align: right;
}
/*-- テーブル -- */
table.normal {
  border: 1px solid #ccc;
  margin: 0 auto;
  border-collapse: collapse;
  color: #444;
  background: #fff;
  width: 100%;
}
table.normal td {
  border: 1px solid #ccc;
  padding: 0.5em;
}
table.normal th {
  border: 1px solid #ccc;
  padding: 0.5em;
  background: #ffc;
}
/*-- 累積 -- */
table.ruiseki {
  border: 1px solid #ccc;
  margin: 0 auto;
  border-collapse: collapse;
  color: #444;
  background: #fff;
  width: 100%;
}
table.ruiseki td {
  border: 1px solid #ccc;
  padding: 0.5em;
}
table.ruiseki th {
  border: 1px solid #ccc;
  padding: 0.5em;
  background: #ffc;
}

/*-- 取引記録 -- */
table.log {
  border: 1px solid #ccc;
  margin: 0 auto;
  border-collapse: collapse;
  color: #444;
  background: #fff;
  width: 100%;
  font-size:0.9rem;
}
table.log td {
  border: 1px solid #ccc;
  padding: 0.4em;
}
table.log th {
  border: 1px solid #ccc;
  padding: 0.5em 0.3em;
  background: #b1ebea;
  font-weight: normal;
  font-size: 0.8rem;
}
table.log tr.hoyu {
  background: #ffc;
}
table.log tr.fin {
  background: #f4f4f4;
}
table.log td.buy,
table.log td.sel,
table.log td.status {
  text-align: center;
}
table.log td.buy,
table.log td.plus {
  color:#f03;
}
table.log td.sel,
table.log td.son {
  color:#06f;
}
table.log td.num:after {
  content: "円";
}
table.log td.num2:after {
  content: "％";
}

/*-- 取引記録 -- */
.link-btn {
  margin: 0.5rem 0;
}
.link-btn a.new {
  display: inline-block;
  background: #1b7b32;
  max-width: 320px;
  padding: 0.5rem 1.2rem;
  text-decoration: none;
  color: #fff;
  font-weight: normal;
  border-radius: 0.1rem;
  text-align: center;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
  border: 1px solid #115b23;
}
.link-btn a.new:hover {
  background: #3ea256;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
}
.link-btn a.search {
  display: inline-block;
  background: #f6661f;
  max-width: 320px;
  padding: 0.5rem 1.2rem;
  text-decoration: none;
  color: #fff;
  font-weight: normal;
  border-radius: 0.1rem;
  text-align: center;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
}
.link-btn a.search:hover {
  background: #f77e43;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
}
.chk-box {
  border: 1px solid #999;
  padding: 10px;
}
/*-- csvダウンロードボタン -- */
.csv-btn {
  margin: 0.5rem 0;
}
.csv-btn a.new {
  display: inline-block;
  background: #f6661f;
  max-width: 320px;
  padding: 0.5rem 1.2rem;
  text-decoration: none;
  color: #fff;
  font-weight: normal;
  border-radius: 0.1rem;
  text-align: center;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
}
.csv-btn a.new:hover {
  background: #f77e43;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
}

/* css checkbox01 */
.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts{
  color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

/*-----------------------------------------
  取引結果用　スマホ用
-----------------------------------------*/
a.toggle-link-sikin,
a.toggle-link-ruiseki {
  display: block;
  position: relative;
}
a.on:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: translateX(-50%) rotate(135deg);
}
a.off:before {
  top: 0.3rem;
  transform: translateX(-50%) rotate(45deg);
}
.sikin-box,
.ruiseki-box {
  padding: 1rem 0;
}
.sikin-box dl,
.ruiseki-box dl {
  margin: 0 auto;
  border-collapse: collapse;
  color: #444;
  background: #fff;
  width: 100%;
}
.sikin-box dd,
.ruiseki-box dd {
  border: 1px solid #ccc;
  border-width: 0 1px 1px;
  padding: 0.5em;
}
.sikin-box dt,
.ruiseki-box dt {
  border: 1px solid #ccc;
  border-width: 0 1px 1px;
  padding: 0.5em;
  background: #ffc;
}
.sikin-box dl dt:first-child,
.ruiseki-box dl dt:first-child {
  border-width: 1px 1px 1px;
}

@media only screen and (max-width: 750px) {
/*-- 取引記録 -- */
table.log {
  border: 1px solid #ccc;
  margin: 0 auto;
  border-collapse: collapse;
  color: #444;
  background: #fff;
  font-size:1rem;
}
table.log td {
  border: 1px solid #ccc;
  padding: 0.4em;
}
table.log th {
  border: 1px solid #ccc;
  padding: 0.5em 0.3em;
  background: #b1ebea;
  font-weight: normal;
  font-size: 0.8rem;
}
table.log tr.hoyu {
  background: #ffc;
}
table.log tr.fin {
  background: #f4f4f4;
}
table.log td.buy,
table.log td.sel,
table.log td.status {
  text-align: center;
}
table.log td.buy,
table.log td.plus {
  color:#f03;
}
table.log td.sel,
table.log td.son {
  color:#06f;
}
table.log td.num:after {
  content: "円";
}
table.log td.num2:after {
  content: "％";
}

table.log td.code-name {
  width: 3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.log td.edit {
  white-space: nowrap;
}


}


/*-----------------------------------------
  汎用的な装飾用
-----------------------------------------*/

/*-- タイトル --*/
h2.title {
  padding: 0.5rem;
  background: #f4f4f4;
  font-size: 1.2rem;
  border-top: 1px solid #ccc;
  clear: both;
}
h3.title {
  padding: 0.5rem;
  background: #f4f4f4;
  font-size: 1.2rem;
  border-top: 1px solid #ccc;
  margin-top: 1rem;
}

/*-- 文章をいれる --*/
.info {
 margin: 1rem 0;
}

/*-- 2分割 --*/
div.fl-wrap {
  overflow: hidden;
}
div.fl-left {
  float:left;
  width: 50%;
}
div.fl-right {
  float:left;
  width: 50%;
}
div.fl-inner {
  padding-right: 0.5rem;
}


/*---------------------------------------
  clearfix
-----------------------------------------*/
.clearfix:after {
  content: "."; 
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
.clear {
  clear: both;
}
.inline_block {  
  display: inline-block;  
  *display: inline;  
  *zoom: 1;  
}