@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lusitana);
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%; 
}
button.menu-toggle {
/*  opacity: 0.6;*/
  background-color: transparent;
  position: fixed;
  z-index: 4;
  top: 35px;
  left: 94%;
  border: none;
  width: 36px;
  height: 30px;
  outline: none;
  transition: opacity 0.2s ease-out; 
 cursor: pointer;
}
@media only screen and (max-width: 1024px){
button.menu-toggle {
    width: 31px;
    height: 26px;
	top: 14px;
}
}
@media only screen and (max-width: 991px){
button.menu-toggle {
  top: 22px;
}
}
@media only screen and (max-width: 768px){
button.menu-toggle {
   width: 25px;
    height: 20px;
	top: 15px;
}
}
@media only screen and (max-width: 767px){
button.menu-toggle {
    margin-top: 2%;
    top: 17px;
    height: 27px;
    right: 30px;
    margin-left: -4%;
}
}
@media only screen and (max-width: 767px){
button.menu-toggle {
   margin-top: 0.5%;
    margin-left: -6%;
    width: 35px;
}
}
@media only screen and (max-width: 375px){
button.menu-toggle {
    margin-left: -8%;
}
}
button.menu-toggle-kaso {
/*  opacity: 0.6;*/
/*  background-color: transparent;*/
/*
  position: fixed;
  z-index: 999;
*/
/*
  top: 35px;
  border: none;
  width: 36px;
  height: 30px;
  outline: none;
  transition: opacity 0.2s ease-out; 
	left: 95%;
*/
}
@media only screen and (max-width: 1024px){
button.menu-toggle-kaso {
    width: 31px;
    height: 26px;
	top: 14px;
}
}
@media only screen and (max-width: 991px){
button.menu-toggle-kaso {
  top: 22px;
}
}
@media only screen and (max-width: 768px){
button.menu-toggle-kaso {
   width: 25px;
    height: 20px;
	top: 15px;
}
}
@media only screen and (max-width: 767px){
button.menu-toggle-kaso {
    margin-top: 2%;
    top: 17px;
    height: 27px;
    right: 30px;
    margin-left: -4%;
}
}
@media only screen and (max-width: 767px){
button.menu-toggle-kaso {
   margin-top: 0.5%;
    margin-left: -6%;
    width: 35px;
}
}
@media only screen and (max-width: 375px){
button.menu-toggle-kaso {
    margin-left: -8%;
}
}


button:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    background: linear-gradient(to bottom, #c5a368, #c5a368 20%, transparent 20%, transparent 40%, #c5a368 40%, #c5a368 60%, transparent 60%, transparent 80%, #c5a368 80%, #c5a368 100%);
    transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out; 
}
  button:after {
    opacity: 0;
    content: '×';
    color: white;
    position: absolute;
    top: 16px;
    left: -4px;
    font-family: Arial, sans-serif;
    font-size: 76px;
    line-height: 0;
    transition: opacity 0.4s ease-out; 
}
  button:active {
/*    transform: translateY(2px); */
}
  button:hover {
    opacity: 1; 
}
  .open button {
    opacity: 1; 
}
    .open button:before {
      opacity: 0;
      width: 0; 
}
    .open button:after {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(360deg);
      transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out; 
}


