body {
  background-color: #6CF; }

.box-setup, .box, #m-3-3-box {
  box-shadow: -0.6em 0.6em;
  margin: 0.6em 0.6em 1.2em 1.2em; }

.box {
  border: 0.1em #FFF solid;
  height: calc(100% - 2em); }

.light span {
  color: #000;
  background-color: #FFF; }

.dark span {
  color: #000;
  background-color: #6CF; }

.medium span {
  color: #6CF;
  background-color: #FFF; }

.paragraph {
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-size: 0.9em; }

#header {
  background-image: url("../img/header.svg");
  background-color: #FFF;
  border-bottom: 0.5em #000 solid; }

#h-2 {
  background-color: #FFF; }

#header a {
  color: #000; }

#header span {
  color: #000;
  background-color: #FFF; }

#h-1, #h-3 {
  background-color: #FFF; }

#m-2-box {
  position: relative;
  overflow: hidden;
  filter: grayscale(99%);
  transition: 1000ms ease;
  background-color: #fff; }

.slide {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0); }

@media (max-width: 1280px) {
  #m-2-box {
    aspect-ratio: 4/3; } }
#m-1-1-box {
  background-image: url("../img/pattern/pattern1.svg");
  background-size: 10em; }

#m-1-1-box-header {
  border-bottom: 0.1em #FFF solid;
  padding: 1em 1.5em;
  font-size: 1.5em; }

#m-1-1-box-menu {
  display: flex;
  flex-wrap: wrap;
  padding: 1.5em 0; }

#m-1-1-box-menu div {
  font-size: 1.5em; }

#m-1-1-box-menu a {
  padding: 1em 1.5em;
  color: #FFF; }

#m-1-1-box-menu a:hover {
  color: #000;
  background: #FFF; }

#m-1-1-box-header {
  background: #000;
  color: #FFF; }

#m-1-2-box {
  background-image: url("../img/pattern/pattern2.svg");
  background-size: 10em; }

#m-1-3-box {
  background-image: url("../img/line.gif");
  background-size: 100%; }

#m-3-1-box {
  background-image: url("../img/pattern/pattern3.svg");
  background-size: 5em;
  position: relative; }

.description {
  display: none; }

@media (min-width: 1240px) {
  #m-3-1-box {
    min-height: 13em; } }
#m-3-2-box {
  background-image: url("../img/design.gif");
  background-size: 9em; }

#m-3-3-box {
  background-size: 7.5em;
  width: calc(100%-2em);
  aspect-ratio: 3/2; }

@media (max-width: 1240px) {
  #summary, #page {
    min-height: initial; }

  #logo {
    height: initial; } }
#f-1-box {
  background-image: url("../img/pattern/pattern5.svg");
  background-size: 5em; }

#f-3-box {
  background-image: url("../img/pattern/pattern7.svg");
  background-size: 10em; }

#f-4-1-box {
  background-image: url("../img/pattern/pattern8.svg");
  background-size: 7.5em; }

#f-4-2-box {
  background-image: url("../img/pattern/pattern9.svg");
  background-size: 5em; }

#f-1-box, #f-2-box, #f-3-box, #f-4-1-box, #f-4-2-box {
  background-color: #FFF; }

#f-4 {
  font-size: 0.9em; }

#social-title {
  border-bottom: solid 0.1em;
  color: #000;
  background-color: #FFF;
  border-color: #000; }

#social-title-hover {
  color: #6CF; }

#guestbook {
  background-color: #FFF; }

#note {
  color: #000; }

#guestbook textarea {
  border-color: #000; }

#guestbook input {
  border-color: #000; }

#guestbook button {
  background-color: #000;
  color: #FFF;
  border-color: #000; }

#guestbook button:hover {
  background-color: #6CF;
  color: #000; }

#container-space {
  background-image: url("../img/header.svg");
  background-size: 5em;
  background-color: #fff;
  border-top: 0.5em #FFF solid; }

@media (max-width: 1280px) {
  #container {
    display: flex;
    flex-flow: column; }

  #header {
    flex: 0 1 auto; }

  #main {
    flex: 0 1 auto; }

  #footer {
    flex: 0 1 auto; }

  #container-space {
    flex: 1 1 auto; } }
#gb-pu-box {
  background-color: #FFF; }

#gb-pu-ty {
  background-color: #6CF;
  color: #FFF;
  border-color: #FFF; }

@media (max-width: 640px) {
  #gb-pu {
    background-color: #FFF; }

  #gb-pu-box {
    border-color: #6CF; } }
#contact-form-bg {
  background-color: #6CF; }

#contact-form-box {
  background-color: #FFF; }

#contact-form-title {
  background-color: #000;
  color: #6CF; }

#contact-form-x:after {
  border-left: solid 0.1em #FFF; }
#contact-form-x:before {
  border-left: solid 0.1em #FFF; }

#contact-form-body {
  caret-color: #6CF; }

#contact-form-body input {
  border-color: #000; }

#contact-form-txt {
  border-color: #000; }

#contact-form-body button {
  color: #000;
  background-color: #6CF;
  border-color: #000; }

#contact-form-body button:hover {
  color: #6CF;
  background-color: #FFF;
  border-color: #6CF; }

@media (max-width: 640px) {
  #contact-form-bg {
    background-color: #FFF; } }