* {
  padding: 0;
  margin: 0;
}

header {
  border-bottom: white solid 2px;
}

.header-content-bottom {
  background-color: black
}

.header-content-bottom ul {
  display: none;
}

.header-content-top {
  display: block;
}

.header-icons {
  width: 20%;
  margin: auto;
  text-align: center;
}




.hamberger-menu {
  width: 100%;
  margin: auto;
  display: none;
}

.hamberger-menu ul {
  display: block;
}



.hamberger-menu details {
  position: relative;
  font-weight: bold;

}

.hamberger-menu summary {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  width: 120px;
  cursor: pointer;
  list-style: none;
  z-index: 2;
  color: white;
  background-color: black;
  text-align: center;
  border: white solid 2px;
}

.hamberger-menu  summary::-webkit-details-marker {
  position: absolute;
  color: transparent;

}

.hamberger-menu summary ::after {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(-50%);
  text-align: center;

}


.hamberger-menu details[open] summary::after {
  content: "×";
  text-align: center;


}

.hamberger-menu summary:hover,details[open] summary {
  color: black;
  background-color: white;


}

.hamberger-menu details[open] summary:hover {
  color: black;
  background-color: white;
  text-align: center;

}

.hamberger-menu details[open].menu-list {
  animation: fadein.5s ease;
}
@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hamberger-menu-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  background-color: black;
  z-index: 1;
  padding: 40px 0;
}

.hamberger-menu-list li a {
  display: block;
  padding: 15px 0;
  color: white;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  position: relative;
}

.hamberger-menu-list li a::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: white;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.hamberger-menu-list li a:hover::before {
  transform: scaleX(1);
}

.header-logo {
  width: 100%;
  padding-left: 0%;
  margin: auto;
  text-align: center;
  padding: 10px 0;
  font-weight:lighter;
}


.top-wrapper h1 {
  font-size: 70px;
  color: white;
  text-align: center;
  text-shadow: 5px 5px black;

}

.top-wrapper  {
  background-image: url("https://coda-lunga.com/image/top-responsive.jpg");
  background-size: cover;
  width: 100%;
  padding: 300px 0;
}


.top-wrapper p {
  font-size: 80%;
  text-shadow: 1px 1px black;

}

.content-wrapper h2 {
  font-size: 30px;
  color: white;
  padding: 10px 0;
  text-align: center;
}



.about-us-content {
  display: block;
  width: 100%;
}

.reason-content {
  display: block;
  width: 100%;
  margin: auto;

}


.order-flow-contents {
  color: white;
  display: block;
  width: 100%;
  margin: auto;

}

.order-flow-num {
  font-size: 100px;
  width:100%;
  margin: auto;
  text-align: center;
  font-family: "Impact";
}

.order-flow-subtitle {
  font-size: 40px;
  width: 100%;
  margin: auto;
  padding-top:10px;
  text-align: center;
}

.order-flow-text {
  width: 90%;
  margin: auto;
  padding:20px 0;
  border-top: solid 4px white;
  border-left: none;
}

.accordion-wrapper details[open]summary::after{
  transform: translateY(-50%)rotate(45deg);
  background-color: #cac8c6;
}

.price-contents-wrapper {
  width: 100%;
  margin: auto;
  display: block;
}

.price-content {
  width: 90%;
  margin: 50px auto;

}

.price-content-subtitle p {
  font-size:25px;
}

.price-content-price-tag p {
  font-size: 20px;
}



.price-content-attention {
  padding: 10px 0;
  width: 90%;
  margin:auto;
}

.contact-method a {
  width: 90%;
  margin:50px auto;
}

.slider-wrapper li {
  scroll-snap-align:center;
  display: inline-block;
  width: 25%;
  white-space: normal;
}



.footer-content ul {
  display: none;
}