@charset "UTF-8";

:root {
  --inner-width: 980px;
  --light-blue: #1a9abe;
  --font_clamp_16: clamp(0.625rem, -0.084rem + 1.77vw, 1rem);
  --font_clamp_18: clamp(0.875rem, 0.402rem + 1.18vw, 1.125rem);
  --font_clamp_20: clamp(0.875rem, 0.166rem + 1.77vw, 1.25rem);
  --color-darkBlue: #102855;
}

.u-screen-reader {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  margin: -1px
}

#sec_swap_simulation {
  padding-inline: 20px;
}

#sec_swap_simulation.hide {
  display: none;
}

#sec_swap_simulation>.inner {
  max-width: var(--inner-width);
}

#sec_swap_simulation>.inner>.title {
  font-size: 28px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}

#sec_swap_simulation .c-box {
  padding: 32px 6%;
  line-height: 1.75;
  border: 10px solid #f2f6f9;
}

.c-arrowhead-circle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.c-arrowhead-circle::after {
  content: "";
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url(/g/try/img/swap_simulation/arrow.svg) no-repeat left center / contain;
  mask: url(/g/try/img/swap_simulation/arrow.svg) no-repeat left center / contain;
}

.c-ul,
.c-list.list-style\:disc {
  padding: 0 0 0 16px;
  list-style: disc;
}

.c-ul ::marker,
.c-list.list-style\:disc ::marker {
  color: var(--color-link);
}

.c-ul li {
  list-style: disc;
}

/*前提条件*/
.precondition {
  margin-top: 60px;
  margin-bottom: 40px;
}

.precondition>.inner {
  background-color: #f2f6f9;
  display: flex;
  align-items: center;
  position: relative;
  padding: 30px;
}

.precondition>.inner>.title {
  font-size: 24px;
  font-weight: bold;
  margin-right: 10px;
  line-height: 1;
}

.precondition>.inner>.text {
  font-size: 16px;
}

.precondition .now-data {
  display: flex;
  flex-direction: row;
  gap: 15px;
  position: absolute;
  right: 10px;
  top: -10px;
  bottom: 0;
  margin-block: auto;
}

.precondition .now-data .box {
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 4.26px 1.74px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  min-height: 140px;
}

.precondition .now-data .box.precondition_rate {
  min-width: 150px;
}

.precondition .now-data .box.precondition_rate .rate,
.precondition .now-data .box.precondition_swap .swapValue {
  color: var(--color-darkBlue);
  font-weight: bold;
  font-size: 24px;
}

.precondition .now-data .box.precondition_swap {
  min-width: 150px;

}

.precondition .now-data .box.precondition_swap .swap {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.precondition .reload .updateRate {
  background-color: transparent;
  box-shadow: none;
  color: var(--light-blue);
  display: inline-block;
  margin: 0;
  padding: 0;
  width: auto;
  font-size: 14px;
  font-weight: normal;
  border: none;
  cursor: pointer;
}

.precondition .reload .updateRate svg {
  width: .75em;
  height: .75em;
  margin-right: 5px;
}

.sim_option .c-heading-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.sim_option .c-heading-3 .text {
  background-color: var(--color-darkBlue);
  padding: 10px 40px;
  color: #fff;
  font-size: 28px;
  border-radius: 10px;
  font-weight: bold;

}

.sim_option .c-heading-3:before,
.sim_option .c-heading-3:after {
  content: "";
  height: 1px;
  width: auto;
  flex: 1;
  background-color: var(--color-darkBlue);
}

.sim_option .conditionSelectBoxes {
  display: flex;
  gap: 20px;
  position: relative;
  padding-bottom: 40px;
  margin-bottom: 20px;
}

.sim_option .conditionSelectBoxes:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  bottom: 0px;
  width: 20px;
  height: 25px;
  background-image: url(/g/autosem/img/simulator/arrow_result.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.sim_option .assetsSelect,
.sim_option .leverageSelect,
.sim_option .periodSelect {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.sim_option>.lead {
  text-align: center;
  margin-block: 20px;
}

.sim_option .conditionSelectBoxes .box {
  border: 2px solid #e8e8e8;
  padding: 15px;
  flex: 1;
  border-radius: 10px;
}

.sim_option .conditionSelectBoxes .box .title {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-darkBlue);
  text-align: center;
  display: block;
  margin-bottom: 20px;
}

.sim_option .conditionSelectBoxes .box input {
  display: none;
}

.sim_option .conditionSelectBoxes .box .inputWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative;
}

.sim_option .textInput {
  border: 2px solid #8ec3de;
  border-radius: 10px;
  background-color: #f0fcff;
  height: 54px;
  width: 100%;
  max-width: 254px;
  text-align: right;
  font-size: 24px;
  padding-right: 10px;
}

.textInput::-webkit-inner-spin-button,
.textInput::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
}

