@charset "UTF-8";
html {
  width: 100%;
  height: auto;
  line-height: 1;
  font-size: 16px;
  letter-spacing: normal;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #555;
  line-height: 1.75;
  background-color: #fff;
  font-size: 1rem;
  scroll-behavior: smooth;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  letter-spacing: 0.03em;
}

@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}
a.box {
  display: grid;
}

a:link {
  color: #648f9f;
  text-decoration: underline;
}

a:hover, a:active {
  color: #648f9f;
  text-decoration: none;
}

a:visited {
  color: #314f5a;
}

.mincho {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.small {
  font-size: 0.825rem;
}

.fb:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a2c9da' viewBox='0 0 50 50' width='50px' height='50px'%3E%3Cpath d='M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M37,19h-2c-2.14,0-3,0.5-3,2 v3h5l-1,5h-4v15h-5V29h-4v-5h4v-3c0-4,2-7,6-7c2.9,0,4,1,4,1V19z'/%3E%3C/svg%3E");
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  transition: 0.3s ease-in-out;
}

.fb:hover:before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23648f9f' viewBox='0 0 50 50' width='50px' height='50px'%3E%3Cpath d='M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M37,19h-2c-2.14,0-3,0.5-3,2 v3h5l-1,5h-4v15h-5V29h-4v-5h4v-3c0-4,2-7,6-7c2.9,0,4,1,4,1V19z'/%3E%3C/svg%3E");
}

.twitter:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='%23a2c9da' width='50px' height='50px'%3E%3Cpath d='M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z'/%3E%3C/svg%3E");
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  transition: 0.3s ease-in-out;
}

.twitter:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='%23648f9f' width='50px' height='50px'%3E%3Cpath d='M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z'/%3E%3C/svg%3E");
}

.insta:before {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='%23a2c9da' width='50px' height='50px'%3E%3Cpath d='M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z'/%3E%3C/svg%3E");
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  transition: 0.3s ease-in-out;
}

.insta:hover:before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='%23648f9f' width='50px' height='50px'%3E%3Cpath d='M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z'/%3E%3C/svg%3E");
}

.mcma-logo:before {
  content: "";
  background: url(../images/logo.png) center left no-repeat;
  display: inline-block;
  background-size: contain;
  margin-right: 10px;
  vertical-align: middle;
  width: 3rem;
  height: 2rem;
  margin-top: -3px;
}

