@charset "utf-8";
/*------------------------------------------------
transaction-details.css
20250827
取引要綱
demo_gaiyou.jsp
demo_gaiyou_corporate.jsp
Midashi BASE set and Table
--------------------------------------------------*/
/* breadcrumb
----------------------------------------------------------------- */
.breadcrumb_outer {
  visibility: visible;
  height: auto;
  margin: 0;
}
.breadcrumb li a, .breadcrumb li a:hover, .breadcrumb li a:active, .breadcrumb li a:focus {
  color: #fff;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .breadcrumb {
    background-color: transparent;
    padding: 4px 15px;
    margin-bottom: 0;
    border-radius: 4px;
  }
  .breadcrumb li {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.42857143;
  }
  .breadcrumb li a, .breadcrumb li a:hover, .breadcrumb li a:active, .breadcrumb li a:focus {
    color: #fff;
    text-decoration: none;
  }
  .breadcrumb_outer {
    height: auto;
  }
}
.breadcrumb_outer, .breadcrumb {
  background-color: #333;
}
/* MidashiB_header
----------------------------------------------------------------- */
.MidashiB_header {
  background: #f0f1f4;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}
.MidashiB_header-inner {
  display: block;
  text-align: center;
  position: relative;
}
.MidashiB_header-group {
  background-color: transparent;
  height: auto;
  display: block;
  width: 87%;
  margin: 0 auto;
}
.MidashiB_header-item {
  width: 100%;
  height: auto;
  padding: 0;
  position: relative;
}
@media screen and (min-width: 1000px) {
  .MidashiB_header {
    background-size: cover;
    width: 100%;
    height: 400px;
    margin: 0 auto;
    padding: 0;
  }
  .MidashiB_header-inner {
    width: 80%;
    max-width: 1050px;
    margin: 0 auto;
  }
  .MidashiB_header-group {
    display: flex;
    flex-wrap: wrap; /* 折り返し指定 */
    align-content: stretch; /* 折り返し時の配置指定 */
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
  }
  .MidashiB_header-item {
    width: 50%;
    height: 400px;
    padding: 0;
  }
}
/*containerBASE
----------------------------------------------------------------- */
@media screen and (min-width: 1000px) {
  .containerBASE {
    width: 90%;
    max-width: 990px;
  }
}
/* MidashiB_header midashi_header
----------------------------------------------------------------- */
.midashi_header {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}
.midashi_header-group {
  display: table;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
}
.midashi_header-item {
  display: table-cell;
  height: 70px;
  vertical-align: middle;
}
.midashi_header-title h1 {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 1px;
  margin: 0 auto;
  padding: 0;
}
@media screen and (min-width: 599px) {
  .midashi_header-item {
    display: table-cell;
    height: 80px;
    vertical-align: middle;
  }
}
@media screen and (min-width: 799px) {
  .midashi_header {
    height: 120px;
  }
  .midashi_header-item {
    display: table-cell;
    height: 120px;
    vertical-align: middle;
  }
  .midashi_header-title h1 {
    font-size: 3rem;
    line-height: 120px;
  }
}
/* Table midashi-table
--------------------------------------------------*/
.midashi-table table.table td {
  vertical-align: middle;
}
td, th {
  padding: 0.5em 1em;
  font-size: 1.5rem;
  line-height: 2rem;
}
/* Otorihiki-table
--------------------------------------------------*/
.Otorihiki {
  margin: 0.5em 0;
}
.Otorihiki table a {
  text-decoration: underline;
}
.Otorihiki table a:hover {
  text-decoration: none;
}
.Otorihiki table {
  vertical-align: middle;
  border-collapse: collapse;
}
.Otorihiki th, .Otorihiki td {
  border: 1px solid #fff;
  padding: 0.8em auto;
}
.Otorihiki th, .Otorihiki td {
  border: 1px solid #ddd;
}
.Otorihiki tbody th {
  background: #f0f1f4;
  color: #333;
  font-weight: bold;
}
.Otorihiki p {
  font-size: 1.5rem;
}
.Otorihiki .detail {
  background-color: #f8f8f8;
  margin: 0.5em 0;
  padding: 0.5em 1em;
  font-size: 1.4rem;
}
@media screen and (max-width: 640px) {
  .Otorihiki table {
    border: none;
  }
  .Otorihiki th {
    border-top: none;
    border-bottom: none;
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .Otorihiki td {
    border: 1px solid #ddd;
    font-size: 1.3rem;
    line-height: 2rem;
  }
  .Otorihiki tbody th {
    background: #f0f1f4;
    color: #333;
  }
  .Otorihiki p {
    font-size: 1.3rem;
  }
  .Otorihiki .detail {
  font-size: 1.3rem;
  }
}
/*TorihikiTime
----------------------------------------------------------------- */
.TorihikiTime {
  display: flex;
  margin: 0.5em auto;
  padding: 0;
  line-height: 1.8;
  font-size: 1.4rem;
}
.HyoujyunTime {
  margin: 0;
  padding: 0;
  width: 50%;
  margin-right: 1em;
  background-color: #f8f8f8;
}
.HyoujyunTime span {
  background: #b3e6ff;
  padding: 0.2em 0.3em;
}
.SummerTime {
  margin: 0;
  padding: 0;
  width: 50%;
  background-color: #f8f8f8;
}
.SummerTime span {
  background: #F9A800;
  padding: 0.2em 0.3em;
}
.HyoujyunTime p, .SummerTime p {
  padding: 0.5em 1.5em 0;
  font-size: 1.4rem;
}
@media screen and (max-width: 799px) {
  .TorihikiTime {
    display: block;
    margin: 0.3em auto 1em;
    font-size: 1.3rem;
  }
  .HyoujyunTime {
    padding: 0;
    margin: auto;
    width: 100%;
  }
  .SummerTime {
    padding: 0;
    margin: 0.5em auto 1em;
    width: 100%;
  }
  .HyoujyunTime p, .SummerTime p {
    padding: 0.5em 1.5em;
    font-size: 1.3rem;
  }
}
/*TorihikiTsuka
----------------------------------------------------------------- */
.TorihikiTsuka {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5em auto;
  padding: 0;
  width: 100%;
}
.TorihikiTsuka li {
  margin: 0;
  padding: 4px 10px;
  font-size: 1.4rem;
  line-height: 1.6;
  list-style-position: inside;
  flex: 1 1 200px;
  border-radius: 0px;
  background-color: #f8f8f8;
}
@media screen and (max-width: 799px) {
  .TorihikiTsuka {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
  }
  .TorihikiTsuka li {
    margin: 0;
    padding: 0.3em 0.5em;
    font-size: 1.3rem;
    line-height: 1.6;
    list-style-position: inside;
    flex: 1 1 140px;
  }
}
/*TorihikiTani
----------------------------------------------------------------- */
.TorihikiTani {
  margin: 0.3em auto;
  font-size: 1.5rem;
}
.TorihikiTani div ul {
  display: table;
  width: 100%;
}
.TorihikiTani div ul li {
  font-size: 1.5rem;
  line-height:2rem;
  list-style: none;
}
.TorihikiTani div:first-child ul {
  margin-bottom:2em;}
.TorihikiTani div:last-child-child ul {
  margin-bottom:0 !important;}

.TorihikiTani ul span {
	padding: 0;
	vertical-align: middle;
	/* text-align: center; */
	font-weight:700;
	}
@media screen and (max-width: 799px) {
  .TorihikiTani {
    display: block;
    margin: 0;
line-height:2rem;
  }
  .TorihikiTani div ul {
    padding: 0;
    display: block;
  }
  .TorihikiTani ul span {
    display: block;
    font-size: 1.3rem;
    width: 100%;
  }
  .TorihikiTani div ul li {
    font-size: 1.3rem;
  }
}
/*SyokokinShiki
----------------------------------------------------------------- */
.SyokokinShiki {
  margin: 1em auto;
  font-size: 1.5rem !important;
}
.SyokokinShiki ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  width: 100%;

}
.SyokokinShiki ul li {
  margin: 0;
  margin-right: 1em;
  padding: 0;
  list-style-position: inside;
  list-style: none;
  font-size: 1.5rem !important;
}
.SyokokinShiki li:nth-last-of-type(3):after {
  content: "×";
  color: #666;
  margin-left: 1em;
}
.SyokokinShiki li:nth-last-of-type(2):after {
  content: "÷";
  color: #666;
  margin-left: 1em;
}
@media screen and (max-width: 799px) {
  .SyokokinShiki ul li {
    margin: 0;
    margin-right: 1em;
    padding: 0.2em 0;
    font-size: 1.3rem !important;
line-height:2rem;
  }
}
/*Syokokin
----------------------------------------------------------------- */
.Syokokin {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-size: 1.5rem;
}
.Syokokin div ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 1em;
  padding: 0;
  width: 100%;
}
.Syokokin ul span {
  background: #ffffff;
  padding: 0;
  margin: 0;
  width: 100%;
  display: inline-block;
  color: #0c6bbd;
}
.Syokokin ul li span {
  background: none;
  padding: 0;
  width: 100%;
  display: inline;
  text-align: left;
  color: #0c6bbd;
  border:none;
}
.Syokokin div ul li {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  list-style-position: inside;
  /* flex: 1 1 50%; */
  list-style: none;
  width:100%;
}
.Syokokin div ul li:nth-child(odd){
  margin-bottom: 1em;
  }
