@charset "UTF-8";

/*reset------------------------------------------------------------------------------------------------------*/

html, body, div, object, iframe, video,
h1, h2, h3, h4, h5, h6, p,
img, b, i, em, a, span,
dl, dt, dd, ol, ul, li,
form, label, input, select, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
main, article, aside, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  background: transparent;
  background-repeat: no-repeat;
  text-decoration: none;
  border-radius: 0;
}
html { font-family: 'Noto Sans JP', sans-serif; }
body {
  background: #fff;
  min-width: 320px;
}
main, article, aside, footer, header, nav, section,
dl, dt, dd, ol, ul, li { display: block; }
ol, ul { list-style: none; }
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  width: 100%;
  height: auto;
  font-size: 0;
  line-height: 0;
}
a, span, b, em, i, label {
  color: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-align: inherit;
  vertical-align: inherit;
}
textarea { resize: none; }
a, th, button { text-align: center; }
h1, h2, h3, h4, h5, h6, p { vertical-align: baseline; }
td { vertical-align: top; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p,
li, th, td, dt, dd, button, input, textarea { line-height: 1.4; }

/*base------------------------------------------------------------------------------------------------------*/

html {
  font-size: 12px;
}
body {
  background: #343638;
}
.scroll-stop {
  overflow: hidden;
}

/*scroll bar*/
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track {
  background: #343638;
  border-left: solid 1px rgba(0,0,0,0.25);
}
::-webkit-scrollbar-thumb {
  background: #f0497c;
  border-radius: 8px;
  border: solid 1px rgba(0,0,0,0.25);
  border-right-style: none;
  box-shadow:
    0px 1px 0px 0px rgba(255,255,255,0.05) inset,
    0px -1px 0px 0px rgba(0,0,0,0) inset;
}
::-webkit-scrollbar-thumb:hover {
  background: #f05d8a;
  cursor: pointer;
}

/*文字選択*/
::selection {
  background: #f02362;
  color: #fff;
}

/*z-index------------------------------------------------------------------------------------------------------*/

.block--fix-head,
.block--fix-top,
.block--fix-bottom { z-index: 1; }
.window-area--active { z-index: 10; }
.message { z-index: 100; }

/*min-width------------------------------------------------------------------------------------------------------*/

[data-gu-min-grid="1"] { min-width: 60px; }
[data-gu-min-grid="2"] { min-width: 106px; }
[data-gu-min-grid="3"] { min-width: 152px; }
[data-gu-min-grid="4"] { min-width: 198px; }
[data-gu-min-grid="5"] { min-width: 244px; }
[data-gu-min-grid="6"] { min-width: 290px; }
[data-gu-min-grid="7"] { min-width: 336px; }
[data-gu-min-grid="8"] { min-width: 382px; }
[data-gu-min-grid="9"] { min-width: 428px; }
[data-gu-min-grid="10"] { min-width: 474px; }
[data-gu-min-grid="11"] { min-width: 520px; }
[data-gu-min-grid="12"] { min-width: 566px; }
[data-gu-min-grid="13"] { min-width: 612px; }
[data-gu-min-grid="14"] { min-width: 658px; }
[data-gu-min-grid="15"] { min-width: 704px; }
[data-gu-min-grid="16"] { min-width: 750px; }
[data-gu-min-grid="17"] { min-width: 796px; }
[data-gu-min-grid="18"] { min-width: 842px; }
[data-gu-min-grid="19"] { min-width: 888px; }
[data-gu-min-grid="20"] { min-width: 934px; }
[data-gu-min-grid="21"] { min-width: 980px; }
[data-gu-min-grid="22"] { min-width: 1026px; }
[data-gu-min-grid="23"] { min-width: 1072px; }
[data-gu-min-grid="24"] { min-width: 1118px; }
[data-gu-min-grid="25"] { min-width: 1164px; }
[data-gu-min-grid="26"] { min-width: 1210px; }
[data-gu-min-grid="27"] { min-width: 1256px; }
[data-gu-min-grid="28"] { min-width: 1302px; }
[data-gu-min-grid="29"] { min-width: 1348px; }
[data-gu-min-grid="30"] { min-width: 1394px; }
[data-gu-min-grid="31"] { min-width: 1440px; }
[data-gu-min-grid="32"] { min-width: 1486px; }

/*block------------------------------------------------------------------------------------------------------*/

.block {
  width: 100%;
  position: relative;
  height: 60px;
  background: #343638;
  border-top: 1px solid rgba(0,0,0,0.25);
  box-shadow:
    0px 1px 0px 0px rgba(255,255,255,0.05) inset,
    0px -1px 0px 0px rgba(0,0,0,0) inset;
}

.block--first {
  border-top-style: none;
}

/*block height*/
.block--h-1 { height: 60px; }
.block--h-2 { height: 106px; }
.block--h-3 { height: 152px; }
.block--h-4 { height: 198px; }
.block--h-5 { height: 244px; }
.block--h-6 { height: 290px; }
.block--h-7 { height: 336px; }
.block--h-8 { height: 382px; }
.block--h-9 { height: 428px; }
.block--h-10 { height: 474px; }
.block--h-11 { height: 520px; }
.block--h-12 { height: 566px; }
.block--h-13 { height: 612px; }
.block--h-14 { height: 658px; }
.block--h-15 { height: 704px; }
.block--h-16 { height: 750px; }
.block--h-17 { height: 796px; }
.block--h-18 { height: 842px; }
.block--h-19 { height: 888px; }
.block--h-20 { height: 934px; }
.block--h-21 { height: 980px; }
.block--h-22 { height: 1026px; }
.block--h-23 { height: 1072px; }
.block--h-24 { height: 1118px; }
.block--h-25 { height: 1164px; }
.block--h-26 { height: 1210px; }
.block--h-27 { height: 1256px; }
.block--h-28 { height: 1302px; }
.block--h-29 { height: 1348px; }
.block--h-30 { height: 1394px; }
.block--h-31 { height: 1440px; }
.block--h-32 { height: 1486px; }

/*block fix*/
.block--fix-head,
.block--fix-top,
.block--fix-bottom {
  background: #1d1f21;
  position: fixed;
  left: 0;
}
.block--fix-head {
  background: #f02362;
  border-top-style: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  top: 0;
}

.block--fix-head__title {
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,0.9);
  text-shadow: 0px -1px 0px rgba(0,0,0,1);
  font-size: 1.5em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block--fix-top {
  border-top-style: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  top: 60px;
}

.block--fix-bottom {
  bottom: 0;
}

/*item------------------------------------------------------------------------------------------------------*/

.item {
  position: absolute;
  font-family: 'Noto Sans JP', sans-serif;
  width: 32px;
  height: 32px;
  top: 14px;
  left: 14px;
  transition: background 0.1s;
}

.item--button,
.item--select {
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow:
    0px 1px 0px 0px rgba(255,255,255,0.05) inset,
    0px -1px 0px 0px rgba(0,0,0,0) inset;
  background: #3c4145;
  color: rgba(255,255,255,0.75);
  text-shadow: 0px -1px 0px rgba(0,0,0,1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.item--button:hover,
.item--select:hover {
  background: #626365;
  cursor: pointer;
}
.item--button:active,
.item--select:active {
  box-shadow:
    0px -1px 0px 0px rgba(255,255,255,0.05) inset,
    0px 1px 0px 0px rgba(0,0,0,0) inset;
  transform: translateY(1px);
}

.item--button--color-1 {
  background: #f0497c;
  color: rgba(255,255,255,0.9);
}
.item--button--color-1:hover {
  background: #f05d8a;
}

.item--select {
  padding: 0 7px;
}
.item--select option {
  padding: 7px;
  background: #3c4145;
  cursor: pointer;
}
.item--select option:hover,
.item--select option:checked {
  background: #f0497c;
}

.item--input {
  padding: 7px;
  letter-spacing: 1px;
  font-family: 'Roboto Mono', monospace;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow:
    0px -1px 0px 0px rgba(255,255,255,0.05) inset,
    0px 1px 0px 0px rgba(0,0,0,0) inset;
  background: #2d2f31;
  color: rgba(255,255,255,0.75);
}
.item--input:focus {
  background: #626365;
}
.item--input::-webkit-scrollbar-track {
  background: transparent;
  border-style: none;
}
.item--input::-webkit-scrollbar-thumb {
  background: #f0497c;
}
.item--input::-webkit-scrollbar-thumb:hover {
  background: #f05d8a;
}

.item--radio,
.item--check {
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow:
    0px 1px 0px 0px rgba(255,255,255,0.05) inset,
    0px -1px 0px 0px rgba(0,0,0,0) inset;
  background: #3c4145;
}
.item--radio:hover,
.item--check:hover {
  background: #626365;
}
.item--radio:active,
.item--check:active {
  box-shadow:
    0px -1px 0px 0px rgba(255,255,255,0.05) inset,
    0px 1px 0px 0px rgba(0,0,0,0) inset;
  transform: translateY(1px);
}
.item--radio > input + span,
.item--check > input + span {
  margin-right: 6px;
  background: #343638;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow:
    0px 1px 0px 0px rgba(255,255,255,0.05) inset,
    0px -1px 0px 0px rgba(0,0,0,0) inset;
  display: block;
}
.item--check > input + span {
  border-radius: 0px;
}
.item--radio > input:checked + span,
.item--check > input:checked + span {
  background: #f0497c;
}

.item--label-before,
.item--label-after {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.75);
  text-shadow: 0px -1px 0px rgba(0,0,0,1);
  text-align: center;
}
.item--label-before {
  justify-content: flex-end;
}
.item--label-after {
  justify-content: flex-start;
}

/*item size*/
.item--w-0 { width: -14px; }
.item--h-0 { height: -14px; }
.item--w-0-fl { width: calc(100% - 28px); }
.item--w-1 { width: 32px; }
.item--h-1 { height: 32px; }
.item--w-1-fl { width: calc(100% - 74px); }
.item--w-2 { width: 78px; }
.item--h-2 { height: 78px; }
.item--w-2-fl { width: calc(100% - 120px); }
.item--w-3 { width: 124px; }
.item--h-3 { height: 124px; }
.item--w-3-fl { width: calc(100% - 166px); }
.item--w-4 { width: 170px; }
.item--h-4 { height: 170px; }
.item--w-4-fl { width: calc(100% - 212px); }
.item--w-5 { width: 216px; }
.item--h-5 { height: 216px; }
.item--w-5-fl { width: calc(100% - 258px); }
.item--w-6 { width: 262px; }
.item--h-6 { height: 262px; }
.item--w-6-fl { width: calc(100% - 304px); }
.item--w-7 { width: 308px; }
.item--h-7 { height: 308px; }
.item--w-7-fl { width: calc(100% - 350px); }
.item--w-8 { width: 354px; }
.item--h-8 { height: 354px; }
.item--w-8-fl { width: calc(100% - 396px); }
.item--w-9 { width: 400px; }
.item--h-9 { height: 400px; }
.item--w-9-fl { width: calc(100% - 442px); }
.item--w-10 { width: 446px; }
.item--h-10 { height: 446px; }
.item--w-10-fl { width: calc(100% - 488px); }
.item--w-11 { width: 492px; }
.item--h-11 { height: 492px; }
.item--w-11-fl { width: calc(100% - 534px); }
.item--w-12 { width: 538px; }
.item--h-12 { height: 538px; }
.item--w-12-fl { width: calc(100% - 580px); }
.item--w-13 { width: 584px; }
.item--h-13 { height: 584px; }
.item--w-13-fl { width: calc(100% - 626px); }
.item--w-14 { width: 630px; }
.item--h-14 { height: 630px; }
.item--w-14-fl { width: calc(100% - 672px); }
.item--w-15 { width: 676px; }
.item--h-15 { height: 676px; }
.item--w-15-fl { width: calc(100% - 718px); }
.item--w-16 { width: 722px; }
.item--h-16 { height: 722px; }
.item--w-16-fl { width: calc(100% - 764px); }
.item--w-17 { width: 768px; }
.item--h-17 { height: 768px; }
.item--w-17-fl { width: calc(100% - 810px); }
.item--w-18 { width: 814px; }
.item--h-18 { height: 814px; }
.item--w-18-fl { width: calc(100% - 856px); }
.item--w-19 { width: 860px; }
.item--h-19 { height: 860px; }
.item--w-19-fl { width: calc(100% - 902px); }
.item--w-20 { width: 906px; }
.item--h-20 { height: 906px; }
.item--w-20-fl { width: calc(100% - 948px); }
.item--w-21 { width: 952px; }
.item--h-21 { height: 952px; }
.item--w-21-fl { width: calc(100% - 994px); }
.item--w-22 { width: 998px; }
.item--h-22 { height: 998px; }
.item--w-22-fl { width: calc(100% - 1040px); }
.item--w-23 { width: 1044px; }
.item--h-23 { height: 1044px; }
.item--w-23-fl { width: calc(100% - 1086px); }
.item--w-24 { width: 1090px; }
.item--h-24 { height: 1090px; }
.item--w-24-fl { width: calc(100% - 1132px); }
.item--w-25 { width: 1136px; }
.item--h-25 { height: 1136px; }
.item--w-25-fl { width: calc(100% - 1178px); }
.item--w-26 { width: 1182px; }
.item--h-26 { height: 1182px; }
.item--w-26-fl { width: calc(100% - 1224px); }
.item--w-27 { width: 1228px; }
.item--h-27 { height: 1228px; }
.item--w-27-fl { width: calc(100% - 1270px); }
.item--w-28 { width: 1274px; }
.item--h-28 { height: 1274px; }
.item--w-28-fl { width: calc(100% - 1316px); }
.item--w-29 { width: 1320px; }
.item--h-29 { height: 1320px; }
.item--w-29-fl { width: calc(100% - 1362px); }
.item--w-30 { width: 1366px; }
.item--h-30 { height: 1366px; }
.item--w-30-fl { width: calc(100% - 1408px); }
.item--w-31 { width: 1412px; }
.item--h-31 { height: 1412px; }
.item--w-31-fl { width: calc(100% - 1454px); }
.item--w-32 { width: 1458px; }
.item--h-32 { height: 1458px; }
.item--w-32-fl { width: calc(100% - 1500px); }

/*item position*/
.item--l-0 { left: 14px; }
.item--r-0 { left: auto; right: 14px; }
.item--t-0 { top: 14px; }
.item--b-0 { top: auto; bottom: 14px; }
.item--l-1 { left: 60px; }
.item--r-1 { left: auto; right: 60px; }
.item--t-1 { top: 60px; }
.item--b-1 { top: auto; bottom: 60px; }
.item--l-2 { left: 106px; }
.item--r-2 { left: auto; right: 106px; }
.item--t-2 { top: 106px; }
.item--b-2 { top: auto; bottom: 106px; }
.item--l-3 { left: 152px; }
.item--r-3 { left: auto; right: 152px; }
.item--t-3 { top: 152px; }
.item--b-3 { top: auto; bottom: 152px; }
.item--l-4 { left: 198px; }
.item--r-4 { left: auto; right: 198px; }
.item--t-4 { top: 198px; }
.item--b-4 { top: auto; bottom: 198px; }
.item--l-5 { left: 244px; }
.item--r-5 { left: auto; right: 244px; }
.item--t-5 { top: 244px; }
.item--b-5 { top: auto; bottom: 244px; }
.item--l-6 { left: 290px; }
.item--r-6 { left: auto; right: 290px; }
.item--t-6 { top: 290px; }
.item--b-6 { top: auto; bottom: 290px; }
.item--l-7 { left: 336px; }
.item--r-7 { left: auto; right: 336px; }
.item--t-7 { top: 336px; }
.item--b-7 { top: auto; bottom: 336px; }
.item--l-8 { left: 382px; }
.item--r-8 { left: auto; right: 382px; }
.item--t-8 { top: 382px; }
.item--b-8 { top: auto; bottom: 382px; }
.item--l-9 { left: 428px; }
.item--r-9 { left: auto; right: 428px; }
.item--t-9 { top: 428px; }
.item--b-9 { top: auto; bottom: 428px; }
.item--l-10 { left: 474px; }
.item--r-10 { left: auto; right: 474px; }
.item--t-10 { top: 474px; }
.item--b-10 { top: auto; bottom: 474px; }
.item--l-11 { left: 520px; }
.item--r-11 { left: auto; right: 520px; }
.item--t-11 { top: 520px; }
.item--b-11 { top: auto; bottom: 520px; }
.item--l-12 { left: 566px; }
.item--r-12 { left: auto; right: 566px; }
.item--t-12 { top: 566px; }
.item--b-12 { top: auto; bottom: 566px; }
.item--l-13 { left: 612px; }
.item--r-13 { left: auto; right: 612px; }
.item--t-13 { top: 612px; }
.item--b-13 { top: auto; bottom: 612px; }
.item--l-14 { left: 658px; }
.item--r-14 { left: auto; right: 658px; }
.item--t-14 { top: 658px; }
.item--b-14 { top: auto; bottom: 658px; }
.item--l-15 { left: 704px; }
.item--r-15 { left: auto; right: 704px; }
.item--t-15 { top: 704px; }
.item--b-15 { top: auto; bottom: 704px; }
.item--l-16 { left: 750px; }
.item--r-16 { left: auto; right: 750px; }
.item--t-16 { top: 750px; }
.item--b-16 { top: auto; bottom: 750px; }
.item--l-17 { left: 796px; }
.item--r-17 { left: auto; right: 796px; }
.item--t-17 { top: 796px; }
.item--b-17 { top: auto; bottom: 796px; }
.item--l-18 { left: 842px; }
.item--r-18 { left: auto; right: 842px; }
.item--t-18 { top: 842px; }
.item--b-18 { top: auto; bottom: 842px; }
.item--l-19 { left: 888px; }
.item--r-19 { left: auto; right: 888px; }
.item--t-19 { top: 888px; }
.item--b-19 { top: auto; bottom: 888px; }
.item--l-20 { left: 934px; }
.item--r-20 { left: auto; right: 934px; }
.item--t-20 { top: 934px; }
.item--b-20 { top: auto; bottom: 934px; }
.item--l-21 { left: 980px; }
.item--r-21 { left: auto; right: 980px; }
.item--t-21 { top: 980px; }
.item--b-21 { top: auto; bottom: 980px; }
.item--l-22 { left: 1026px; }
.item--r-22 { left: auto; right: 1026px; }
.item--t-22 { top: 1026px; }
.item--b-22 { top: auto; bottom: 1026px; }
.item--l-23 { left: 1072px; }
.item--r-23 { left: auto; right: 1072px; }
.item--t-23 { top: 1072px; }
.item--b-23 { top: auto; bottom: 1072px; }
.item--l-24 { left: 1118px; }
.item--r-24 { left: auto; right: 1118px; }
.item--t-24 { top: 1118px; }
.item--b-24 { top: auto; bottom: 1118px; }
.item--l-25 { left: 1164px; }
.item--r-25 { left: auto; right: 1164px; }
.item--t-25 { top: 1164px; }
.item--b-25 { top: auto; bottom: 1164px; }
.item--l-26 { left: 1210px; }
.item--r-26 { left: auto; right: 1210px; }
.item--t-26 { top: 1210px; }
.item--b-26 { top: auto; bottom: 1210px; }
.item--l-27 { left: 1256px; }
.item--r-27 { left: auto; right: 1256px; }
.item--t-27 { top: 1256px; }
.item--b-27 { top: auto; bottom: 1256px; }
.item--l-28 { left: 1302px; }
.item--r-28 { left: auto; right: 1302px; }
.item--t-28 { top: 1302px; }
.item--b-28 { top: auto; bottom: 1302px; }
.item--l-29 { left: 1348px; }
.item--r-29 { left: auto; right: 1348px; }
.item--t-29 { top: 1348px; }
.item--b-29 { top: auto; bottom: 1348px; }
.item--l-30 { left: 1394px; }
.item--r-30 { left: auto; right: 1394px; }
.item--t-30 { top: 1394px; }
.item--b-30 { top: auto; bottom: 1394px; }
.item--l-31 { left: 1440px; }
.item--r-31 { left: auto; right: 1440px; }
.item--t-31 { top: 1440px; }
.item--b-31 { top: auto; bottom: 1440px; }

/*window------------------------------------------------------------------------------------------------------*/

.window-area {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
}
.window-area--active {
  display: flex;
}

.window-sheet {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.window {
  display: none;
  background: #343638;
  position: relative;
  border-radius: 8px;
  border: solid 1px rgba(0,0,0,0.25);
}
.window--active {
  display: block;
}

/*window size*/
.window--w-0 { width: 14px; }
.window--h-0 { height: 14px; }
.window--w-0-fl { width: calc(100% - 14px); }
.window--h-0-fl { height: calc(100% - 14px); }
.window--w-1 { width: 60px; }
.window--h-1 { height: 60px; }
.window--w-1-fl { width: calc(100% - 60px); }
.window--h-1-fl { height: calc(100% - 60px); }
.window--w-2 { width: 106px; }
.window--h-2 { height: 106px; }
.window--w-2-fl { width: calc(100% - 106px); }
.window--h-2-fl { height: calc(100% - 106px); }
.window--w-3 { width: 152px; }
.window--h-3 { height: 152px; }
.window--w-3-fl { width: calc(100% - 152px); }
.window--h-3-fl { height: calc(100% - 152px); }
.window--w-4 { width: 198px; }
.window--h-4 { height: 198px; }
.window--w-4-fl { width: calc(100% - 198px); }
.window--h-4-fl { height: calc(100% - 198px); }
.window--w-5 { width: 244px; }
.window--h-5 { height: 244px; }
.window--w-5-fl { width: calc(100% - 244px); }
.window--h-5-fl { height: calc(100% - 244px); }
.window--w-6 { width: 290px; }
.window--h-6 { height: 290px; }
.window--w-6-fl { width: calc(100% - 290px); }
.window--h-6-fl { height: calc(100% - 290px); }
.window--w-7 { width: 336px; }
.window--h-7 { height: 336px; }
.window--w-7-fl { width: calc(100% - 336px); }
.window--h-7-fl { height: calc(100% - 336px); }
.window--w-8 { width: 382px; }
.window--h-8 { height: 382px; }
.window--w-8-fl { width: calc(100% - 382px); }
.window--h-8-fl { height: calc(100% - 382px); }
.window--w-9 { width: 428px; }
.window--h-9 { height: 428px; }
.window--w-9-fl { width: calc(100% - 428px); }
.window--h-9-fl { height: calc(100% - 428px); }
.window--w-10 { width: 474px; }
.window--h-10 { height: 474px; }
.window--w-10-fl { width: calc(100% - 474px); }
.window--h-10-fl { height: calc(100% - 474px); }
.window--w-11 { width: 520px; }
.window--h-11 { height: 520px; }
.window--w-11-fl { width: calc(100% - 520px); }
.window--h-11-fl { height: calc(100% - 520px); }
.window--w-12 { width: 566px; }
.window--h-12 { height: 566px; }
.window--w-12-fl { width: calc(100% - 566px); }
.window--h-12-fl { height: calc(100% - 566px); }
.window--w-13 { width: 612px; }
.window--h-13 { height: 612px; }
.window--w-13-fl { width: calc(100% - 612px); }
.window--h-13-fl { height: calc(100% - 612px); }
.window--w-14 { width: 658px; }
.window--h-14 { height: 658px; }
.window--w-14-fl { width: calc(100% - 658px); }
.window--h-14-fl { height: calc(100% - 658px); }
.window--w-15 { width: 704px; }
.window--h-15 { height: 704px; }
.window--w-15-fl { width: calc(100% - 704px); }
.window--h-15-fl { height: calc(100% - 704px); }
.window--w-16 { width: 750px; }
.window--h-16 { height: 750px; }
.window--w-16-fl { width: calc(100% - 750px); }
.window--h-16-fl { height: calc(100% - 750px); }
.window--w-17 { width: 796px; }
.window--h-17 { height: 796px; }
.window--w-17-fl { width: calc(100% - 796px); }
.window--h-17-fl { height: calc(100% - 796px); }
.window--w-18 { width: 842px; }
.window--h-18 { height: 842px; }
.window--w-18-fl { width: calc(100% - 842px); }
.window--h-18-fl { height: calc(100% - 842px); }
.window--w-19 { width: 888px; }
.window--h-19 { height: 888px; }
.window--w-19-fl { width: calc(100% - 888px); }
.window--h-19-fl { height: calc(100% - 888px); }
.window--w-20 { width: 934px; }
.window--h-20 { height: 934px; }
.window--w-20-fl { width: calc(100% - 934px); }
.window--h-20-fl { height: calc(100% - 934px); }
.window--w-21 { width: 980px; }
.window--h-21 { height: 980px; }
.window--w-21-fl { width: calc(100% - 980px); }
.window--h-21-fl { height: calc(100% - 980px); }
.window--w-22 { width: 1026px; }
.window--h-22 { height: 1026px; }
.window--w-22-fl { width: calc(100% - 1026px); }
.window--h-22-fl { height: calc(100% - 1026px); }
.window--w-23 { width: 1072px; }
.window--h-23 { height: 1072px; }
.window--w-23-fl { width: calc(100% - 1072px); }
.window--h-23-fl { height: calc(100% - 1072px); }
.window--w-24 { width: 1118px; }
.window--h-24 { height: 1118px; }
.window--w-24-fl { width: calc(100% - 1118px); }
.window--h-24-fl { height: calc(100% - 1118px); }
.window--w-25 { width: 1164px; }
.window--h-25 { height: 1164px; }
.window--w-25-fl { width: calc(100% - 1164px); }
.window--h-25-fl { height: calc(100% - 1164px); }
.window--w-26 { width: 1210px; }
.window--h-26 { height: 1210px; }
.window--w-26-fl { width: calc(100% - 1210px); }
.window--h-26-fl { height: calc(100% - 1210px); }
.window--w-27 { width: 1256px; }
.window--h-27 { height: 1256px; }
.window--w-27-fl { width: calc(100% - 1256px); }
.window--h-27-fl { height: calc(100% - 1256px); }
.window--w-28 { width: 1302px; }
.window--h-28 { height: 1302px; }
.window--w-28-fl { width: calc(100% - 1302px); }
.window--h-28-fl { height: calc(100% - 1302px); }
.window--w-29 { width: 1348px; }
.window--h-29 { height: 1348px; }
.window--w-29-fl { width: calc(100% - 1348px); }
.window--h-29-fl { height: calc(100% - 1348px); }
.window--w-30 { width: 1394px; }
.window--h-30 { height: 1394px; }
.window--w-30-fl { width: calc(100% - 1394px); }
.window--h-30-fl { height: calc(100% - 1394px); }
.window--w-31 { width: 1440px; }
.window--h-31 { height: 1440px; }
.window--w-31-fl { width: calc(100% - 1440px); }
.window--h-31-fl { height: calc(100% - 1440px); }
.window--w-32 { width: 1486px; }
.window--h-32 { height: 1486px; }
.window--w-32-fl { width: calc(100% - 1486px); }
.window--h-32-fl { height: calc(100% - 1486px); }

.window__inner {
  padding: 14px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.window__inner::-webkit-scrollbar-track {
  background: transparent;
  border-style: none;
}
.window__inner::-webkit-scrollbar-thumb {
  background: #f0497c;
  border: solid 1px rgba(0,0,0,0.25);
}
.window__inner::-webkit-scrollbar-thumb:hover {
  background: #f05d8a;
}

.window__item {
  margin-top: 32px;
  padding-top: 32px;
  position: relative;
  border-top: 1px dotted rgba(0,0,0,0.25);
  box-shadow:
    0px 1px 0px 0px rgba(255,255,255,0.05) inset,
    0px -1px 0px 0px rgba(0,0,0,0) inset;
}
.window__item--first {
  margin-top: 0;
  padding-top: 0;
  border-top-style: none;
  box-shadow:
    0px -1px 0px 0px rgba(0,0,0,0) inset;
}

.window__title {
  margin-bottom: 14px;
  font-weight: bold;
  font-size: 1.5rem;
  color: rgba(255,255,255,0.75);
}

.window__text {
  margin-bottom: 14px;
  font-size: 1.25rem;
  color: rgba(255,255,255,0.75);
}

/*message------------------------------------------------------------------------------------------------------*/

.message {
  padding: 0 14px;
  background: #f0497c;
  color: rgba(255,255,255,0.9);
  height: 32px;
  border-radius: 8px;
  border: solid 1px rgba(0,0,0,0.25);
  opacity: 0;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -32px;
  right: 14px;
  transition:
    bottom 0.1s,
    opacity 0.75s;
}
.message--active {
  opacity: 1;
  bottom: 14px;
}

/*rewrite------------------------------------------------------------------------------------------------------*/

#body .none {
  display: none;
}

#body .hide {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 100%;
  bottom: 100%;
}

#body .mr-0 {
  margin-right: 0;
}