#globalHeader {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: 0.3s ease-in-out;
}
@media only screen and (max-width: 768px) {
  #globalHeader {
    height: 4rem;
  }
}
#globalHeader .inner {
  width: 93.75%;
  margin-inline: auto;
  padding: 1.25rem 0 1.25rem;
  height: 3.5rem;
  display: grid;
  grid-template-columns: 15.63% 10.67% 73.7%;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  #globalHeader .inner {
    width: 100%;
    padding: 0;
    grid-template-columns: 4fr 3fr 4rem 4rem;
    height: 4rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1175px) {
  #globalHeader .inner {
    grid-template-columns: 15% 20% 65%;
  }
}
#globalHeader .inner #siteLogo {
  width: 83.67%;
  margin: 0;
  height: 3.5rem;
  text-align: left;
}
@media only screen and (max-width: 768px) {
  #globalHeader .inner #siteLogo {
    width: 100%;
    padding-left: 0.5rem;
    box-sizing: border-box;
  }
}
#globalHeader .inner #siteLogo a img {
  width: 100%;
  height: 3.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (max-width: 768px) {
  #globalHeader .inner #header-social {
    padding-right: 0.5rem;
    box-sizing: border-box;
  }
}
#globalHeader .inner #header-social ul {
  display: flex;
  justify-content: flex-end;
}
#globalHeader .inner #header-social ul li + li {
  margin-left: 0.7rem;
}
@media only screen and (max-width: 768px) {
  #globalHeader .inner #header-social ul li + li {
    margin-left: 0.2rem;
  }
}
@media only screen and (max-width: 768px) {
  #globalHeader .inner #header-social ul i:before {
    width: 1.5rem;
    height: 1.5rem;
  }
}
#globalHeader .inner #globalNav ul {
  display: flex;
  justify-content: flex-end;
}
#globalHeader .inner #globalNav ul li + li {
  margin-left: 1.25rem;
}
#globalHeader .inner #globalNav ul li {
  font-weight: 700;
}
#globalHeader .inner #globalNav ul li a {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #555;
}
#globalHeader .inner #globalNav ul li a:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #555;
  position: absolute;
  left: -100%;
  bottom: 0;
  transition: 0.3s ease-in-out;
}
#globalHeader .inner #globalNav ul li a:hover:before {
  left: 0;
}
#globalHeader .inner #header-ticket {
  width: 100%;
  height: 4rem;
}
#globalHeader .inner #header-ticket .inner {
  width: 100%;
  height: 4rem;
}
#globalHeader .inner #header-ticket .inner a {
  display: table;
  width: 4rem;
  height: 4rem;
  text-decoration: none;
  background-color: #555;
  text-align: center;
}
#globalHeader .inner #header-ticket .inner a span {
  display: table-cell;
  vertical-align: middle;
  font-size: 0.625rem;
  color: #fff;
  width: 100%;
  height: 4rem;
}
#globalHeader .inner #menuBar {
  width: 4rem;
  height: 4rem;
  background: #648f9f;
}
#globalHeader .inner #menuBar .inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2.8rem 1.2rem;
}
#globalHeader .inner #menuBar .inner .inner2 {
  position: relative;
  width: 100%;
  height: 2.8rem;
}
#globalHeader .inner #menuBar .inner .inner2 span {
  width: 50%;
  height: 1px;
  display: block;
  background: #fff;
}
#globalHeader .inner #menuBar .inner .inner2 span.top {
  position: absolute;
  left: 25%;
  top: calc((2.8rem - 3px) / 6 * 2);
}
#globalHeader .inner #menuBar .inner .inner2 span.bottom {
  position: absolute;
  left: 25%;
  bottom: calc((2.8rem - 3px) / 6 * 2);
}
#globalHeader .inner #menuBar .inner .inner2 span.middle {
  position: absolute;
  left: 25%;
  top: calc(3 * (2.8rem - 3px) / 6 + 1px);
}
#globalHeader .inner #menuBar .inner .x-small {
  font-size: 0.625rem;
  text-align: center;
  line-height: 1.2rem;
  color: #fff;
}
#globalHeader.scrolled {
  height: 4rem;
}
@media only screen and (max-width: 768px) {
  #globalHeader.scrolled {
    height: 4rem;
  }
}
@media screen and (min-width: 769px) {
  #globalHeader.scrolled .inner {
    padding: 0.725rem 0;
    height: 2.55rem;
  }
  #globalHeader.scrolled .inner #siteLogo {
    height: 2.55rem;
  }
  #globalHeader.scrolled .inner #siteLogo img {
    height: 2.55rem;
  }
  #globalHeader.scrolled .inner #header-social i:before {
    width: 1.5rem;
    height: 1.5rem;
  }
  #globalHeader.scrolled .inner #globalNav {
    font-size: 0.875rem;
  }
}

.menu-open {
  overflow: hidden;
}

#sp-globalNav {
  position: fixed;
  transition: 0.3s ease-in-out;
  width: 80%;
  background: #648f9f;
  top: 4rem;
  right: -80%;
  z-index: 20;
  transition: 0.5s ease-in-out;
  box-sizing: border-box;
}
#sp-globalNav .title-area {
  padding: 1rem;
  box-sizing: border-box;
  color: #fff;
}
#sp-globalNav .title-area .event-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: sans-serif;
}
#sp-globalNav .title-area .date {
  margin-top: 0.25rem;
}
#sp-globalNav .title-area .date, #sp-globalNav .title-area .plce {
  font-size: 0.875rem;
}
#sp-globalNav .sp-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.42);
}
#sp-globalNav .sp-nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  width: 100%;
  background: rgba(255, 255, 255, 0);
}
#sp-globalNav .sp-nav li a {
  position: relative;
  display: block;
  padding: 10px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
}
#sp-globalNav .sp-nav li a:after {
  position: absolute;
  content: "";
  top: 1.125rem;
  right: 10px;
  background: url(../images/sp-nav-arrow.png);
  width: 11px;
  height: 6px;
  background-size: contain;
  background-repeat: no-repeat;
}
#sp-globalNav .sp-nav li:active {
  background: rgba(255, 255, 255, 0.3);
}

