/* CSS Document */
.open {
  position: fixed;
  top: 50px;
  right: 100px;
  width: 70px;
  height: 70px;
  display: block;
  cursor: pointer;
  background-image: url("../images/hamburger_bg.svg");
  background-size: contain;
  transition: opacity 0.4s linear; }
  .open span {
    display: block;
    float: left;
    clear: both;
    height: 1px;
    width: 50px;
    border-radius: 40px;
    background-color: #d4d9dc;
    position: absolute;
    right: 18px;
    top: 18px;
    overflow: hidden;
    transition: all 0.4s ease; }
    .open span:nth-child(1) {
      margin-top: 10px; }
    .open span:nth-child(2) {
      margin-top: 20px; }
    .open span:nth-child(3) {
      margin-top: 30px; }

.sub_menu {
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  height: 0;
  width: 0;
  right: -40px;
  top: 0;
  position: absolute;
  background-color: rgba(191, 163, 171, 0.75);
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
  z-index: 18;
  overflow: hidden;
  cursor: default; }
  .sub_menu li {
    display: block;
    float: right;
    clear: both;
    height: auto;
    margin-right: -160px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
    .sub_menu li:first-child {
      margin-top: 180px; }
    .sub_menu li:nth-child(1) {
      -webkit-transition-delay: 0.05s; }
    .sub_menu li:nth-child(2) {
      -webkit-transition-delay: 0.10s; }
    .sub_menu li:nth-child(3) {
      -webkit-transition-delay: 0.15s; }
    .sub_menu li:nth-child(4) {
      -webkit-transition-delay: 0.20s; }
    .sub_menu li:nth-child(5) {
      -webkit-transition-delay: 0.25s; }
    .sub_menu li a {
      font-family: 'Julius Sans One', sans-serif;
      color: #d4d9dc;
      font-size: 3.8rem;
      font-weight: 400;
      width: 100%;
      display: block;
      float: left;
      line-height: 75px;
      letter-spacing: .25em;
      opacity: 1; }
      .sub_menu li a:hover {
        color: #9d7521; }

.oppenned {
  background-image: none;
  display: block; }
  .oppenned .sub_menu {
    opacity: 1;
    height: 660px;
    width: 650px; }
  .oppenned span:nth-child(2) {
    overflow: visible; }
  .oppenned span:nth-child(1), .oppenned span:nth-child(3) {
    z-index: 100;
    transform: rotate(45deg);
    background-color: #9d7521;
    padding: 1px;
    display: none; }
  .oppenned span:nth-child(1) {
    transform: rotate(45deg) translateY(10px) translateX(10px); }
  .oppenned span:nth-child(2) {
    height: 640px;
    width: 650px;
    right: -125px;
    top: -220px;
    border-radius: 80% 30% 50% 50%/50%;
    background-color: rgba(191, 163, 171, 0.65);
    cursor: default; }
  .oppenned span:nth-child(3) {
    transform: rotate(-45deg) translateY(-5px) translateX(5px); }
  .oppenned li {
    margin-right: 168px; }

.sub_menu::before {
  transition: all 0.8s cubic-bezier(0.2, -0.1, 0.1, 1);
  content: "";
  display: inline-block;
  background-image: url("../images/ashiato.svg");
  background-size: contain;
  width: 10px;
  height: 10px;
  position: fixed;
  top: -10px;
  right: -10px;
  opacity: 0; }

.oppenned .sub_menu::before {
  width: 120px;
  height: 250px;
  top: 50px;
  right: 370px;
  opacity: 1; }

.oppenned .sub_menu:hover::before {
  background-image: url("../images/ashiato2.svg"); }