.sim_option .conditionSelectBoxes .box .textInput[name="assets"],
.sim_option .conditionSelectBoxes .box .textInput[name="period"] {
  background-image: url(../img/selectArrow.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  padding-right: 40px;

}

.sim_option .conditionSelectBoxes .box .dataList {
  background-color: #fff;
  box-shadow: 0px 0px 15px -7px #777777;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  border-radius: 10px;
  overflow: hidden;
  display: none;
  z-index: 5;
  height: 200px;
  overflow-y: auto;
}

.sim_option .conditionSelectBoxes .box .inputWrap:focus-within .dataList {
  display: block;
}

.sim_option .conditionSelectBoxes .box .dataList li {
  padding: 10px 20px;
  width: 200px;
  cursor: pointer;
}

.sim_option .conditionSelectBoxes .box .dataList li:hover {
  background-color: #d8f6ff;
}

.sim_option .conditionSelectBoxes .box .dataList li:not(:last-child) {
  border-bottom: 1px solid #d6d6d6;
}

.sim_option .conditionSelectBoxes .box label {
  max-width: 85px;
  width: clamp(2.813rem, -1.915rem + 11.8vw, 5.313rem);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #efefef;
  font-size: clamp(1rem, -0.418rem + 3.54vw, 1.75rem);
  font-weight: bold;
  color: #929292;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}

.sim_option .conditionSelectBoxes .box label .unit {
  font-size: 14px;
  margin-top: 5px;
}

.sim_option .conditionSelectBoxes .box input:checked+label {
  background-color: #ffd200;
  color: var(--color-darkBlue);
}

.sim_option .conditionSelectBoxes .leverageWrap label,
.sim_option .conditionSelectBoxes .periodWrap label {
  flex-direction: row;
}


/*シミュレーション結果*/
.simulationResultContainer {
  background-image: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 250, 221) 100%);
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.simulationResultContainer>.title {
  color: var(--color-darkBlue);
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}

.simulationResultContainer .resultWrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 50%;
  padding-right: 20px;
}

.simulationResultContainer .resultWrap .resultDetail {
  font-size: 16px;
}

.simulationResultContainer .resultWrap .resultDetail dt {
  font-weight: bold;
}

.simulationResultContainer .resultWrap .resultDetail dd:not(:last-child) {
  margin-bottom: 1em;
}

.simulationResultContainer .resultWrap .resultDetail .sub {
  display: block;
  font-size: 14px;
}

