@charset "UTF-8";
/* ----------------------------------------
  Miruka.jp
  Version: 0.0.1
  Auther: Miruka
---------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,900|Noto+Sans+JP:900");
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
@import url("https://fonts.googleapis.com/css?family=Caveat&display=swap");
/*!
 * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
*, ::after, ::before {
  box-sizing: border-box; }

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent; }

@-ms-viewport {
  width: device-width; }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }

body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff; }

[tabindex="-1"]:focus {
  outline: 0 !important; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem; }

abbr[data-original-title], abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0; }

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit; }

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol, ol ul, ul ol, ul ul {
  margin-bottom: 0; }

dt {
  font-weight: 700; }

dd {
  margin-bottom: .5rem;
  margin-left: 0; }

blockquote {
  margin: 0 0 1rem; }

dfn {
  font-style: italic; }

b, strong {
  font-weight: bolder; }

small {
  font-size: 80%; }

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }

a:hover {
  color: #0056b3;
  text-decoration: underline; }

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none; }

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none; }

a:not([href]):not([tabindex]):focus {
  outline: 0; }

code, kbd, pre, samp {
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size: 1em; }

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar; }

figure {
  margin: 0 0 1rem; }

img {
  vertical-align: middle;
  border-style: none; }

svg {
  overflow: hidden;
  vertical-align: middle; }

table {
  border-collapse: collapse; }

caption {
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom; }

th {
  text-align: inherit; }

label {
  display: inline-block;
  margin-bottom: .5rem; }

button {
  border-radius: 0; }

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color; }

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

button, input {
  overflow: visible; }

button, select {
  text-transform: none; }

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  padding: 0;
  border-style: none; }

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0; }

input[type=date], input[type=datetime-local], input[type=month], input[type=time] {
  -webkit-appearance: listbox; }

textarea {
  overflow: auto;
  resize: vertical; }

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0; }

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal; }

progress {
  vertical-align: baseline; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto; }

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none; }

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button; }

output {
  display: inline-block; }

summary {
  display: list-item;
  cursor: pointer; }

template {
  display: none; }

[hidden] {
  display: none !important; }

/*# sourceMappingURL=bootstrap-reboot.min.css.map */
html {
  overflow: visible;
  height: 100%; }
  @media (max-width: 34rem) {
    html {
      font-size: 0.875rem; } }
  @media (min-width: 34.001rem) and (max-width: 50rem) {
    html {
      font-size: 1rem; } }
  @media (min-width: 50.001rem) and (max-width: 64rem) {
    html {
      font-size: 1rem; } }
  @media (min-width: 64.001rem) and (max-width: 80rem) {
    html {
      font-size: 1.125rem; } }
  @media (min-width: 80.001rem) and (max-width: 100rem) {
    html {
      font-size: 1.125rem; } }
  @media (min-width: 100.001rem) {
    html {
      font-size: 1.25rem; } }

body {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  min-height: 100%;
  background-color: #8ce1f3;
  color: #212529;
  font-family: "Lato", "Helvetica neue", Arial, YuGothic, "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.5; }

p {
  line-height: 1.875; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }
  h1 > small, h2 > small, h3 > small, h4 > small, h5 > small, h6 > small,
  h1 > .small,
  h2 > .small,
  h3 > .small,
  h4 > .small,
  h5 > .small,
  h6 > .small {
    display: inline-block;
    font-size: 0.75em;
    opacity: .5; }

h1 {
  font-size: 1.75rem; }

h2 {
  font-size: 1.5rem; }

h3 {
  font-size: 1.25rem; }

h4 {
  font-size: 1.125rem; }

h5 {
  font-size: 1rem; }

h6 {
  font-size: 0.875rem; }

code {
  font-family: "Ubuntu Mono", Courier, "Courier New", monospace; }

img {
  max-width: 100%; }

a {
  display: inline-block; }

.l-Basic, .l-Default {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%; }
  .l-Basic > footer, .l-Default > footer,
  .l-Basic > .Footer,
  .l-Default > .Footer {
    margin-top: auto; }

@media (max-width: 50rem) {
  .l-Default > header,
  .l-Default > .Header {
    position: fixed;
    top: 0;
    z-index: 1030; } }

.l-FixedHeader {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%; }
  .l-FixedHeader > header,
  .l-FixedHeader > .Header {
    position: fixed;
    top: 0;
    z-index: 1030; }
  .l-FixedHeader > footer,
  .l-FixedHeader > .Footer {
    margin-top: auto; }

.l-FixedNavbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%; }
  .l-FixedNavbar > footer,
  .l-FixedNavbar > .Footer {
    margin-top: auto;
    padding-bottom: 3rem;
    height: 12rem; }
  .l-FixedNavbar > nav,
  .l-FixedNavbar > .Navbar {
    position: fixed;
    bottom: 0;
    z-index: 1030; }

.l-FixedBars {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%; }
  .l-FixedBars > header,
  .l-FixedBars > .Header {
    position: fixed;
    top: 0;
    z-index: 1030; }
  .l-FixedBars > footer,
  .l-FixedBars > .Footer {
    margin-top: auto;
    padding-bottom: 3rem;
    height: 12rem; }
  .l-FixedBars > nav,
  .l-FixedBars > .Navbar {
    position: fixed;
    bottom: 0;
    z-index: 1030; }

.l-Dashboard {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 10rem;
  min-height: 100%; }
  .l-Dashboard > footer,
  .l-Dashboard > .Footer {
    margin-top: auto; }
  .l-Dashboard > nav,
  .l-Dashboard > .Navbar {
    position: fixed;
    left: 0;
    z-index: 1030;
    width: 10rem;
    height: 100%; }

.l-Container {
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  max-width: 60rem; }
  @media (max-width: 34rem) {
    .l-Container {
      padding: 0 0.5rem; } }

.l-Container--sentence {
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  max-width: 40rem; }
  @media (max-width: 34rem) {
    .l-Container--sentence {
      padding: 0 0.5rem; } }

.l-Container--nopadding {
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  max-width: 60rem; }

.l-Container--fixed-header {
  margin: 0 auto;
  padding: 5rem 1rem;
  width: 100%;
  max-width: 60rem; }

.l-Container--default {
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  max-width: 60rem; }
  @media (max-width: 50rem) {
    .l-Container--default {
      padding: 5rem 0.5rem; } }

.l-Grid, .Header__container, .Footer__container,
.l-Grid--inner {
  display: grid;
  grid-gap: 0;
  padding: 0 1rem; }

@media (max-width: 34rem) {
  .l-Grid, .Header__container, .Footer__container {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "container container container container container container container container container container container container"; }
  .l-Grid--inner {
    grid-template-columns: repeat(12, 1fr); } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .l-Grid, .Header__container, .Footer__container {
    grid-template-columns: repeat(24, 1fr);
    grid-template-areas: "left container container container container container container container container container container container container container container container container container container container container container container right"; }
  .l-Grid--inner {
    grid-template-columns: repeat(24, 1fr); } }

@media (min-width: 50.001rem) and (max-width: 64rem) {
  .l-Grid, .Header__container, .Footer__container {
    grid-template-columns: repeat(36, 1fr);
    grid-template-areas: "left container container container container container container container container container container container container container container container container container container container container container container container container container container container container container container container container container container right"; }
  .l-Grid--inner {
    grid-template-columns: repeat(34, 1fr); } }

