@media screen and (max-width: 768px) {
  #container {
    width: auto;
    box-sizing: border-box;
  }
  #container #contentmain #localnavi {
    display: none;
  }

  /* ヘッダー
  ------------------------------------------- */
  #container #globalnavi {
    position: fixed;
    top: 0;
    left: 0;
    float: none;
    width: 50px;
    height: 100%;
  }

  #container #globalnavi h1#logo a {
    width: 50px;
    height: 156px;
    margin: 0;
    background-size: contain;
  }

  #container #globalnavi .global {
    position: fixed;
    top: 0;
    left: 51px;
    width: calc(100% - 51px);
    height: 100%;
    padding: 10vh 5vh;
    background-color: #fff;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
  }

  #container #globalnavi .global ul.menu {
    background: none;
  }

  #container #globalnavi .global ul.menu li,
  #container #globalnavi .global ul.namelist li {
    padding: 16px 0;
  }

  #container #globalnavi .global ul.menu li a {
    text-indent: 0;
  }

  #container #globalnavi .global ul.menu li.about a,
  #container #globalnavi .global ul.menu li.festival a,
  #container #globalnavi .global ul.menu li.artfestival a,
  #container #globalnavi .global ul.menu li.history a,
  #container #globalnavi .global ul.menu li.photoalbum a,
  #container #globalnavi .global ul.namelist li.member a {
    background: none;
    text-indent: 0;
    width: auto;
    font-size: 14px;
    font-family: sans-serif;
  }

  .hamburgerBtn {
    position: relative;
    width: 50px;
    height: calc(100% - 156px);
    background-color: #787878;
    border: none;
  }

  .hamburgerLine {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 1px;
    background-color: #fff;
    transform: translate(-50%, -50%);
    transition: 0.3s;
  }

  .hamburgerLine::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: auto;
    background-color: #fff;
    transition: 0.3s;
  }

  .hamburgerLine::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: auto;
    background-color: #fff;
    transition: 0.3s;
  }

  .is-active #container #globalnavi .global {
    visibility: visible;
    opacity: 1;
  }

  .is-active .hamburgerLine {
    background-color: transparent;
  }

  .is-active .hamburgerLine::before {
    top: 0;
    transform: rotate(-45deg);
  }

  .is-active .hamburgerLine::after {
    top: 0;
    transform: rotate(45deg);
  }

  /* メインコンテンツ
  ----------------------------------------------- */

  #container #contentmain {
    width: auto;
    float: none;
    margin-left: 50px;
  }

  #container #contentmain #contents {
    width: auto;
    float: none;
    margin-bottom: 0;
    padding-bottom: 40px;
  }

  #container #contentmain #contents > img {
    width: auto;
    max-width: 100%;
  }

  #container #contentmain #contents p.association {
    width: 100%;
    height: auto;
    background-size: 480px;
    background-position: right 5px top 5px;
    height: 20px;
  }

  #container #contentmain #contents .aboutarticle h1 {
    width: 100%;
    height: 0;
    margin-bottom: 20px;
    padding-top: 23%;
    background-size: contain;
  }

  #container #contentmain #contents .aboutarticle .text {
    padding: 0 10px;
  }

  #container #contentmain #contents .messagearticle,
  #container #contentmain #contents .aimarticle,
  #container #contentmain #contents .sectionarticle {
    padding-left: 10px;
    padding-right: 10px;
  }

  #container #contentmain #contents .aimarticle table {
    width: 100%;
  }

  #container #contentmain #contents .aimarticle table td {
    display: inline-block;
    width: 25%;
  }

  #container #contentmain #contents .aimarticle table td:nth-child(2n) {
    display: none;
  }

  /* フッター
  ----------------------------------------------- */
  #footer {
    min-width: auto;
    padding: 20px 0 20px 51px;
  }

  #footer ul.footernavi {
    display: flex;
    justify-content: center;
  }

  #footer ul.footernavi li {
    margin-bottom: 16px;
  }

  #footer ul.footernavi li.link a {
    margin-left: 0;
  }

  #footer p.copyright {
    margin-left: 0;
    font-size: 10px;
    text-align: center;
  }
}

/* 共通 */
.att {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.25;
}

.btnCenter {
  text-align: center;
}

.btnCenter + .btnCenter {
  margin-top: 20px;
}

/* a.btn01 {
  display: inline-block;
  width: 200px;
  padding: 12px 24px;
  background-color: #f8b500;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.1em;
} */

a.btn01 {
  display: inline-block;
  /* width: 250px; */
  padding: 8px;
  background-color: #f8b500;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.1em;
  box-sizing: border-box;
}

