@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --black: #333;
  --plus: red;
  --minus: blue;
  --zero: #999;
  --border: #ccc;
  --Thin: 100;
  --ExtraLight: 200;
  --Light: 300;
  --Regular: 400;
  --Medium: 500;
  --SemiBold: 600;
  --Bold: 700;
  --ExtraBold: 800;
  --Black: 900;
}
:root .is-plus {
  color: var(--plus);
}
:root .is-minus {
  color: var(--minus);
}
:root .is-zero {
  color: var(--zero);
}

html {
  height: 100%;
  font-size: 5.1282051282vw;
}
html body,
html body * {
  all: unset;
}
html body dialog,
html body script,
html body style {
  all: revert;
}
html body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  line-height: 1.5;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--Regular);
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
html body img {
  max-width: 100%;
  vertical-align: bottom;
}
html body a,
html body button:not(:disabled),
html body select,
html body label {
  cursor: pointer;
}
html body strong {
  font-weight: bold;
}

.c-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: solid var(--border);
  border-width: 1px 0 0 0;
  font-size: 60%;
}
.c-calendar__group {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 7;
}
.c-calendar__group--yobi > div {
  display: grid;
  justify-items: center;
  padding: 0.2em;
  font-weight: var(--Light);
  color: var(--border);
}
.c-calendar__group--date {
  grid-auto-rows: auto 1fr;
}
.c-calendar__group--date::before {
  content: "";
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}
.c-calendar__group--date[data-startday="1"]::before {
  grid-column: span 1;
}
.c-calendar__group--date[data-startday="2"]::before {
  grid-column: span 2;
}
.c-calendar__group--date[data-startday="3"]::before {
  grid-column: span 3;
}
.c-calendar__group--date[data-startday="4"]::before {
  grid-column: span 4;
}
.c-calendar__group--date[data-startday="5"]::before {
  grid-column: span 5;
}
.c-calendar__group--date[data-startday="6"]::before {
  grid-column: span 6;
}
.c-calendar__group--date[data-startday="0"]::before {
  content: none;
}
.c-calendar__group > div, .c-calendar__group::before {
  border: solid var(--border);
  border-width: 0 0 1px 0;
}
.c-calendar__date {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  padding: 0.2em 0.4em;
}
.c-calendar__date:hover {
  background: #eee;
}
.c-calendar__date .date {
  font-weight: var(--Light);
  color: var(--border);
}
.c-calendar__date .profits {
  display: grid;
  justify-items: end;
  margin-top: 0.2em;
}
.c-calendar__date .profits span.profit {
  font-weight: var(--Medium);
}
.c-calendar__date .profits span.rate {
  font-size: 80%;
  font-weight: var(--Light);
}
.c-calendar__date .profits span.capital {
  font-size: 80%;
  font-weight: var(--Light);
}

.c-trade-detail {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-column-gap: 0.4em;
  font-size: 85%;
}
.c-trade-detail[hidden] {
  display: none;
}
.c-trade-detail .daily-total {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 6;
  align-items: center;
  padding: 0.4em 0.1em;
}
.c-trade-detail .daily-total .win,
.c-trade-detail .daily-total .lose,
.c-trade-detail .daily-total .result {
  font-size: 80%;
}
.c-trade-detail .stock-detail {
  display: grid;
  grid-column: span 6;
  grid-template-columns: subgrid;
  border-top: 1px solid var(--border);
  padding: 0.4em 0.1em;
  font-size: 85%;
}
.c-trade-detail .stock-detail:last-child {
  border-bottom: 1px solid var(--border);
}
.c-trade-detail .stock-detail .label {
  font-size: 85%;
}
.c-trade-detail .stock-detail .total {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 6;
  align-items: center;
}
.c-trade-detail .stock-detail .total .win,
.c-trade-detail .stock-detail .total .lose,
.c-trade-detail .stock-detail .total .result {
  font-size: 80%;
}
.c-trade-detail .stock-detail .trades {
  grid-column: span 6;
  justify-self: end;
  display: grid;
  grid-row-gap: 0.2em;
  grid-template-columns: repeat(5, auto);
  margin-top: 0.4em;
  opacity: 0.4;
  font-size: 90%;
}
.c-trade-detail .stock-detail:not(.show-trades) .trades {
  position: fixed;
  visibility: hidden;
}

.c-trade-detail .stock-detail .trades .trade {
  grid-column: span 5;
  display: grid;
  grid-template-columns: subgrid;
  grid-column-gap: 0.2em;
  align-items: center;
  font-size: 90%;
}
.c-trade-detail .stock-detail .trades .trade .result {
  grid-column: 1;
}
.c-trade-detail .stock-detail .trades .trade .quantity {
  margin-inline: 0.6em;
  justify-self: end;
  font-size: 80%;
}
.c-trade-detail .stock-detail .trades .trade .arrow {
  font-size: 80%;
}
.c-trade-detail .stock-detail .trades .trade .in,
.c-trade-detail .stock-detail .trades .trade .out {
  justify-self: end;
}
.c-trade-detail .subtotal {
  justify-self: end;
}
.c-trade-detail .win,
.c-trade-detail .lose {
  justify-self: end;
}
.c-trade-detail .result {
  justify-self: end;
}

