body {
  background-color: #f6e6de;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic", "Meiryo", sans-serif;
}

main, header {
  padding: 0 15%;
}

@media screen and (max-width: 768px) {
  main, header {
    padding: 0 5%;
  }
}

main p {
  font-size: calc(1rem + .9vw);
}

img {
  width: 100%;
}

/* ▼ Menu：デフォルトで横並び */
.Menu {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px;
}

.Menu li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
}

/* ▼ ハンバーガー部分 */
.HamburgerMenu {
  display: flex;
  align-items: center;
}

.MenuIsOpen {
  opacity: 1;
}

.Menu li {
  list-style: none;
  margin: 15px auto;
  width: 100%;
  max-width: 500px;
}

.Menu li a {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0.5em 0;
  border-bottom: 1px solid #fff;
}

.Menu {
width: 100% !important;
background-color: #dd704b;
}

.Menu ul li{
list-style: none;
margin: 15px auto;
width: 500px;
}

.Menu ul a{
text-decoration: none;
color: #fff;
}

.Menu {
justify-content: end !important;
}

.Menu button {
margin: 5% !important;
font-size: 35px !important;
color: #fff;
} 

.icon-size img {
width: 60px;
}

.contact-box {
background-color: #dd704b;
border-radius: 35px;
margin-top: 80px;
}

.qrcode {
width: 70%;
}

.footer-logo {
width: 50%;
}

.title-radius {
border-radius: 25px;
}

footer {
background-color: #dd704b;
}

footer p {
font-size: calc(1rem + .9vw);
}

small {
  font-size: calc(0.8rem + .9vw);
}

.Explanatory-box {
background-color: #fff;
border-radius: 20px;
padding: 15px;
}

@media screen and (max-width: 768px) {
  .Menu ul li{
    list-style: none;
    margin: 15px auto;
    width: 85%;
  }

  .Menu ul li a {
    list-style: none;
    margin: 5% 0;
  }
}

.Menu a::after {
content: ">";
}

.Menu {
padding: 0;
}

.Menu ul {
padding: 0;
}

.instagram_feed {
margin-top: 80px;
}

.bg-rainbow {
  background-image: url("../images/img_header-rainbow.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 50px;
  margin-bottom: 10px;
  padding: 26px 0 1px 0;
}

#area-01, #area-04 {
  background-position-x: 22vw;

}

#area-02, #area-03 {
  background-position-x: 26vw;
}

.br-sp {
  display: none;
}

@media screen and (max-width: 768px) {
.br-sp {
  display: block;
}
}

.btn-close {
--bs-btn-close-bg: none;
}

.btn-close span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.btn-close span:nth-child(2) {
  transform: translateY(4px) rotate(-45deg);
}

.carousel-item, .carousel-item.active {
  padding: 0 7vw 3vw 7vw;
}

.carousel-indicators {
  display: none;
}

.carousel-control-prev, .carousel-control-next {
  opacity: 1;
  font-weight: bold;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-image: none;
}

.carousel-control-prev-icon::before, .carousel-control-next-icon::after {
  font-size: 2rem;
  display: inline-block;
  line-height: 0;
  vertical-align: baseline;
  position: absolute;
  color: #dc3545;
}

.carousel-control-prev-icon::before {
  content: "\27E8";
  left: 5px;
}

.carousel-control-next-icon::after {
  content: "\27E9";
  right: 5px;
}

.btn:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.offcanvas-header button:focus-visible
{
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, 1);
}


/**********************
* contactページ
***********************/
label {
  display: block;
  margin: 15px auto;
  max-width: 450px;
}

input {
  height: 40px;
}

textarea {
  height: 180px;
}

input, textarea {
  width: 100%;
  border: 1.5px solid #dcdcdc;
  border-radius: 10px;
  padding: 10px;
}

form p {
  margin: 0;
}

form small {
  font-size: .775em;
}

form button {
  border: none;
  padding: 5px 60px;
  border-radius: 25px;
  font-size: calc(1rem + .5vw);
}

.confirm button {
  border: none;
  padding: 5px 60px;
  border-radius: 25px;
  font-size: calc(1rem + .5vw);
}

#backBtn {
  border: 1.5px solid #000;
}

.confirm ul {
  padding: 0;
}

.confirm ul li {
  list-style: none;
  margin: 0;
}

main.thanks {
  margin: 100% 0;
}


/***********************************
* menu
***********************************/

.Nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.GlobalMenu {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.HamburgerMenu {
  display: flex;
  align-items: center;
}

.HamburgerMenu .btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}

.Menu {
  position: fixed;
  right: -100%;
  top: 0;
  width: 320px;
  max-width: 100%;
  height: 100%;
  /* background: #fff; */
  padding: 40px 20px;
  box-shadow: -5px 0 15px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  overflow-y: auto;
  z-index: 1001;
}

.MenuIsOpen {
  right: 0;
}

.MenuCloseBtn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

.Overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

.OverlayIsOpen {
  visibility: visible;
  opacity: 1;
}

.Menu a {
  display: block;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
  font-size: 18px;
}

.Menu ul li a {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0.5em 0;
  border-bottom: 1px solid #fff;
}

.Menu {
  font-size: 1.3em;
}

.li-mt {
  margin-top: 10%;
}

@media screen and (max-width: 768px) {
  .li-mt {
    margin-top: 20%;
  }
}