body{
    background-color:#F9AA8F;
}

img{
    border:0;
}

h1{
    font-family:Arial,sans-serif;
    font-size:20px;
    font-weight:bolder;
    color:#F36C21;
    margin:0;
}

h2{
    font-family:Arial,sans-serif;
    font-size:15px;
    color:#F36C21;
    margin:0;
}


@media screen and (min-width:1300px) {
div.space{
    background-color:#FFFEF6;
    width:50%;
    text-align:left;
    margin-left:20px;
    margin-bottom:10px;
    padding:10px;
    font-family:ＭＳ ゴシック;
    font-size:12px;
    line-height:20px;
    color:#333132;
}
}
@media screen and (min-width: 768px) and (max-width: 1299px) {
div.space{
    background-color:#FFFEF6;
    width:70%;
    text-align:left;
    margin-left:20px;
    margin-bottom:10px;
    padding:10px;
    font-family:ＭＳ ゴシック;
    font-size:12px;
    line-height:20px;
    color:#333132;
}
}
@media (max-width: 768px) {
	div.space{
    background-color:#FFFEF6;
    width:95%;
    text-align:left;
    margin-bottom:10px;
    padding:10px;
    font-family:ＭＳ ゴシック;
    font-size:12px;
    line-height:20px;
    color:#333132;
    }
}

div.space a{
    text-decoration:none;
    color:#FCAF17;
}
div.space img{
    margin-bottom:3px;
}
@media screen and (min-width:1300px) {
div.menu{
    width:50%;
    text-align:center;
    margin-left:20px;
    padding:10px;
    font-family:Arial,sans-serif;
    font-size:15px;
    color:#333132;
}
}
@media screen and (min-width: 768px) and (max-width: 1299px) {
div.menu{
    width:70%;
    text-align:center;
    margin-left:20px;
    padding:10px;
    font-family:Arial,sans-serif;
    font-size:15px;
    color:#333132;
}
}
@media (max-width: 768px) {
div.menu{
    width:95%;
    text-align:center;
    padding:10px;
    font-family:Arial,sans-serif;
    font-size:15px;
    color:#333132;
}
}

div.menu a{
    text-decoration:none;
    color:#FFFFFB;
    font-weight:bold;
}


@media screen and (min-width:1300px) {
div.gallery{
    width:50%;
    text-align:center;
    margin-left:20px;
    margin-bottom:10px;
    padding:10px;
    font-family:ＭＳ ゴシック;
    font-size:16px;
    font-weight:bold;
    line-height:20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1299px) {
div.gallery{
    width:70%;
    text-align:center;
    margin-left:20px;
    margin-bottom:10px;
    padding:10px;
    font-family:ＭＳ ゴシック;
    font-size:16px;
    font-weight:bold;
    line-height:20px;
}
}
@media (max-width: 768px)  {
div.gallery{
    width:95%;
    text-align:center;
    margin-bottom:10px;
    padding:10px;
    font-family:ＭＳ ゴシック;
    font-size:16px;
    font-weight:bold;
    line-height:20px;
}
}

div.gallery a:link,a:visited,a:active,a:hover{
    text-decoration:none;
    color:#FFE6CE;
}

div.gallery img{
    margin-bottom:3px;
}

accordion{
    margin:0;
}

figure.img {
  margin-inline: auto;
  width: fit-content;
}

figure.img img {
  border: 8px solid #F9AA8F;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

@media screen and (min-width:1300px) {
div.clap{
    width:50%;
    text-align:center;
    margin-left:20px;
    margin-bottom:10px;
    padding:10px;
    font-family:Arial,sans-serif;
    font-size:11px;
}
}
@media screen and (min-width: 768px) and (max-width: 1299px) {
div.clap{
    width:70%;
    text-align:center;
    margin-left:20px;
    margin-bottom:10px;
    padding:10px;
    font-family:Arial,sans-serif;
    font-size:11px;
}
}

@media screen and (max-width: 768px) {
div.clap{
    width:95%;
    text-align:center;
    margin-bottom:10px;
    padding:10px;
    font-family:Arial,sans-serif;
    font-size:11px;
}
}

div.clap a:link,a:visited,a:active,a:hover{
    text-decoration:none;
    color:#FFE6CE;
}

input.clap{
    margin:0;
}

form.clap{
    margin:0;
}


/* ハンバーガーメニュー */
#menu-button {
  position: fixed;
  right: 8px;
  display: grid;
  place-items: center;
  place-content: center;
  width: 60px;
  height: 60px;
  background: #F9AA8F;
  border: none;
  cursor: pointer;
  z-index: 999;
}

/* バー */
.bar,
.bar::before,
.bar::after {
  width: 25px;
  height: 3px;
  background-color: #333132;
  transition: transform 0.3s;
}

.bar {
  display: grid;

  &::before,
  &::after {
    content: "";
    grid-area: 1 / 1;
  }

  &::before {
    transform: translateY(-8px);
  }

  &::after {
    transform: translateY(8px);
  }
}

/* オープン時のバー */
.menu-open {
  .bar {
    background-color: transparent;

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
  }
}

/* メニューラベル */
.menu-label {
  transform: translateY(10px);
  font-size: 10px;
  color: #333132;
}

/* オーバーレイ */
#overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 997;
  transition: opacity 0.3s;

  /* オープン時のオーバーレイ */
  .menu-open & {
    visibility: visible;
    opacity: 1;
  }
}

/* メニュー */
#menu {
  position: fixed;
  height: 100%;
  width: 300px;
  background-color: #FFFEF6;
  right: 0;
  top: 0;
  z-index: 998;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;

  & ul {
    list-style: none;
    padding: 0;
    margin: 80px 0 0 0;
  }

  & li {
      padding: 20px;
      text-align:center;
}

  & a {
    text-decoration:none;
    color:#FCAF17;
  }
}

/* オープン時のメニュー */
.menu-open #menu {
  transform: translateX(0);
}

/* body */
body {
  overflow-x: clip;

  /* オープン時のbody */
  .menu-open& {
    overflow: clip;
  }
}

/* コンテンツ */
.section {
  width: 100%;
  height: 70vh;
  background-color: #bbb;
  display: grid;
  place-items: center;
  font-size: 2em;

  &:nth-child(2) {
    background-color: #ccc;
  }
}