.p-header .menu {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  column-gap: 1em;
  box-sizing: border-box;
  width: 100%;
  height: 3em;
  padding-right: 3.5em;
  background: var(--black);
  color: white;
}
.p-header:not(.open) .menu {
  visibility: hidden;
}

.p-header .menu .home {
  margin-right: auto;
  display: flex;
  aspect-ratio: 1;
  width: 1.6em;
  mask: url(../images/icon_home.svg) no-repeat center center/80%;
  background: white;
}
.p-header .menu .uploadcsv,
.p-header .menu .stockname {
  display: flex;
  align-items: center;
  column-gap: 0.2em;
  font-size: 70%;
}
.p-header .menu .uploadcsv::before,
.p-header .menu .stockname::before {
  width: 1.4em;
  background-color: white !important;
}
.p-header .menu .uploadcsv::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_add.svg) no-repeat center center/contain;
  background-color: var(--black);
}
.p-header .menu .stockname::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_edit.svg) no-repeat center center/contain;
  background-color: var(--black);
}
.p-header .controls {
  position: fixed;
  z-index: 2;
  right: 0;
  top: 0;
}
.p-header .controls button {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 3em;
  aspect-ratio: 1;
}
.p-header .controls button::before, .p-header .controls button::after {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 1;
  width: 2em;
}
.p-header .controls button::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_close.svg) no-repeat center center/contain;
  background-color: var(--black);
  background-color: white;
}
.p-header.open .controls button::before {
  transform: scale(1);
  transition: transform 200ms;
}

.p-header:not(.open) .controls button::before {
  transform: scale(0.8);
  visibility: hidden;
}

.p-header .controls button::after {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_menu.svg) no-repeat center center/contain;
  background-color: var(--black);
}
.p-header.open .controls button::after {
  transform: scale(0.8);
  visibility: hidden;
}

.p-header:not(.open) .controls button::after {
  transform: scale(1);
  transition: transform 200ms;
}

.p-login,
.p-login-redirect {
  align-self: stretch;
  grid-row: 1/4;
  display: grid;
  grid-row-gap: 2em;
  align-content: center;
  justify-items: center;
  padding: 2em;
}

.p-login a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.8em;
  border-radius: 1.4em;
  padding: 0 2.4em;
  background: black;
  color: white;
}

.p-login-redirect {
  background: red;
}
.p-login-redirect .error {
  color: white;
  font-size: smaller;
  font-weight: bold;
}
.p-login-redirect a {
  display: flex;
  height: 2.6em;
  align-items: center;
  border-radius: 1.3em;
  padding: 0 1em;
  background: white;
  font-size: smaller;
}

.p-stocknames {
  display: grid;
  padding: 1em;
  padding-top: 3em;
}
.p-stocknames dl {
  display: grid;
  align-items: center;
  grid-template-columns: max-content 1fr;
  grid-gap: 1em 1em;
  font-size: 70%;
}
.p-stocknames dl dd input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #ccc;
  padding: 0.4em;
}
.p-stocknames button {
  position: fixed;
  right: 0.6em;
  bottom: 0.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 3.6em;
  border-radius: 50%;
  background: var(--black);
  color: white;
  font-size: 80%;
  letter-spacing: 0.8em;
}
.p-stocknames button::before {
  content: "";
  width: 1.8em;
  aspect-ratio: 1;
  mask: url(../images/icon_submit.svg) no-repeat center center/contain;
  background: white;
}

.p-top {
  padding: 0.8em;
  display: grid;
  grid-row-gap: 0.8em;
}
.p-top-head {
  margin-inline: auto;
}
.p-top-head .title {
  font-size: 90%;
}
.p-top-head .prev,
.p-top-head .next {
  position: fixed;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 3em;
  border-radius: 10% 0 0 10%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  opacity: 0.5;
  background: white;
}
.p-top-head .prev::before,
.p-top-head .next::before {
  content: "";
  aspect-ratio: 1/1;
  mask: url(../images/icon_arrow.svg) no-repeat center center/contain;
  background-color: var(--black);
  width: 1em;
}
.p-top-head .prev {
  left: 0;
  transform: scaleX(-1) translate(0, -50%);
}
.p-top-head .next {
  right: 0;
  transform: translate(0, -50%);
}
.p-top-result {
  display: grid;
  justify-items: center;
  margin-inline: auto;
  font-size: 150%;
  font-weight: var(--Medium);
  line-height: 1.3;
}
.p-top-result .rate {
  font-size: 50%;
  font-weight: var(--Light);
}
.p-top-result .cumulative {
  font-size: 50%;
  font-weight: var(--Light);
}