.menu-open #sp-globalNav {
  right: 0;
}

#mask {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: -1;
  display: block;
  width: 100%;
  height: 100vh;
  transition: 0.4s ease-in-out;
}
.menu-open #mask {
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
}

#splash {
  margin-top: 6rem;
}
#splash .splash-inner {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 768px) {
  #splash .splash-inner {
    grid-template-columns: 1fr;
  }
}
#splash .splash-inner picture {
  overflow: hidden;
}
#splash .splash-inner picture img {
  width: 100%;
  height: auto;
}

.indexSection {
  padding: 7.25rem 0;
}
@media only screen and (max-width: 768px) {
  .indexSection {
    padding: 6rem 0;
  }
}
.indexSection .inner {
  width: 50%;
  margin-inline: auto;
}
@media only screen and (max-width: 768px) {
  .indexSection .inner {
    width: 89.3%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1175px) {
  .indexSection .inner {
    width: 90%;
  }
}
.indexSection .inner .section-title {
  font-size: 1.875rem;
  margin-bottom: 2rem;
}

#hello {
  background: #648f9f;
  color: #fff;
}
#hello .section-title {
  font-size: 2.5rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}
#hello .section-title .textBlock {
  display: block;
}
#hello .section-title .ker1 {
  letter-spacing: -0.002rem;
}
#hello .section-title .ker2 {
  letter-spacing: -0.003rem;
}
#hello .section-title .ker3 {
  letter-spacing: -0.004rem;
}
#hello .lead p + p {
  margin-top: 1.2rem;
}

#about {
  background: #f5f5f5;
}
#about .dl-cont dl {
  width: 100%;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 1px solid #ccc;
}
@media only screen and (max-width: 768px) {
  #about .dl-cont dl {
    display: block;
  }
}
#about .dl-cont dl dt, #about .dl-cont dl dd {
  padding: 0.875rem 20px;
  display: table-cell;
  vertical-align: middle;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
  #about .dl-cont dl dt, #about .dl-cont dl dd {
    display: block;
  }
}
#about .dl-cont dl dt {
  width: 17%;
  color: #111;
}
@media only screen and (max-width: 768px) {
  #about .dl-cont dl dt {
    width: 100%;
    display: block;
    padding-bottom: 0;
  }
}
#about .dl-cont dl dd {
  width: 83%;
}
@media only screen and (max-width: 768px) {
  #about .dl-cont dl dd {
    width: 100%;
    display: block;
    padding-top: 0.4375rem;
    word-break: break-all;
  }
}
#about .dl-cont dl:last-child {
  border-bottom: 1px solid #ccc;
}