.simulationResultContainer .swapResultWrap {
  background-color: #fff;
  padding: 15px;
  width: 50%;
  box-shadow: 0px 0px 4.26px 1.74px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.simulationResultContainer .swapResultWrap .sum {
  display: grid;
  grid-template-areas:
    "iconimg subject"
    "iconimg value";
  grid-template-columns: auto 1fr;
  flex-direction: column;
  border-bottom: dotted 1px #d4d4d4;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.simulationResultContainer .swapResultWrap .sum .subject {
  grid-area: subject;
  /*font-size: 20px;*/
  font-size: clamp(0.875rem, 0.543rem + 0.83vw, 1.25rem);
  text-align: center;
}

.simulationResultContainer .swapResultWrap .sum .result {
  text-align: center;
}

.simulationResultContainer .swapResultWrap .sum .value {
  grid-area: value;
  /*font-size: 36px;*/
  font-size: clamp(1.5rem, 0.837rem + 1.66vw, 2.25rem);
  color: #cd281e;
  text-align: center;
  font-weight: bold;
}

.simulationResultContainer .swapResultWrap .sum .result .unit {
  font-size: 20px;
}

.simulationResultContainer .swapResultWrap .sum:before {
  grid-area: iconimg;
  content: "";
  /*width: 137px;
  height: 113px;
  */
  width: 100%;
  aspect-ratio: 137 / 113;
  background-image: url(/g/autosem/img/simulator/coin@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.simulationResultContainer .swapResultWrap .daySwap {
  text-align: center;
  font-size: 14px;
}

.simulationResultContainer .swapResultWrap .daySwap .value {
  text-align: center;
  font-size: 18px;
  color: #cd281e;
}

.simulationResultContainer .sim-resultTable_1 {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
}

.simulationResultContainer .sim-resultTable_1 thead {}

.simulationResultContainer .sim-resultTable_1 thead tr {
  background-color: var(--color-darkBlue);
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.simulationResultContainer .sim-resultTable_1 thead th {
  padding: 10px;
  text-align: center;
}

.simulationResultContainer .sim-resultTable_1 tbody tr:not(:last-child) th,
.simulationResultContainer .sim-resultTable_1 tbody tr:not(:last-child) td {
  border-bottom: 1px solid #e0e0e0;
}

.simulationResultContainer .sim-resultTable_1 tbody th {
  text-align: right;
}

.simulationResultContainer .sim-resultTable_1 tbody td {
  text-align: center;
  border-left: 1px solid #e0e0e0;
}

.simulationResultContainer .sim-resultTable_1 tbody th,
.simulationResultContainer .sim-resultTable_1 tbody td {
  padding: 10px;
}



/*ロスカットレート・スワップ帳消し*/
.simulationResultContainer .losscutRate {
  margin-top: 30px;
}

.simulationResultContainer .losscutRate,
.simulationResultContainer .zeroSumRate {
  width: 100%;
  margin-bottom: 30px;
}

.simulationResultContainer .losscutRate .title,
.simulationResultContainer .zeroSumRate .title {
  text-align: center;
  font-size: 20px;
  color: var(--color-darkBlue);
  font-weight: bold;
  margin-bottom: 10px;
}

.simulationResultContainer .losscutRate .title small,
.simulationResultContainer .zeroSumRate .title small {
  font-size: 12px;
}

.simulationResultContainer .losscutRate .title .supplement {
  display: block;
  font-size: 14px;
}

.simulationResultContainer .attention {}

.simulationResultContainer .attention li {
  display: flex;
  font-size: 16px;
}

.simulationResultContainer .attention li .num {
  width: 1.5em;
  margin-right: 0.5em;
}


/*［参考］運用期間*/

#sec_swap_simulation .transitionChart .title {
  color: var(--color-darkBlue);
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}

#sec_swap_simulation .transitionChart #chart {
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: 810 / 400;
  font-size: 20px;
  font-family: var(--font-family-w6);
  line-height: 1.7;
  text-align: center;
  color: #9AA4B3;
  background: #F1F5F7;
}



/*ご注意*/
#sec_swap_simulation .simulation_attention {
  background-color: #f2f6f9;
  padding: 20px;
  font-size: 16px;
  margin-top: 40px;
}

#sec_swap_simulation .simulation_attention>.label {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 16px;
  display: inline-block;
  margin-bottom: 10px;
}

#sec_swap_simulation .simulation_attention>.title {
  margin-bottom: 0.5em;
}

#sec_swap_simulation .simulation_attention .about_sim {
  margin-bottom: 20px;
}

#sec_swap_simulation .simulation_attention .list li:not(:last-child) {
  margin-bottom: 1em;
}

.text_red {
  color: #e6002e;
}

/*もしもレートが下がったら*/
.sim_option .ifDown {
  background-color: #f7f7f7;
  padding: 30px;
  border-radius: 30px;
  margin-bottom: 50px;
  position: relative;

  * {
    z-index: 1;
  }

  >.title {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #d1d1d1;
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .inputWrap {
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 20px;

    label {
      font-size: 24px;
      font-weight: bold;
      color: #102855;
    }

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

  .results {
    display: grid;
    grid-template-areas:
      "ratePL totalPL"
      "holdDays holdDays";
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    .ratePL {
      grid-area: ratePL;
    }

    .totalPL {
      grid-area: totalPL;
    }

    .ratePL,
    .totalPL {
      background-color: #fff;
      box-shadow: 0px 0px 4.26px 1.74px rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      .title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;

        .sub {
          font-size: 14px;
          font-weight: normal;
          display: block;
        }
      }

      .value {
        font-size: 36px;
        font-weight: bold;
        color: #cd281e;

        .unit {
          font-size: 20px;
        }
      }
    }

    .holdDays {
      grid-area: holdDays;
      background-color: #fffade;
      box-shadow: 0px 0px 4.26px 1.74px rgba(0, 0, 0, 0.1);
      padding: 30px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      .title {
        font-size: 22px;
        font-weight: bold;

        .line {
          background: linear-gradient(transparent 60%, #ffd800 60%);
        }
      }

      .value {
        font-size: 36px;
        font-weight: bold;
        color: #cd281e;

      }
    }
  }
}

.sim_option .ifDown:before {
  content: "";
  background-image: url(../img/ifDown/rateDown.svg);
  background-size: contain;
  background-repeat: no-repeat;
  /* width: 141px;
  height: 146px; */
  width: 100px;
  height: 105px;
  display: block;
  position: absolute;
  /* right: 30px;
  top: 30px; */
  right: 50px;
  top: 20px;
}


@media (640px <=width <950px) {
  .precondition>.inner {
    flex-direction: column;
  }

  .precondition>.inner>.text br {
    display: none;
  }

  .precondition .now-data {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 0;
    right: 0;
    margin-top: 20px;
  }

}