@media (min-width: 64.001rem) {
  .l-Grid, .Header__container, .Footer__container {
    grid-template-columns: repeat(36, 1fr);
    grid-template-areas: "left left container container container container container container container container container container container container container container container container container container container container container container container container container container container container container container container container right right"; }
  .l-Grid--inner {
    grid-template-columns: repeat(32, 1fr); } }

.l-Grid--00 {
  display: grid;
  grid-gap: 1px;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(5, 1fr); }

.l-Grid--01 {
  display: grid;
  grid-gap: 1px;
  grid-auto-flow: column dense;
  grid-template-rows: repeat(4, 1fr); }

.l-Grid--02 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr 1fr; }

.l-Grid--03 {
  display: grid;
  grid-gap: 1px;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.l-Grid--04 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(12, 1fr); }

.l-Grid--05 {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(6, 1fr); }

.l-Grid--06 {
  display: grid;
  grid-gap: 1px;
  grid-auto-flow: row;
  grid-auto-rows: minmax(4rem, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); }

.l-Grid--07 {
  display: grid;
  grid-gap: 1px;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(6rem, 1fr);
  grid-template-columns: repeat(3, minmax(6rem, 1fr)); }
  .l-Grid--07 > *:first-child {
    grid-column: 2 / 4;
    grid-row: 1 / 3; }
  .l-Grid--07 > *:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 3 / 5; }

.l-Grid--08 {
  display: grid;
  grid-gap: 0.25rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(9, minmax(1rem, 1fr));
  grid-template-rows: repeat(7, minmax(1rem, 1fr)); }
  .l-Grid--08 > *:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 2 / 4; }
  .l-Grid--08 > *:nth-child(2) {
    grid-column: 2 / 6;
    grid-row: 1 / 5; }
  .l-Grid--08 > *:nth-child(3) {
    grid-column: 6 / 10;
    grid-row: 2 / 4; }
  .l-Grid--08 > *:nth-child(6) {
    grid-column: 8 / 10;
    grid-row: 5 / 7; }
  .l-Grid--08 > *:nth-child(4) {
    grid-column: 5 / 9;
    grid-row: 4 / 8; }
  .l-Grid--08 > *:nth-child(5) {
    grid-column: 1 / 5;
    grid-row: 5 / 7; }
  .l-Grid--08 > *:nth-child(7) {
    grid-column: 2 / 3;
    grid-row: 7 / 8; }
  .l-Grid--08 > *:nth-child(8) {
    grid-column: 3 / 4;
    grid-row: 7 / 8; }
  .l-Grid--08 > *:nth-child(9) {
    grid-column: 4 / 5;
    grid-row: 7 / 8; }

@keyframes fadeIn {
  0% {
    opacity: 0;
    width: 0;
    height: 0; }
  1% {
    opacity: 0;
    width: 100%;
    height: 100vh; }
  100% {
    opacity: 1.0;
    width: 100%;
    height: 100vh; } }

@keyframes fadeOut {
  0% {
    opacity: 1.0;
    width: 100%;
    height: 100vh; }
  99% {
    opacity: 0;
    width: 100%;
    height: 100vh; }
  100% {
    opacity: 0;
    width: 0;
    height: 0; } }

.is-delay-0s {
  animation-delay: 0s !important; }

.is-delay-1s {
  animation-delay: 1s !important; }

.is-delay-2s {
  animation-delay: 2s !important; }

.is-delay-3s {
  animation-delay: 3s !important; }

.is-delay-4s {
  animation-delay: 4s !important; }

.is-delay-5s {
  animation-delay: 5s !important; }

.smaller {
  font-size: 0.875em; }

.narrow-90, .narrow-85, .narrow-80, .narrow-75, .narrow-70 {
  display: inline-block;
  transform-origin: left bottom; }

.narrow-90 {
  transform: scaleX(0.9);
  margin-right: -9%; }

.narrow-85 {
  transform: scaleX(0.85);
  margin-right: -14%; }

.narrow-80 {
  transform: scaleX(0.8);
  margin-right: -19%; }

.narrow-75 {
  transform: scaleX(0.75);
  margin-right: -24%; }

.narrow-70 {
  transform: scaleX(0.7);
  margin-right: -29%; }

.c-heading {
  position: relative;
  z-index: 1;
  padding: 1rem 0; }

.c-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  margin: auto auto;
  width: 4rem;
  height: 1px;
  background-color: #212529; }

.c-heading {
  margin-bottom: 1rem;
  padding: 1.5rem 0 0;
  text-align: center; }

[type="button"]:not(:disabled):not(.disabled),
[type="reset"]:not(:disabled):not(.disabled),
[type="submit"]:not(:disabled):not(.disabled),
button:not(:disabled):not(.disabled) {
  cursor: pointer; }