/*下層*/
li button.menu-toggle-kaso {
  background-color: transparent;
  position: fixed;
  z-index: 9999;
    top: 30px;
	right: 30px;
  border: none;
  width: 36px;
  height: 30px;
  outline: none;
  transition: opacity 0.2s ease-out; 
cursor: pointer;
}
@media only screen and (max-width: 1650px){
button.menu-toggle-kaso {
    top: 29px;
}
}
@media only screen and (max-width: 1440px){
button.menu-toggle-kaso {
top: 17px;
}
}
@media only screen and (max-width: 1199px){
button.menu-toggle-kaso {
    top: 16px!important;
    right: 15px!important;
}
}
@media only screen and (max-width: 1076px){
button.menu-toggle-kaso {
    top: 14px;
}
}
@media only screen and (max-width: 1024px){
button.menu-toggle-kaso {
	width: 30px;
    height: 24px;
    top: 15px;
}
}
@media only screen and (max-width: 1199px){
button.menu-toggle-kaso {
        background-color: transparent;
        position: fixed;
        z-index: 4;
        top: 35px;
        left: 94%;
        border: none;
        width: 36px;
        height: 30px;
        outline: none;
        transition: opacity 0.2s ease-out;}
}
@media only screen and (max-width: 768px){
button.menu-toggle-kaso {
     top: 15px;
    width: 25px;
    height: 20px;
}
}
@media only screen and (max-width: 767px){
button.menu-toggle-kaso {
    margin-top: 2%;
    top: 17px;
    height: 27px;
    right: 30px;
    margin-left: -4%;
}
}
@media only screen and (max-width: 767px){
button.menu-toggle-kaso {
	margin-top: -4px;
        margin-left: -20px;
	width: 35px;
}
}
@media only screen and (max-width: 375px){
button.menu-toggle-kaso {
    margin-left: -8%;
    margin-top: -1%;
}
}
@media only screen and (max-width: 320px){
button.menu-toggle-kaso {
    margin-top: -2.5%;
}
}
button.menu-toggle-kaso:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    background: linear-gradient(to bottom, #000000, #000000 20%, transparent 20%, transparent 40%, #000000 40%, #000000 60%, transparent 60%, transparent 80%, #000000 80%, #000000 100%);
    transition: opacity 0.2s 
	ease-out, width 0.2s 0.2s ease-out; 
}
  button:after {
    opacity: 0;
    content: '×';
    color: white;
    position: absolute;
    top: 16px;
    left: -4px;
    font-family: Arial, sans-serif;
    font-size: 45px;
/*    font-size: 76px;*/
/*    line-height: 0;*/
    transition: opacity 0.4s ease-out; 
}
  button:active {
/*    transform: translateY(2px); */
}
  button:hover {
    opacity: 1; 
}
  .open button {
    opacity: 1; 
}
    .open button:before {
      opacity: 0;
      width: 0; 
}
    .open button:after {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(360deg);
      transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out; 
}




nav {
  z-index: 3;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  overflow: hidden; 
}
  nav:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: rgb(197, 163, 104, 0.99);
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
    transform: scale(0.04), translateY(9999px);
    overflow: hidden; 
}
  .open nav {
    top: 0; 
}
    .open nav:before {
      animation: menu-animation 0.8s ease-out forwards; 
}

ul.menu {
  position: fixed;
	top: 13%;
  left: 48%;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  perspective: 1000;
  color: white; 
}
@media (max-width: 767px) {
ul.menu {
  left: 45%;
    top: 17%;
}
}
  ul.menu li {
    opacity: 0;
    text-align: center;
    transform: translate3d(0, 36px, 0); 
   padding-top: 10px;
}
    ul.menu li:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      left: auto;
      background-color: white;
      height: 100%;
      width: 0;
      overflow: hidden;
      transition: width 0.14s ease-out; 
      pointer-events: none;
}
    ul.menu li:after {
      opacity: 0;
      content: attr(data-text);
      position: absolute;
      top: 3px;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      color: #c5a368;
/*      color: #98B296;*/
      overflow: hidden;
      transform: translate(-24px, 6px);
      transition: transform 0.1s ease-out, opacity 0.1s ease-out; 
      pointer-events: none;
}
    ul.menu li:hover:before {
      left: 0;
      right: auto;
      width: 100%; }
    ul.menu li:hover:after {
      opacity: 1;
      padding: 0 20px;
      transform: translate(0px, 6px);
      transition: transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out; }
    .open ul.menu li {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: transform 0.2s ease-out, opacity 0.2s ease-out; }

/*クリックしてから、順番に出てくる 数字を入力する事*/
      .open ul.menu li:nth-child(1) {
        transition-delay: 0.75s; }
      .open ul.menu li:nth-child(2) {
        transition-delay: 0.85s; }
      .open ul.menu li:nth-child(3) {
        transition-delay: 0.95s; }
      .open ul.menu li:nth-child(4) {
        transition-delay: 1.05s; }
      .open ul.menu li:nth-child(5) {
        transition-delay: 1.15s; }
      .open ul.menu li:nth-child(6) {
        transition-delay: 1.25s; }
      .open ul.menu li:nth-child(7) {
        transition-delay: 1.35s; }

article {
  padding: 24px;
  max-width: 600px;
  margin: 60px auto;
  transition: 0.2s ease-out;
}
  .open article {
    transform: scale(0.92);
    transition: transform 0.2s 0.41s ease-out; 
}

@keyframes menu-animation {
  0% {
    opacity: 0;
    transform: scale(0.04) translateY(300%); }
  40% {
    transform: scale(0.04) translateY(0);
    transition: ease-out; }
  40% {
    transform: scale(0.04) translateY(0); }
  60% {
    opacity: 1;
    transform: scale(0.02) translateY(0px); }
  61% {
    transform: scale(0.04); }
  99.9% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%; }
  100% {
    transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0; } }
/* Scss Document */