#tickets {
  background: #fff;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
}
#tickets .cont-title {
  font-size: 1.3125rem;
  margin-bottom: 1.5rem;
}
#tickets .table-wrapper {
  margin-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
  #tickets .table-wrapper {
    overflow-x: scroll;
  }
}
#tickets .table-wrapper table {
  width: 100%;
  table-layout: fixed;
}
@media only screen and (max-width: 768px) {
  #tickets .table-wrapper table {
    width: -moz-max-content;
    width: max-content;
  }
}
#tickets .table-wrapper table thead tr th {
  text-align: center;
  color: #fff;
  background: #555;
  vertical-align: middle;
  padding: 6px 0;
  border: 1px solid #fff;
}
@media only screen and (max-width: 768px) {
  #tickets .table-wrapper table thead tr th {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
#tickets .table-wrapper table thead tr th span {
  display: block;
}
#tickets .table-wrapper table tbody tr td {
  background: #f5f5f5;
  text-align: center;
  padding: 15px 0;
  border: 1px solid #fff;
}
#tickets .table-wrapper table.sp-ticket {
  width: 100%;
  font-size: 0.925rem;
}
#tickets .table-wrapper table.sp-ticket th {
  background: #555;
  color: #fff;
  width: 62%;
}
#tickets .table-wrapper table.sp-ticket td {
  color: #555;
}
#tickets .notice {
  list-style: none;
}
#tickets .notice li {
  line-height: 1.8;
}
#tickets .notice li:before {
  content: "※";
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
#tickets .discount {
  margin-top: 2.1875rem;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  padding: 2.1875rem 0;
}
#tickets .discount h3 {
  font-size: 1.5rem;
}
#tickets .discount h3 span {
  background: linear-gradient(transparent 50%, rgba(100, 143, 159, 0.5803921569) 50%);
}
#tickets .coupon {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: 37.5% 56.25%;
  gap: 0 6.25%;
}
@media only screen and (max-width: 768px) {
  #tickets .coupon {
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }
}
#tickets .coupon img {
  width: 100%;
  height: auto;
}
#tickets .coupon figcaption h4, #tickets .coupon figcaption h5 {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
#tickets .coupon figcaption h5 {
  font-size: 1.125rem;
}
#tickets .coupon figcaption .btn {
  margin: 1.5rem 0 3rem;
}
#tickets .coupon figcaption .btn a {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 1;
  background: #648f9f;
  color: #fff;
  text-decoration: none;
  padding: 1rem 5rem;
  border-radius: 9999px;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-in-out;
}
#tickets .coupon figcaption .btn a:hover {
  box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.1);
  background: #a5cadc;
}
#tickets .ticket-online {
  margin-top: 3rem;
}
#tickets .ticket-online h3 {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
#tickets .ticket-online .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 3.75%;
}
@media only screen and (max-width: 768px) {
  #tickets .ticket-online .grid-3 {
    grid-template-columns: 1fr;
    gap: 1.5rem 0;
    width: 100%;
  }
}
#tickets .ticket-online .grid-3 a {
  display: block;
}
#tickets .ticket-online .grid-3 a figure {
  overflow: hidden;
}
#tickets .ticket-online .grid-3 a figure img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
@media only screen and (max-width: 768px) {
  #tickets .ticket-online .grid-3 a figure img {
    width: 50%;
  }
}
#tickets .ticket-online .grid-3 a figure figcaption {
  margin-top: 0.725rem;
}

#related {
  background: #f5f5f5;
  overflow: visible;
}
#related .section-title {
  text-align: center;
  font-size: 1.875rem;
  margin-bottom: 2rem;
}
#related .swiper .swiper-slide {
  height: auto;
  transform: scale(0.9);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  filter: opacity(0.9);
  transition: 0.3s ease-in-out;
}
#related .swiper .swiper-slide span {
  display: block;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 7px;
}
#related .swiper .swiper-slide-active {
  height: auto;
  transform: scale(1);
  filter: opacity(1);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
#related .swiper .swiper-slide-item {
  height: 100%;
}
@media only screen and (max-width: 768px) {
  #related .swiper .swiper-slide-item {
    height: auto;
  }
}
#related .swiper .swiper-button-next:after, #related .swiper .swiper-button-prev:after {
  color: #648f9f;
  transition: 0.3s ease-in;
}
#related .swiper .swiper-button-next:hover:after, #related .swiper .swiper-button-prev:hover:after {
  color: rgba(100, 143, 159, 0.5803921569);
}
#related .slide {
  width: 23.125%;
  position: relative;
  background: #fff;
}
#related .slide .badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.725rem;
  font-weight: 800;
  line-height: 1;
  padding: 6px 10px;
}
#related .slide .badge.no-need {
  border: 1px solid #648f9f;
  color: #648f9f;
}
#related .slide .badge.need {
  background: #648f9f;
  color: #fff;
}
#related .slide .slide-inner {
  padding: 2.875rem 1.5625rem 2rem;
}
#related .slide .slide-inner h3 {
  color: #648f9f;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 1.875rem;
}
#related .slide .slide-inner .btn {
  margin-top: 1.5rem;
}
#related .slide .slide-inner .btn a {
  display: block;
  transition: 0.3s ease-in-out;
  text-align: center;
  text-decoration: none;
  font-size: 0.925rem;
  border-radius: 9999px;
  background: #648f9f;
  color: #fff;
  padding: 0.5rem 0;
}
#related .slide .slide-inner .btn a:hover {
  background: rgba(100, 143, 159, 0.5803921569);
}