a.btnText {
  font-size: 13px;
  text-decoration: underline;
}

.gridBox + .btnCenter {
  margin-top: 60px;
}

.gridBox {
  display: flex;
}

.gridBox + .gridBox {
  margin-top: 48px;
}

.gridBox > .textBox {
  flex: 1;
}

.gridBox > .textBox h2 {
  margin-bottom: 16px;
  font-size: 18px;
}

.gridBox img {
  align-self: flex-start;
  width: 40%;
  margin-left: 5%;
}
.contentsDetail {
  display: flex;
  margin: 20px 0;
}

.contentsDetail div {
  display: flex;
}

.contentsDetail div + div {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #ddd;
}

.contentsDetail div > dt {
  margin-right: 8px;
}

@media screen and (min-width: 767px) {
  a.btn01:hover {
    background-color: #ea9c00;
  }
}
@media screen and (max-width: 768px) {
  .gridBox + .btnCenter {
    margin-top: 30px;
  }

  .gridBox {
    display: flex;
    flex-wrap: wrap;
  }

  .gridBox + .gridBox {
    margin-top: 32px;
  }

  .gridBox > .textBox {
    width: 100%;
  }
  .gridBox > .textBox h2 {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .gridBox img {
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
  }

  .contentsDetail {
    display: block;
    margin: 20px 0;
  }

  .contentsDetail div {
    display: flex;
  }

  .contentsDetail div + div {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  .contentsDetail div > dt {
    margin-right: 8px;
  }
}

/* 西宮市芸術祭 */
#container #contentmain #contents.inner p.association {
  width: 759px;
  background-position-x: right;
}

#container #contentmain #contents.inner {
  width: 799px;
  padding: 0 20px;
  box-sizing: border-box;
}

#container #contentmain #contents .festival {
  margin-bottom: 30px;
}

#container #contentmain #contents .festivalList {
  margin-bottom: 20px;
  padding: 16px;
  background-color: #f4f4f4;
}

#container #contentmain #contents .festivalList > ul li {
  list-style: inside;
}

@media screen and (max-width: 768px) {
  #container #contentmain #contents.inner {
    width: auto;
    margin-left: 0;
    padding: 0 10px 40px;
    box-sizing: border-box;
  }

  #container #contentmain #contents.inner p.association {
    width: auto;
  }

  #container #contentmain #contents .festival {
    margin-bottom: 30px;
  }

  #container #contentmain #contents .festivalList {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f4f4f4;
  }

  #container #contentmain #contents .festivalList > ul li {
    list-style: inside;
  }
}

/* 会員名簿 */
.memberBox {
  border-top: 2px solid #66b229;
  padding: 20px 0;
}

.memberBox:last-child {
  border-bottom: 2px solid #66b229;
}

.memberBox > h2 {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: bold;
}

.memberBox > ul {
  display: flex;
  flex-wrap: wrap;
}

.memberBox > ul li {
  margin-right: 20px;
}

.memberBox > ul li > a {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  /* アルバム */
  #container #photoalbum,
  #container ul.albumcategory {
    width: auto;
  }

  .albumContents h2 {
    overflow: hidden;
  }

  .albumContents h2 img {
    width: 500px !important;
    height: auto !important;
  }

  #container #contentmain.albumContents #contents h3 {
    width: auto;
    overflow: hidden;
  }

  #container #contentmain.albumContents #contents h3 img {
    width: 140%;
    height: auto;
  }

  /* 歴史 */
  #container #contentmain #contents .establishment {
    width: 100%;
    padding: 0 10px 40px;
    box-sizing: border-box;
  }

  #container #contentmain #contents .establishment h2.establishmenthead {
    max-width: 100%;
    overflow: hidden;
  }

  #container #contentmain #contents .establishment img {
    width: 100%;
    max-width: 100%;
    float: none;
  }

  #container #contentmain #contents .establishment p.invitation {
    margin-right: 20px;
  }

  #container #contentmain #contents .establishment p.program a {
    margin-left: 0;
  }

  #container #contentmain #contents .establishment .representative {
    width: 100%;
  }

  #container #contentmain #contents .establishment .representative ul {
    width: 100%;
    height: auto;
    min-height: 102px;
  }

  #container #contentmain #contents .establishment .representative ul li {
    width: calc(100% - 100px);
    position: static;
    padding-top: 45px;
    padding-left: 91px;
  }

  #container #contentmain #contents .history {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  #container #contentmain #contents .history dl,
  #container #contentmain #contents .history > img {
    width: 100%;
  }

  /* お問い合わせ */
  #container #contentmain #contents .contactarticle iframe {
    width: 100%;
  }
}