.c-btn, .c-btn-base, .c-btn-default, .c-btn-primary, .c-btn-secondary, .c-btn-muted, .c-btn-success, .c-btn-warning, .c-btn-error, .c-btn-accent {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.875rem;
  min-width: calc(1.5em + (0.75rem * 2) + (1px * 2));
  min-height: calc(1.5em + (0.75rem * 2) + (1px * 2));
  border-radius: 0;
  border: 1px solid transparent;
  background: transparent;
  text-align: center;
  text-decoration: none;
  line-height: 1.5em;
  vertical-align: middle;
  user-select: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
 border-color 0.15s ease-in-out, top 0.15s ease-in-out, left 0.15s ease-in-out; }
  .c-btn::before, .c-btn-base::before, .c-btn-default::before, .c-btn-primary::before, .c-btn-secondary::before, .c-btn-muted::before, .c-btn-success::before, .c-btn-warning::before, .c-btn-error::before, .c-btn-accent::before {
    content: '';
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 1.25rem 0.825rem;
    background-position: 0.125rem 0rem;
    transition: background-color 0.15s ease-in-out, right 0.15s ease-in-out, bottom 0.15s ease-in-out; }
  .c-btn:hover, .c-btn-base:hover, .c-btn-default:hover, .c-btn-primary:hover, .c-btn-secondary:hover, .c-btn-muted:hover, .c-btn-success:hover, .c-btn-warning:hover, .c-btn-error:hover, .c-btn-accent:hover, .c-btn.hover, .hover.c-btn-base, .hover.c-btn-default, .hover.c-btn-primary, .hover.c-btn-secondary, .hover.c-btn-muted, .hover.c-btn-success, .hover.c-btn-warning, .hover.c-btn-error, .hover.c-btn-accent {
    text-decoration: none; }
  .c-btn:active, .c-btn-base:active, .c-btn-default:active, .c-btn-primary:active, .c-btn-secondary:active, .c-btn-muted:active, .c-btn-success:active, .c-btn-warning:active, .c-btn-error:active, .c-btn-accent:active, .c-btn.active, .active.c-btn-base, .active.c-btn-default, .active.c-btn-primary, .active.c-btn-secondary, .active.c-btn-muted, .active.c-btn-success, .active.c-btn-warning, .active.c-btn-error, .active.c-btn-accent {
    text-decoration: none; }
  .c-btn:focus, .c-btn-base:focus, .c-btn-default:focus, .c-btn-primary:focus, .c-btn-secondary:focus, .c-btn-muted:focus, .c-btn-success:focus, .c-btn-warning:focus, .c-btn-error:focus, .c-btn-accent:focus, .c-btn.focus, .focus.c-btn-base, .focus.c-btn-default, .focus.c-btn-primary, .focus.c-btn-secondary, .focus.c-btn-muted, .focus.c-btn-success, .focus.c-btn-warning, .focus.c-btn-error, .focus.c-btn-accent {
    outline: 2px solid rgba(25, 195, 230, 0.5);
    outline-offset: 1px;
    text-decoration: none; }
  .c-btn:disabled, .c-btn-base:disabled, .c-btn-default:disabled, .c-btn-primary:disabled, .c-btn-secondary:disabled, .c-btn-muted:disabled, .c-btn-success:disabled, .c-btn-warning:disabled, .c-btn-error:disabled, .c-btn-accent:disabled, .c-btn.disabled, .disabled.c-btn-base, .disabled.c-btn-default, .disabled.c-btn-primary, .disabled.c-btn-secondary, .disabled.c-btn-muted, .disabled.c-btn-success, .disabled.c-btn-warning, .disabled.c-btn-error, .disabled.c-btn-accent {
    background-color: #e0e6eb; }

.c-btn-base {
  background-color: #8ce1f3;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-base:hover, .c-btn-base.hover {
      background-color: #a3e7f5;
      color: #fff; } }
  .c-btn-base:focus, .c-btn-base.focus {
    background-color: #a3e7f5;
    color: #fff; }
  .c-btn-base:active, .c-btn-base.active {
    background-color: #5ed5ee;
    color: #fff; }

.c-btn-default {
  background-color: #212529;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-default:hover, .c-btn-default.hover {
      background-color: #2c3237;
      color: #fff; } }
  .c-btn-default:focus, .c-btn-default.focus {
    background-color: #2c3237;
    color: #fff; }
  .c-btn-default:active, .c-btn-default.active {
    background-color: #0a0c0d;
    color: #fff; }

.c-btn-primary {
  background-color: #f1fbfe;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-primary:hover, .c-btn-primary.hover {
      background-color: white;
      color: #fff; } }
  .c-btn-primary:focus, .c-btn-primary.focus {
    background-color: white;
    color: #fff; }
  .c-btn-primary:active, .c-btn-primary.active {
    background-color: #c3eff9;
    color: #fff; }

.c-btn-secondary {
  background-color: #19c3e6;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-secondary:hover, .c-btn-secondary.hover {
      background-color: #30c9e9;
      color: #fff; } }
  .c-btn-secondary:focus, .c-btn-secondary.focus {
    background-color: #30c9e9;
    color: #fff; }
  .c-btn-secondary:active, .c-btn-secondary.active {
    background-color: #149cb8;
    color: #fff; }

.c-btn-muted {
  background-color: #848d99;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-muted:hover, .c-btn-muted.hover {
      background-color: #929aa5;
      color: #fff; } }
  .c-btn-muted:focus, .c-btn-muted.focus {
    background-color: #929aa5;
    color: #fff; }
  .c-btn-muted:active, .c-btn-muted.active {
    background-color: #6a7380;
    color: #fff; }

.c-btn-success {
  background-color: #0bdada;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-success:hover, .c-btn-success.hover {
      background-color: #0cf2f2;
      color: #fff; } }
  .c-btn-success:focus, .c-btn-success.focus {
    background-color: #0cf2f2;
    color: #fff; }
  .c-btn-success:active, .c-btn-success.active {
    background-color: #09a9a9;
    color: #fff; }

.c-btn-warning {
  background-color: #fb8e6a;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-warning:hover, .c-btn-warning.hover {
      background-color: #fca183;
      color: #fff; } }
  .c-btn-warning:focus, .c-btn-warning.focus {
    background-color: #fca183;
    color: #fff; }
  .c-btn-warning:active, .c-btn-warning.active {
    background-color: #fa6838;
    color: #fff; }

.c-btn-error {
  background-color: #dc3545;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-error:hover, .c-btn-error.hover {
      background-color: #e04b59;
      color: #fff; } }
  .c-btn-error:focus, .c-btn-error.focus {
    background-color: #e04b59;
    color: #fff; }
  .c-btn-error:active, .c-btn-error.active {
    background-color: #bd2130;
    color: #fff; }

.c-btn-accent {
  background-color: #dc3545;
  color: #fff; }
  @media (min-width: 50.001rem) {
    .c-btn-accent:hover, .c-btn-accent.hover {
      background-color: #e04b59;
      color: #fff; } }
  .c-btn-accent:focus, .c-btn-accent.focus {
    background-color: #e04b59;
    color: #fff; }
  .c-btn-accent:active, .c-btn-accent.active {
    background-color: #bd2130;
    color: #fff; }

.c-icon--btn {
  margin: -0.25rem 0 0;
  width: auto;
  height: 1.5em;
  vertical-align: middle; }

.c-btn-lg {
  margin: 0 0.25rem;
  padding: 0.5rem 1rem;
  min-width: 8rem;
  font-size: 1.125rem; }

.c-badge, .c-badge--base, .c-badge--default, .c-badge--primary, .c-badge--secondary, .c-badge--muted, .c-badge--success, .c-badge--warning, .c-badge--error, .c-badge--accent, .c-badge-checked {
  display: inline-block;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.25rem; }

.c-badge--base {
  background-color: #8ce1f3;
  color: #fff; }

.c-badge--default {
  background-color: #212529;
  color: #fff; }

.c-badge--primary {
  background-color: #f1fbfe;
  color: #fff; }

.c-badge--secondary {
  background-color: #19c3e6;
  color: #fff; }

.c-badge--muted {
  background-color: #848d99;
  color: #fff; }

.c-badge--success {
  background-color: #0bdada;
  color: #fff; }

.c-badge--warning {
  background-color: #fb8e6a;
  color: #fff; }

.c-badge--error {
  background-color: #dc3545;
  color: #fff; }

.c-badge--accent {
  background-color: #dc3545;
  color: #fff; }

.c-badge-checked {
  background-color: #0bdada;
  color: #fff; }

.Header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  width: 100%;
  height: 5rem; }

.Header__container {
  height: 100%; }

.Header__title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: 0;
  height: 5rem;
  color: #212529;
  font-size: 1.5rem; }
  .Header__title > a {
    color: #212529;
    text-decoration: none; }
    .Header__title > a:hover, .Header__title > a.hover {
      color: #212529;
      text-decoration: none; }

.Header__logo {
  display: block;
  height: 2rem;
  fill: #212529; }

.Header__subtitle {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem; }

.Header__nav-link {
  border: 0;
  background-color: transparent;
  color: #212529;
  text-decoration: none;
  cursor: pointer;
  transition: all .3s ease-in-out; }
  .Header__nav-link:hover, .hover.Header__nav-link {
    text-decoration: none; }

.Header__nav {
  height: 100%; }

.Header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0; }

.Header__nav-item {
  margin-bottom: 0.25rem; }

.Header__nav-link {
  position: relative;
  display: block;
  padding: 0.125rem 1rem; }
  .Header__nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    z-index: -1;
    display: block;
    width: 150%;
    height: 100%;
    background-color: #212529;
    transition: all .2s ease-in-out; }
  .Header__nav-link:hover, .Header__nav-link.hover {
    color: #fff; }
    .Header__nav-link:hover::before, .Header__nav-link.hover::before {
      left: -50%; }
  .Header__nav-link.is-current {
    color: #fff; }
    .Header__nav-link.is-current::before {
      left: -50%;
      background-color: rgba(33, 37, 41, 0.75); }

.Header__nav-link--twitter {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 0.75rem;
  margin-left: 0.875rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%; }

.Header__nav-link--twitter {
  background-color: #1da1f2; }
  .Header__nav-link--twitter:hover, .Header__nav-link--twitter.hover {
    background-color: #0c85d0; }

.Header__nav-icon {
  width: 50%;
  fill: #fff; }

@media (max-width: 34rem) {
  .Header__title {
    grid-column: 1 / 6; }
  .Header__nav {
    grid-column: 1 / 4; } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .Header__title {
    grid-column: 1 / 6; }
  .Header__nav {
    grid-column: 1 / 5; } }

@media (min-width: 50.001rem) {
  .Header__title {
    grid-column: 2 / 6; }
  .Header__nav {
    grid-column: 2 / 5;
    position: relative; } }

.Footer {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 9rem;
  background-color: rgba(241, 251, 254, 0.5); }

.Footer__nav {
  margin-bottom: 0.75rem; }
  .Footer__nav.is-hidden {
    visibility: hidden; }

.Footer__back {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  transform: rotate(45deg) scale(0.7);
  margin: auto auto;
  width: 5rem;
  height: 5rem;
  border: 2px solid #212529;
  background-color: rgba(33, 37, 41, 0);
  color: #212529;
  transition: all 0.15s ease-in-out; }
  .is-current .Footer__back, .Footer__back:hover, .Footer__back.hover {
    border-color: rgba(33, 37, 41, 0);
    background-color: rgba(33, 37, 41, 0);
    color: #fff;
    text-decoration: none; }
    .is-current .Footer__back > .Footer__back-bg, .Footer__back:hover > .Footer__back-bg, .Footer__back.hover > .Footer__back-bg {
      transform: scale(1.625);
      fill: #212529;
      opacity: 1; }

.Footer__back-label {
  position: relative;
  z-index: 1;
  transform: rotate(-45deg) scale(1.5);
  display: block;
  margin: 0;
  text-align: center; }

.Footer__back-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transform: scale(0.5);
  width: 100%;
  fill: #212529;
  opacity: 0;
  transition: all 0.15s ease-in-out; }

.Footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  padding: 0.5rem 0;
  text-align: right;
  align-self: center; }

.Footer__links-item {
  display: inline-block; }

.link-twitter {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%; }

.link-twitter {
  background-color: #1da1f2; }
  .link-twitter > .icon {
    width: 50%;
    fill: #fff; }
  .link-twitter:hover, .link-twitter.hover {
    background-color: #0c85d0; }

.Footer__copyright {
  padding: 1rem 0;
  align-self: center; }

@media (max-width: 34rem) {
  .Footer__nav {
    grid-column: 1 / 13;
    grid-row: 1 / 2; }
  .Footer__links {
    grid-column: 7 / 13;
    grid-row: 2 / 3; }
  .Footer__copyright {
    grid-column: 1 / 7;
    grid-row: 2 / 3; } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .Footer__nav {
    grid-column: 1 / 25;
    grid-row: 1 / 2; }
  .Footer__links {
    grid-column: 13 / 25;
    grid-row: 2 / 3; }
  .Footer__copyright {
    grid-column: 1 / 13;
    grid-row: 2 / 3;
    align-self: center; } }

@media (min-width: 50.001rem) {
  .Footer__nav {
    grid-column: 2 / 36;
    grid-row: 1 / 2; }
  .Footer__links {
    grid-column: 19 / 36;
    grid-row: 2 / 3; }
  .Footer__copyright {
    grid-column: 2 / 19;
    grid-row: 2 / 3;
    align-self: center; } }

.Background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh; }

.Backgorund__dots-00 {
  position: absolute;
  top: 0;
  left: -3rem;
  transform: rotate(-12deg);
  transform-origin: 0 0;
  width: 50rem;
  height: 10rem;
  background-image: radial-gradient(#fff 33%, transparent 33%);
  background-size: 1rem 1rem;
  animation: dots-00 5s linear infinite alternate; }

@keyframes dots-00 {
  0% {
    transform: rotate(-12deg) translateY(0); }
  100% {
    transform: rotate(-12deg) translateY(-12px); } }

.Backgorund__dots-01 {
  position: absolute;
  bottom: 0;
  right: -1vw;
  transform: rotate(-3deg);
  transform-origin: bottom right;
  width: 101vw;
  height: 4rem;
  background-image: radial-gradient(#fff 33%, transparent 33%);
  background-size: 1rem 1rem;
  animation: dots-01 5s linear infinite alternate; }

@keyframes dots-01 {
  0% {
    transform: rotate(-3deg) translateY(0); }
  100% {
    transform: rotate(-3deg) translateY(12px); } }

.Backgorund__line-00 {
  position: absolute;
  bottom: 4vh;
  left: 0;
  transform: skewY(-12deg);
  transform-origin: 0 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  animation: line-00 5s linear infinite alternate; }

@keyframes line-00 {
  0% {
    transform: skewY(-12deg) translateY(0); }
  100% {
    transform: skewY(-10deg) translateY(-12px); } }

.Backgorund__line-01 {
  position: absolute;
  bottom: 0;
  right: 12vw;
  transform: skewX(-12deg);
  transform-origin: 0 0;
  width: 1px;
  height: 100%;
  background-color: #fff;
  animation: line-01 10s linear infinite alternate; }

@keyframes line-01 {
  0% {
    transform: skewX(-12deg) translateX(0px); }
  100% {
    transform: skewX(-8deg) translateX(-10px); } }

.Backgorund__line-02 {
  position: absolute;
  top: 0;
  left: 6vw;
  transform: skewX(12deg);
  transform-origin: 0 0;
  width: 1px;
  height: 100%;
  background-color: #fff;
  animation: line-02 5s linear infinite alternate; }

@keyframes line-02 {
  0% {
    transform: skewX(12deg) translateX(0px); }
  100% {
    transform: skewX(8deg) translateX(10px); } }

.Backgorund__line-03 {
  position: absolute;
  top: 0;
  left: 0;
  transform: skewY(12deg);
  transform-origin: 0 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  animation: line-03 8s linear infinite alternate; }

@keyframes line-03 {
  0% {
    transform: skewY(12deg) translateY(0); }
  100% {
    transform: skewY(9deg) translateY(16px); } }

.Background.is-light {
  background-color: #f1fbfe; }
  .Background.is-light .Backgorund__dots-00 {
    background-image: radial-gradient(#8ce1f3 33%, transparent 33%); }
  .Background.is-light .Backgorund__dots-01 {
    background-image: radial-gradient(#8ce1f3 33%, transparent 33%); }
  .Background.is-light .Backgorund__line-00 {
    background-color: #8ce1f3; }
  .Background.is-light .Backgorund__line-01 {
    background-color: #8ce1f3; }
  .Background.is-light .Backgorund__line-02 {
    background-color: #8ce1f3; }
  .Background.is-light .Backgorund__line-03 {
    background-color: #8ce1f3; }

@media (max-width: 34rem) {
  .Backgorund__dots-01 {
    height: 3rem; }
  .Backgorund__line-01 {
    right: -6rem; }
  .Backgorund__line-02 {
    left: -5rem; }
  .Backgorund__line-03 {
    top: 4rem; } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .Backgorund__line-01 {
    right: -2rem; }
  .Backgorund__line-02 {
    left: -2rem; }
  .Backgorund__line-03 {
    top: -2rem; } }

.Work {
  position: relative;
  z-index: 1;
  margin: 1rem auto;
  width: calc(100% - 1rem * 2);
  max-width: 60rem; }

.Work__link {
  display: inline; }
  .Work__link:hover, .Work__link.hover {
    text-decoration: none; }

.Work__thumbnail {
  position: relative;
  overflow: hidden;
  margin: auto;
  padding: 1rem;
  max-width: 45rem; }
  .Work__thumbnail::before, .Work__thumbnail::after {
    content: '';
    position: absolute;
    z-index: 2;
    display: block;
    width: 25%;
    height: 25%;
    border: 1px solid #212529;
    transition: all 0.3s ease-in-out; }
  .Work__thumbnail::before {
    top: 0;
    left: 0;
    border-width: 1px 0 0 1px; }
  .Work__thumbnail::after {
    bottom: 0;
    right: 0;
    border-width: 0 1px 1px 0; }

.Work__thumbnail-image {
  display: block;
  margin: auto;
  width: 100%;
  animation: float-rotate 4s ease-in-out infinite alternate; }

.Work__heading {
  margin: auto auto 2rem;
  max-width: 40rem;
  color: #212529; }

.Work__title {
  margin: auto auto -0.75rem;
  max-width: 45rem;
  font-family: "Caveat", cursive;
  font-size: 2rem;
  text-align: right;
  line-height: 1.0625;
  word-break: keep-all;
  white-space: nowrap; }

.Work__category, .WorkList__category {
  padding: 0 0.5em;
  min-width: 3rem;
  border: 1px solid #212529;
  background-color: rgba(255, 255, 255, 0.75);
  color: #212529;
  font-size: 12px;
  text-align: center;
  line-height: 1.5; }

.Work__desc {
  margin: auto auto 2rem;
  max-width: 40rem; }

.Work__commentary {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
  margin: 4rem auto 2rem; }
  .Work__commentary > * {
    margin: 0; }
  .Work__commentary > .is-full {
    grid-column: 1 / 13; }
  .Work__commentary > .is-half--left {
    grid-column: 1 / 7; }
  .Work__commentary > .is-half--right {
    grid-column: 7 / 13; }
  .Work__commentary > .is-third--left {
    grid-column: 1 / 5; }
  .Work__commentary > .is-third--center {
    grid-column: 5 / 9; }
  .Work__commentary > .is-third--right {
    grid-column: 9 / 13; }

.Work__info {
  margin: auto auto 2rem;
  max-width: 40rem;
  font-size: 0.875rem; }

.Work__team {
  display: inline-block;
  margin: 0; }

.Work__role {
  display: inline-block;
  margin: 0; }
  .Work__role::before {
    content: '/'; }

.Work__nav {
  margin: auto auto 2rem;
  max-width: 40rem;
  text-align: center; }

@keyframes float-rotate {
  0% {
    transform: rotate(-2deg); }
  100% {
    transform: rotate(2deg); } }

@media (max-width: 34rem) {
  .Work__commentary {
    display: block; } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .Work__title {
    font-size: 2.5rem; } }

@media (min-width: 50.001rem) {
  .Work__title {
    font-size: 3rem; } }

.WorkList,
.WorkList--other {
  list-style: none;
  margin: 0;
  padding: 0; }

.WorkList {
  display: grid;
  grid-gap: 1rem;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-bottom: 4rem; }

.WorkList__item {
  position: relative;
  margin-top: 1rem; }

.WorkList__link {
  position: relative;
  display: block;
  color: #212529;
  text-decoration: none; }
  .WorkList__link::before, .WorkList__link::after {
    content: '';
    position: absolute;
    z-index: 2;
    display: block;
    width: 25%;
    height: 25%;
    border: 1px solid #212529;
    transition: all 0.3s ease-in-out; }
  .WorkList__link::before {
    top: 0;
    left: 0;
    border-width: 1px 0 0 1px; }
  .WorkList__link::after {
    bottom: 0;
    right: 0;
    border-width: 0 1px 1px 0; }
  .WorkList__link:hover, .WorkList__link.hover {
    text-decoration: none; }
    .WorkList__link:hover::before, .WorkList__link.hover::before {
      top: 1rem;
      left: 1rem; }
    .WorkList__link:hover::after, .WorkList__link.hover::after {
      bottom: 1rem;
      right: 1rem; }

.WorkList__thumbnail {
  position: relative;
  overflow: hidden;
  padding: 0.5rem;
  transition: all 0.3s ease-in-out; }
  .WorkList__thumbnail::after {
    content: 'More';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1) rotate(-10deg);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 1rem;
    width: 50%;
    background-color: #212529;
    color: #fff;
    box-shadow: 0.25rem 0.25rem 0 rgba(25, 195, 230, 0.75);
    font-size: 1rem;
    opacity: 0;
    transition: all 0.3s ease-in-out; }
  .WorkList__thumbnail > img {
    display: block;
    transition: all 0.3s ease-in-out; }
  .WorkList__link:hover .WorkList__thumbnail::after {
    transform: translate(-50%, -50%) scale(1) rotate(-4deg);
    opacity: 1; }

.WorkList__title {
  position: absolute;
  bottom: calc(100% - 0.625rem);
  right: 0rem;
  margin: 0;
  width: 75%;
  color: #212529;
  font-family: "Caveat", cursive;
  font-size: 1.25rem;
  text-align: right;
  line-height: 1.0625;
  word-break: keep-all;
  white-space: nowrap;
  transition: all 0.3s ease-in-out; }

.WorkList__subtitle {
  display: block;
  font-size: 0.75em; }

.WorkList__category {
  position: absolute;
  bottom: 0;
  left: 0; }

.WorkList--other {
  display: grid;
  grid-gap: 0.75rem;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(auto-fit, minmax(12.33333rem, 1fr));
  margin: 1rem auto 3rem;
  max-width: 40rem; }
  .WorkList--other > .WorkList__item {
    margin: 0;
    font-size: 12px;
    text-align: center; }
  .WorkList--other .WorkList__role {
    display: block;
    font-size: 10px;
    opacity: .5; }

.Profile__photo {
  overflow: hidden;
  margin: 1rem auto;
  width: 15vh;
  height: 15vh;
  border-radius: 100%;
  background-color: #19c3e6; }
  .Profile__photo > img {
    width: 100%;
    height: 100%; }

.Profile__name {
  margin-bottom: 0.5rem;
  font-size: 2rem;
  text-align: center;
  line-height: 1; }

.Profile__fullname {
  height: 2.25rem;
  fill: #212529; }

.Profile__job {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  text-align: center; }

.Profile__desc {
  position: relative;
  margin: 2rem auto;
  padding: 2rem 0;
  max-width: 40rem; }
  .Profile__desc::before, .Profile__desc::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 6rem;
    height: 0;
    border-top: 1px solid #212529; }
  .Profile__desc::before {
    top: 0; }
  .Profile__desc::after {
    bottom: 0; }
  .Profile__desc > *:last-child {
    margin-bottom: 0; }

.Profile__status {
  font-size: 0.875rem;
  text-align: right; }

.Profile__section {
  position: relative;
  padding: 2rem 0; }
  .Profile__section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    margin: auto auto;
    width: 4rem;
    height: 1px;
    background-color: #212529; }

.Profile__section-heading {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  text-align: center; }

@media (max-width: 34rem) {
  .Profile__heading,
  .Profile__title {
    grid-column: 1 / 13; }
  .Profile__desc,
  .Profile__section,
  .Profile__status {
    grid-column: 1 / 13; } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .Profile__heading,
  .Profile__title,
  .Profile__desc,
  .Profile__section,
  .Profile__status {
    grid-column: 2 / 24; }
  .Profile__fullname {
    width: 60%; } }

@media (min-width: 50.001rem) {
  .Profile__heading {
    grid-column: 7 / 31; }
  .Profile__fullname {
    width: 50%; }
  .Profile__desc,
  .Profile__section,
  .Profile__status {
    grid-column: 7 / 31; } }

.Skills {
  margin: 4rem 0; }

.Skills__heading {
  margin: auto;
  max-width: 40rem;
  border: 1px solid #212529;
  border-width: 1px 0;
  text-align: center; }

.Skills__list {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: auto;
  max-width: 40rem; }

.Skills__group {
  -ms-flex: 1 1 50%;
  flex: 1 1 50%;
  padding: 0.5rem;
  text-align: center; }

.Skills__title {
  position: relative;
  padding: 1rem 0; }

.Skills__title-bg {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  height: 100%;
  fill: #d1f3fa; }

.Skills__item {
  margin: 0;
  color: #848d99;
  font-size: 0.875rem; }

@media (max-width: 34rem) {
  .Skills__heading {
    grid-column: 1 / 13; }
  .Skills__list {
    grid-column: 1 / 13; } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .Skills__heading {
    grid-column: 1 / 25; }
  .Skills__list {
    grid-column: 1 / 25; }
  .Skills__group {
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
    max-width: 33.333%; } }

@media (min-width: 50.001rem) {
  .Skills__heading {
    grid-column: 7 / 31; }
  .Skills__list {
    grid-column: 7 / 31; }
  .Skills__group {
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
    max-width: 33.333%; } }

.Tools {
  margin: 4rem 0; }

.Tools__heading {
  margin: auto;
  max-width: 40rem;
  border: 1px solid #212529;
  border-width: 1px 0;
  text-align: center; }

.Tools__list {
  margin: 1rem auto auto;
  max-width: 40rem;
  padding: 0;
  text-align: center; }

.Tools__item {
  display: inline-block;
  padding-left: 0.25rem; }
  .Tools__item:not(:last-child)::after {
    content: '/';
    display: inline-block;
    padding-left: 0.25rem; }

@media (max-width: 34rem) {
  .Tools__heading {
    grid-column: 1 / 13; }
  .Tools__list {
    grid-column: 1 / 13; } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .Tools__heading {
    grid-column: 1 / 25; }
  .Tools__list {
    grid-column: 1 / 25; } }

@media (min-width: 50.001rem) {
  .Tools__heading {
    grid-column: 7 / 31; }
  .Tools__list {
    grid-column: 7 / 31; } }

.History {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  margin: auto auto 6rem;
  max-width: 40rem; }

.History__item {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 2rem 0; }
  .History__item:not(:last-child) {
    margin-bottom: 1.5rem; }

.History__term {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 0.5rem;
  text-align: center;
  line-height: 1; }
  .History__term::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: auto auto;
    width: 0;
    height: 0;
    border: 0.25rem solid transparent;
    border-top-color: #212529;
    border-bottom: 0; }

.History__term-start {
  display: block; }

.History__term-end {
  display: block; }

.History__data {
  padding-left: 0.5rem;
  border-left: 1px solid #212529; }

.History__belong {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1;
  word-wrap: none;
  word-break: keep-all;
  white-space: nowrap; }

.History__desc {
  margin: 0 0 -0.25em;
  color: #848d99;
  font-size: 0.875rem;
  line-height: 1.5; }

@media (max-width: 50rem) {
  .History::before {
    left: 1.5rem; } }

@media (min-width: 50.001rem) {
  .History::before {
    left: 1.5rem; } }

.NameCard {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(3deg);
  z-index: 3;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: auto auto;
  -webkit-print-color-adjust: exact;
  background-color: #f1fbfe;
  box-shadow: 0 2.25em 5em rgba(23, 176, 207, 0.5);
  line-height: 1;
  animation: floating 1s ease-in-out infinite alternate; }

.NameCard__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden; }

.NameCard__bg-image {
  transform: translate(-39%, -26%);
  width: 192%;
  fill: #fff; }

.NameCard__mark {
  overflow: hidden;
  margin-left: -0.125em; }

.NameCard__logo {
  height: 100%;
  fill: #212529; }

.NameCard__job {
  display: block; }

.NameCard__name {
  display: block;
  font-weight: bold;
  font-size: 1.875em; }

.NameCard__desc {
  position: relative;
  margin: 0;
  animation: highlight 4s linear infinite normal; }
  .NameCard__desc::before {
    content: '';
    display: block;
    background-color: #212529 !important; }
  .NameCard__desc > dt {
    font-size: 0.75em;
    font-weight: normal; }
  .NameCard__desc > dd {
    display: inline-block;
    margin: 0; }
    .NameCard__desc > dd + dd {
      margin-left: 0.5em; }

.NameCard__desc-more {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0 !important;
  width: 100%;
  height: 100%; }

.NameCard__since {
  display: block;
  font-size: 0.875em; }

.NameCard__address {
  margin: auto 0 0; }

.NameCard__contact {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  font-size: 0.875em; }

.NameCard__contact-label {
  margin: 0.25em 0 0;
  padding-right: 0.375em; }

.NameCard__contact-icon {
  fill: #212529; }

.NameCard__contact-data {
  -ms-flex: 1 1 85%;
  flex: 1 1 85%;
  margin: 0.25em 0 0; }

.NameCard__link {
  position: relative;
  display: inline-block;
  padding-right: 1rem;
  border-bottom: 1px solid transparent;
  color: #212529;
  transition: all .3s ease;
  animation: highlight 4s linear infinite normal; }
  .NameCard__link::before, .NameCard__link::after {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    opacity: 0;
    transition: all .3s ease; }
  .NameCard__link::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.125rem 0.25rem;
    border-color: transparent transparent #212529 #212529; }
  .NameCard__link::after {
    content: attr(data-title);
    transform: scale(1.2) translate(80%, -50%) rotate(-6deg);
    transform-origin: bottom left;
    padding: 0.5em 1em;
    background-color: #212529;
    color: #fff; }
  .NameCard__link:focus, .NameCard__link.focus, .NameCard__link:hover, .NameCard__link.hover {
    outline: 0;
    border-bottom: 1px solid #212529; }
    .NameCard__link:focus::before, .NameCard__link.focus::before, .NameCard__link:hover::before, .NameCard__link.hover::before {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0.125rem 0.25rem;
      border-color: transparent transparent #212529 #212529;
      opacity: 1; }
    .NameCard__link:focus::after, .NameCard__link.focus::after, .NameCard__link:hover::after, .NameCard__link.hover::after {
      transform: scale(1) translate(80%, -50%) rotate(-6deg);
      box-shadow: 0.25rem 0.25rem 0 rgba(25, 195, 230, 0.5);
      opacity: 1; }
  .NameCard__link:hover, .NameCard__link.hover {
    color: #212529;
    text-decoration: none; }
  .NameCard__link:active::after, .NameCard__link.active::after {
    background-color: #dc3545;
    box-shadow: 0.25rem 0.25rem 0 rgba(241, 251, 254, 0.5); }
  .NameCard__desc-more .NameCard__link {
    display: block;
    width: 100%;
    height: 100%; }

@keyframes floating {
  0% {
    margin-top: 0; }
  100% {
    margin-top: -1vh; } }

@keyframes highlight {
  0% {
    color: inherit; }
  80% {
    color: #212529; }
  90% {
    color: #19c3e6; }
  100% {
    color: #212529; } }

@media (max-width: 34rem) {
  .NameCard {
    padding: 8vw;
    width: 76.5vw;
    height: 133.5vw;
    font-size: 3.5vw; }
  .NameCard__mark {
    width: 6.90625vw;
    height: 9.75vw; }
  .NameCard__job {
    margin-top: 10vw; }
  .NameCard__name {
    margin-top: 1vw; }
  .NameCard__desc {
    margin-top: 14vw; }
    .NameCard__desc::before {
      margin-bottom: 1.25vw;
      width: 3vw;
      height: 0.25vw; }
    .NameCard__desc > dt {
      margin-bottom: 1.25vw; }
  .NameCard__since {
    margin-top: 8vw; }
  .NameCard__contact-icon {
    width: 4vw; }
  .NameCard__link::after {
    transform: scale(1.2) translate(4rem, -70%) rotate(-6deg);
    transform-origin: bottom right; }
  .NameCard__link:focus::after, .NameCard__link.focus::after, .NameCard__link:hover::after, .NameCard__link.hover::after {
    transform: scale(1) translate(4rem, -70%) rotate(-6deg); } }

@media (min-width: 34.001rem) and (max-width: 50rem) {
  .NameCard {
    padding: 4vh;
    width: 38.25vh;
    height: 66.75vh;
    font-size: 1.75vh; }
  .NameCard__mark {
    width: 3.45312vh;
    height: 4.875vh; }
  .NameCard__job {
    margin-top: 5vh; }
  .NameCard__name {
    margin-top: 0.5vh; }
  .NameCard__desc {
    margin-top: 7vh; }
    .NameCard__desc::before {
      margin-bottom: 0.625vh;
      width: 1.5vh;
      height: 0.125vh; }
    .NameCard__desc > dt {
      margin-bottom: 0.625vh; }
  .NameCard__since {
    margin-top: 4vh; }
  .NameCard__contact-icon {
    width: 2vh; } }

@media (min-width: 50.001rem) {
  .NameCard {
    padding: 4vh;
    width: 38.25vh;
    height: 66.75vh;
    font-size: 1.75vh; }
  .NameCard__mark {
    width: 3.45312vh;
    height: 4.875vh; }
  .NameCard__job {
    margin-top: 5vh; }
  .NameCard__name {
    margin-top: 0.5vh; }
  .NameCard__desc {
    margin-top: 7vh; }
    .NameCard__desc::before {
      margin-bottom: 0.625vh;
      width: 1.5vh;
      height: 0.125vh; }
    .NameCard__desc > dt {
      margin-bottom: 0.625vh; }
  .NameCard__since {
    margin-top: 4vh; }
  .NameCard__contact-icon {
    width: 2vh; } }

@media print {
  .NameCard {
    transform: translate(-50%, -50%) rotate(0deg);
    padding: 5.33328mm;
    width: 51mm;
    height: 89mm;
    font-size: 2.33331mm;
    box-shadow: none; }
  .NameCard__mark {
    width: 4.60412mm;
    height: 6.49994mm; }
  .NameCard__job {
    margin-top: 6.6666mm; }
  .NameCard__name {
    margin-top: 0.66666mm; }
  .NameCard__desc {
    margin-top: 6.6666mm; }
    .NameCard__desc::before {
      margin-bottom: 0.83333mm;
      width: 1.99998mm;
      height: 0.16667mm; }
    .NameCard__desc > dt {
      margin-bottom: 0.83333mm; }
  .NameCard__since {
    margin-top: 5.33328mm; }
  .NameCard__contact-icon {
    width: 2.66664mm; } }

.Contents {
  position: relative;
  z-index: 1050;
  margin: 1rem auto;
  padding: 2rem;
  width: calc(100% - 1rem * 2);
  max-width: 60rem;
  min-height: calc(100vh - 1rem * 2);
  background-color: rgba(241, 251, 254, 0.9);
  box-shadow: 0 2.25em 5em rgba(23, 176, 207, 0.5); }
  .Contents::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: -1;
    display: block;
    width: calc(100% - 1rem * 2);
    height: calc(100% - 1rem * 2);
    border: 1px solid #212529; }

.Contents__close-button {
  position: fixed;
  top: 2.5rem;
  left: -0.25rem;
  overflow: hidden;
  padding-top: 2rem;
  width: 2.5rem;
  height: 2rem;
  border: 0;
  background-color: #212529;
  color: #f1fbfe;
  font-size: 0.75rem;
  box-shadow: 0.25rem 0.25rem 0 rgba(25, 195, 230, 0.5);
  cursor: pointer;
  transition: all .3s ease; }
  .Contents__close-button::before, .Contents__close-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center left;
    display: block;
    width: 25%;
    height: 0;
    border-radius: 2px;
    border: 1px solid #fff;
    background-color: #fff; }
  .Contents__close-button::before {
    transform: translate(-25%, -75%) rotate(45deg); }
  .Contents__close-button::after {
    transform: translate(-25%, -50%) rotate(-45deg); }
  .Contents__close-button:focus, .Contents__close-button.fucus, .Contents__close-button:hover, .Contents__close-button.hover {
    outline: 0;
    background-color: #2d3338;
    box-shadow: 0.25rem 0.25rem 0 #19c3e6; }
  .Contents__close-button:active, .Contents__close-button.active {
    background-color: #dc3545;
    box-shadow: 0.25rem 0.25rem 0 rgba(241, 251, 254, 0.5); }

.Contents__heading {
  margin-bottom: 1rem;
  font-weight: bold;
  line-height: 1.125;
  text-shadow: 1px 1px 0 #f1fbfe; }

.Contents__heading--section {
  margin: auto;
  max-width: 40rem;
  border: 1px solid #212529;
  border-width: 1px 0;
  text-align: center; }

@media (min-width: 50.001rem) {
  .Contents__close-button {
    left: 50%;
    transform: translateX(-31.25rem);
    height: 2.25rem; }
    .Contents__close-button::before {
      transform: translate(-35%, -75%) rotate(45deg); }
    .Contents__close-button::after {
      transform: translate(-35%, -50%) rotate(-45deg); } }

.u-p-0 {
  padding: 0 !important; }

.u-pt-0 {
  padding-top: 0 !important; }

.u-pr-0 {
  padding-right: 0 !important; }

.u-pb-0 {
  padding-bottom: 0 !important; }

.u-pl-0 {
  padding-left: 0 !important; }

@media (max-width: 50rem) {
  .u-p-0--mobile {
    padding: 0 !important; }
  .u-pt-0--mobile {
    padding-top: 0 !important; }
  .u-pr-0--mobile {
    padding-right: 0 !important; }
  .u-pb-0--mobile {
    padding-bottom: 0 !important; }
  .u-pl-0--mobile {
    padding-left: 0 !important; } }

@media (min-width: 50.001rem) {
  .u-p-0--pc {
    padding: 0 !important; }
  .u-pt-0--pc {
    padding-top: 0 !important; }
  .u-pr-0--pc {
    padding-right: 0 !important; }
  .u-pb-0--pc {
    padding-bottom: 0 !important; }
  .u-pl-0--pc {
    padding-left: 0 !important; } }

.u-p-1 {
  padding: 0.25rem !important; }

.u-pt-1 {
  padding-top: 0.25rem !important; }

.u-pr-1 {
  padding-right: 0.25rem !important; }

.u-pb-1 {
  padding-bottom: 0.25rem !important; }

.u-pl-1 {
  padding-left: 0.25rem !important; }

@media (max-width: 50rem) {
  .u-p-1--mobile {
    padding: 0.25rem !important; }
  .u-pt-1--mobile {
    padding-top: 0.25rem !important; }
  .u-pr-1--mobile {
    padding-right: 0.25rem !important; }
  .u-pb-1--mobile {
    padding-bottom: 0.25rem !important; }
  .u-pl-1--mobile {
    padding-left: 0.25rem !important; } }

@media (min-width: 50.001rem) {
  .u-p-1--pc {
    padding: 0.25rem !important; }
  .u-pt-1--pc {
    padding-top: 0.25rem !important; }
  .u-pr-1--pc {
    padding-right: 0.25rem !important; }
  .u-pb-1--pc {
    padding-bottom: 0.25rem !important; }
  .u-pl-1--pc {
    padding-left: 0.25rem !important; } }

.u-p-2 {
  padding: 0.5rem !important; }

.u-pt-2 {
  padding-top: 0.5rem !important; }

.u-pr-2 {
  padding-right: 0.5rem !important; }

.u-pb-2 {
  padding-bottom: 0.5rem !important; }

.u-pl-2 {
  padding-left: 0.5rem !important; }

@media (max-width: 50rem) {
  .u-p-2--mobile {
    padding: 0.5rem !important; }
  .u-pt-2--mobile {
    padding-top: 0.5rem !important; }
  .u-pr-2--mobile {
    padding-right: 0.5rem !important; }
  .u-pb-2--mobile {
    padding-bottom: 0.5rem !important; }
  .u-pl-2--mobile {
    padding-left: 0.5rem !important; } }

@media (min-width: 50.001rem) {
  .u-p-2--pc {
    padding: 0.5rem !important; }
  .u-pt-2--pc {
    padding-top: 0.5rem !important; }
  .u-pr-2--pc {
    padding-right: 0.5rem !important; }
  .u-pb-2--pc {
    padding-bottom: 0.5rem !important; }
  .u-pl-2--pc {
    padding-left: 0.5rem !important; } }

.u-p-3 {
  padding: 1rem !important; }

.u-pt-3 {
  padding-top: 1rem !important; }

.u-pr-3 {
  padding-right: 1rem !important; }

.u-pb-3 {
  padding-bottom: 1rem !important; }

.u-pl-3 {
  padding-left: 1rem !important; }

@media (max-width: 50rem) {
  .u-p-3--mobile {
    padding: 1rem !important; }
  .u-pt-3--mobile {
    padding-top: 1rem !important; }
  .u-pr-3--mobile {
    padding-right: 1rem !important; }
  .u-pb-3--mobile {
    padding-bottom: 1rem !important; }
  .u-pl-3--mobile {
    padding-left: 1rem !important; } }

@media (min-width: 50.001rem) {
  .u-p-3--pc {
    padding: 1rem !important; }
  .u-pt-3--pc {
    padding-top: 1rem !important; }
  .u-pr-3--pc {
    padding-right: 1rem !important; }
  .u-pb-3--pc {
    padding-bottom: 1rem !important; }
  .u-pl-3--pc {
    padding-left: 1rem !important; } }

.u-p-4 {
  padding: 1.5rem !important; }

.u-pt-4 {
  padding-top: 1.5rem !important; }

.u-pr-4 {
  padding-right: 1.5rem !important; }

.u-pb-4 {
  padding-bottom: 1.5rem !important; }

.u-pl-4 {
  padding-left: 1.5rem !important; }

@media (max-width: 50rem) {
  .u-p-4--mobile {
    padding: 1.5rem !important; }
  .u-pt-4--mobile {
    padding-top: 1.5rem !important; }
  .u-pr-4--mobile {
    padding-right: 1.5rem !important; }
  .u-pb-4--mobile {
    padding-bottom: 1.5rem !important; }
  .u-pl-4--mobile {
    padding-left: 1.5rem !important; } }

@media (min-width: 50.001rem) {
  .u-p-4--pc {
    padding: 1.5rem !important; }
  .u-pt-4--pc {
    padding-top: 1.5rem !important; }
  .u-pr-4--pc {
    padding-right: 1.5rem !important; }
  .u-pb-4--pc {
    padding-bottom: 1.5rem !important; }
  .u-pl-4--pc {
    padding-left: 1.5rem !important; } }

.u-p-5 {
  padding: 3rem !important; }

.u-pt-5 {
  padding-top: 3rem !important; }

.u-pr-5 {
  padding-right: 3rem !important; }

.u-pb-5 {
  padding-bottom: 3rem !important; }

.u-pl-5 {
  padding-left: 3rem !important; }

@media (max-width: 50rem) {
  .u-p-5--mobile {
    padding: 3rem !important; }
  .u-pt-5--mobile {
    padding-top: 3rem !important; }
  .u-pr-5--mobile {
    padding-right: 3rem !important; }
  .u-pb-5--mobile {
    padding-bottom: 3rem !important; }
  .u-pl-5--mobile {
    padding-left: 3rem !important; } }

@media (min-width: 50.001rem) {
  .u-p-5--pc {
    padding: 3rem !important; }
  .u-pt-5--pc {
    padding-top: 3rem !important; }
  .u-pr-5--pc {
    padding-right: 3rem !important; }
  .u-pb-5--pc {
    padding-bottom: 3rem !important; }
  .u-pl-5--pc {
    padding-left: 3rem !important; } }

.u-pt-header {
  padding-top: 5rem !important; }

.u-py-header {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important; }

@media (max-width: 50rem) {
  .u-pt-header--mobile {
    padding-top: 5rem !important; }
  .u-py-header--mobile {
    margin-top: 5rem !important;
    padding-bottom: 5rem !important; } }

@media (min-width: 50.001rem) {
  .u-pt-header--pc {
    padding-top: 5rem !important; }
  .u-py-header--pc {
    margin-top: 5rem !important;
    padding-bottom: 5rem !important; } }

.u-d-none {
  display: none !important; }

.u-d-block {
  display: block !important; }

@media (max-width: 22.5rem) {
  .u-d-none--xxs {
    display: none !important; } }

@media (max-width: 34rem) {
  .u-d-none--phone {
    display: none !important; } }

@media (max-width: 50rem) {
  .u-d-none--mobile, .u-d--pc-only {
    display: none !important; } }

@media (min-width: 34.001rem) {
  .u-d-none--sm, .u-d--phone-only {
    display: none !important; } }

@media (min-width: 50.001rem) {
  .u-d-none--pc, .u-d--mobile-only {
    display: none !important; } }

@media (min-width: 64.001rem) {
  .u-d-none--lg {
    display: none !important; } }

@media (min-width: 80.001rem) {
  .u-d-none--xl {
    display: none !important; } }

@media (min-width: 100.001rem) {
  .u-d-none--xxl {
    display: none !important; } }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0; }

/*# sourceMappingURL=styles.css.map */