#gallery {
  background: #2a2a2a;
  color: #f5f5f5;
  padding-bottom: 7.25rem;
}
#gallery .ph-user {
  color: #ccc;
}
#gallery .gallery-top .main-photo {
  width: 100%;
}
#gallery .gallery-top .main-photo img {
  width: 100%;
  height: auto;
}
#gallery .gallery-top figcaption {
  width: 80%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 4fr 3fr;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: right;
  font-size: 0.875rem;
}
@media only screen and (max-width: 768px) {
  #gallery .gallery-top figcaption {
    grid-template-columns: 1fr;
    gap: 1.5rem 0;
  }
}
#gallery .gallery-top figcaption .name {
  transform: translateY(-6.125rem);
}
@media only screen and (max-width: 768px) {
  #gallery .gallery-top figcaption .name {
    transform: translateY(-1.5rem);
  }
}
#gallery .gallery-top figcaption .name .u-name {
  font-weight: 700;
  font-size: 8rem;
  line-height: 1.2;
  margin-bottom: 2.2rem;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
  color: #fff;
  text-align: left;
}
@media only screen and (max-width: 768px) {
  #gallery .gallery-top figcaption .name .u-name {
    font-size: 3rem;
    margin-bottom: 2rem;
  }
}
#gallery .gallery-top figcaption .name .u-name-desc {
  font-size: 0.925rem;
  line-height: 1.8;
  text-align: left;
}
#gallery .gallery-top figcaption .name .u-name-desc p + p {
  margin-top: 1.25rem;
}
@media only screen and (max-width: 768px) {
  #gallery .gallery-top figcaption .name .u-name-desc {
    width: 100% !important;
  }
}
#gallery .gallery-top figcaption .photo-cc {
  text-align: right;
  font-size: 0.875rem;
  margin-top: 1rem;
}
@media only screen and (max-width: 768px) {
  #gallery .gallery-top figcaption .photo-cc {
    margin-bottom: 1.5rem;
    font-size: 0.725rem;
  }
}
#gallery .sub-photo.photo02 {
  width: 67.25%;
  margin-top: 6rem;
  margin-left: 10%;
}
#gallery .sub-photo.photo03 {
  margin-left: 20%;
  width: 67.25%;
  margin-top: 6rem;
}
#gallery .sub-photo.photo05 {
  width: 42.125rem;
  margin-top: 6rem;
  margin-inline: auto;
}
@media only screen and (max-width: 768px) {
  #gallery .sub-photo.photo05 {
    width: 75%;
  }
}
#gallery .sub-photo.photo06 {
  margin-top: 6rem;
  width: 67.25%;
  margin-inline: auto;
}
#gallery .sub-photo.photo07 {
  margin-top: 6rem;
  width: 52.125%;
  margin-inline: auto;
}
#gallery .sub-photo.tate {
  width: 90%;
  margin-inline: auto;
  margin-top: 6rem;
  display: grid;
  grid-template-columns: 39.69% 53.13%;
  gap: 0 7.18%;
}
#gallery .sub-photo.tate .fig04-2 {
  margin-top: 11.125rem;
}
#gallery .sub-photo figcaption {
  text-align: right;
  font-size: 0.725rem;
  margin-top: 0.875rem;
}
#gallery .sub-photo img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  #gallery .ph-title {
    display: block;
  }
}
#gallery .photo {
  filter: blur(8px);
  transform: scale(1.05);
  transition: filter 1s ease, transform 1s ease;
}
#gallery .photo.loaded {
  filter: blur(0);
  transform: scale(1);
}

#access .section-title {
  text-align: center;
}
#access .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 7.5%;
}
@media only screen and (max-width: 768px) {
  #access .grid-container {
    grid-template-columns: 1fr;
    gap: 1.5rem 0;
  }
}
#access .grid-container h3 {
  font-size: 1.5rem;
  margin-bottom: 0.875rem;
}
#access .grid-container p + h3,
#access .grid-container picture + h3 {
  margin-top: 3rem;
}
#access .grid-container p + p {
  margin-top: 1.25rem;
}
#access .grid-container img {
  width: 100%;
  height: auto;
}

#gallery {
  width: 100%;
  height: 100%;
  max-height: -moz-max-content;
  max-height: max-content;
  position: relative;
}
#gallery figure {
  z-index: 10;
}
#gallery #noiseCanvas {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
}/*# sourceMappingURL=content.css.map */