.Syokokin div ul li:last-child{
  margin-bottom: 0!important;
  }
@media screen and (max-width: 799px) {
  .Syokokin ul span {
    font-size: 1.3rem;
}
  .Syokokin div ul li {
    padding: 0.2em 0;
    font-size: 1.3rem;
line-height:2rem;
  }
}
/*Leverage
----------------------------------------------------------------- */
.Leverage {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-size: 1.5rem;
}
.Leverage div ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5em auto;
  padding: 0;
  width: 100%;
}
.Leverage div ul li {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  list-style-position: inside;
  /* flex: 1 1 50%; */
  list-style: none;
  width:100%;
}
.Leverage div ul li:nth-child(even){
  margin-bottom:1em;
}
@media screen and (max-width: 799px) {
  .Leverage div ul li {
    margin: 0;
    padding: 0.2em 0;
    font-size: 1.3rem;
  }
}
/*Losscut
----------------------------------------------------------------- */
.Losscut {
  margin: 1em auto;
}
.Losscut div ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5em auto;
  padding: 0;
  width: 100%;
}
.Losscut div ul li {
  margin: 0;
  font-size: 1.5rem;
  list-style: none;
  width: 100%;
}
.Losscut ul li span {
}
.Losscut div ul li:nth-of-type(even) span:before {
  content: "＝";
  color: #9E9E9E;
  margin-right: 1em;
}
.Losscut div ul li:nth-of-type(even) {
  color: #0c6bbd;
  margin-bottom:1em;
}
.Losscut div ul li:last-child {
  margin-bottom:0;
}
@media screen and (max-width: 799px) {
  .Losscut {
    margin: 0.3em auto;
    font-size: 1.3rem;
  }
  .Losscut div ul {
    margin: 0.5em auto;
    padding: 0;
    width: 100%;
  }
  .Losscut div ul li {
    font-size: 1.3rem;
    width: 100;
  }
  .Losscut ul li span {
    padding: 0.2em 0;
  }
}
/*Background
----------------------------------------------------------------- */
.bg_purple {
  /* background-color: #212577; */
}
.bg_white {
  background-color: #fff;
}
.bg_ylw {
  background-color: #FEF0DA;
}
.bg_or {
  background-color: #F9A800;
}
.bg_gy {
  background-color: #f0f1f4;
}
.bg_purplel {margin-top:1.5em;}
.bg_red {
  background-color: #DA1B16;
}
.bg_gyl {
  background-color: #E6E9EE;
}
/*color
----------------------------------------------------------------- */
.blue {
  color: #0c6bbd;
}
.white {
  color: #fff;
}
.ylw {
  color: #FEF0DA;
}
.or {
  color: #F9A800;
}
.gy {
  color: #f0f1f4;
}
.bluel {
  color: #D7E5F8;
}
.red {
  color: #DA1B16;
}
.gyl {
  color: #E6E9EE;
}
/*改行
----------------------------------------------------------------- */
.br_sp {
  display: none;
}
@media screen and (max-width: 799px) {
  .br_pc {
    display: none;
  }
  .br_sp {
    /* display: inline-block; */
    margin:0;
    padding:0;
  }
}
.text-left {
  text-align: left
}
.text-right {
  text-align: right
}
.text-center {
  text-align: center
}