@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* ------------------------------
variables
------------------------------ */

/* ------------------------------
common
------------------------------ */

*, 
*:before, 
*:after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #000000;
  color: #f9f9f9;
  font-family: sans-serif;
  line-height: 1;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

a {
  color: #6F2FBD;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, th, td, figure {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

ul,
ol,
li {
  list-style: none;
}

img {
  border: none;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
  width: auto;
}

/* ------------------------------
header
------------------------------ */

header {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 960px) {
  header {
      margin: 0 auto;
      width: 960px;
  }
}

header div.header-wrapper {
  height: 420px;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 960px) {
  header div.header-wrapper {
      height: 720px;
  }
}

header.board div.header-wrapper {
  height: 120px;
  margin-bottom: 32px;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 960px) {
  header.board div.header-wrapper {
      height: 120px;
  }
}

header a {
    color: #fff;
}

header div.logo {
    padding: 16px;
    position: absolute;
        left: 0;
        top: 0;
    z-index: 100;
}

header div.logo img {
  filter: drop-shadow(0 0 10px rgba(111, 47, 189, 0.7))
  drop-shadow(0 0 20px rgba(111, 47, 189, 0.5));
    height: 112px;
    width:auto;
}
@media screen and (min-width: 960px) {
    header div.logo img {
        height: 144px;
    }
}

header.board div.logo img {
  filter: drop-shadow(0 0 6px rgba(111, 47, 189, 0.7))
  drop-shadow(0 0 12px rgba(111, 47, 189, 0.5));
    height: 96px;
    width:auto;
}
@media screen and (min-width: 960px) {
  header.board div.logo img {
        height: 96px;
    }
}

header div.topimage {
  animation-name: topimage-animation;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  background-image: url('/media/topimage.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  padding: 0;
  padding-top: 420px;
  position: fixed;
      left: 0;
      right: 0;
      top: 0;
  width: 100%;
  z-index: -10;
}
@media screen and (min-width: 960px) {
  header div.topimage {
      margin: 0 auto;
      height: 720px;
      padding-top: 0;
      width: 960px;
  }
}

@keyframes topimage-animation {
  100% {
      opacity: 1;
  }
}

header div.before-button-bbs {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  height: 56px; /* 上部の背景画像が占める範囲 */
  background-image: url('/media/bg_h2_top.png');
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: -1;
}

header div.globalmenu {
    position: relative;
}
@media screen and (min-width: 960px) {
    header div.globalmenu {
        position: absolute;
            right: 0;
            top: 0;
    }
}

header div.globalmenu #globalmenu-button-check {
    display: none;
}

header div.globalmenu label.globalmenu-button-label {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    position: fixed;
    top: 12px;
    right: 12px;
    display: flex;
    height: 56px;
    width: 56px;
    justify-content: center;
    align-items: center;
    z-index: 110;
}
@media screen and (min-width: 960px) {
    header div.globalmenu label.globalmenu-button-label {
        display: none;
    }
}

header div.globalmenu #globalmenu-button-check:checked ~ label.globalmenu-button-label {
  border-radius: 50% 50% 0 0;
}

header div.globalmenu label.globalmenu-button-label span,
header div.globalmenu label.globalmenu-button-label span:before,
header div.globalmenu label.globalmenu-button-label span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #6F2FBD;
    position: absolute;
}

header div.globalmenu label.globalmenu-button-label span:before {
    bottom: 8px;
}

header div.globalmenu label.globalmenu-button-label span:after {
    top: 8px;
}

header div.globalmenu #globalmenu-button-check:checked ~ label.globalmenu-button-label span {
    background-color: rgba(255, 255, 255, 0);
}

header div.globalmenu #globalmenu-button-check:checked ~ label.globalmenu-button-label span::before {
    bottom: 0;
    transform: rotate(45deg);
}

header div.globalmenu #globalmenu-button-check:checked ~ label.globalmenu-button-label span::after {
    top: 0;
    transform: rotate(-45deg);
}

header div.globalmenu div.globalmenu-list {
    background-color: rgba(0,0,0,0.8);
    display: none;
    width: 50%;
    position: fixed;
    top: 68px;
    right: 0;/*leftの値を変更してメニューを画面外へ*/
    z-index: 110;
    transition: all 0.5s;/*アニメーション設定*/
}
@media screen and (min-width: 960px) {
    header div.globalmenu div.globalmenu-list {
        display: block;
        position: relative;
            top: 0;
        width: 720px;
    }
}

header div.globalmenu #globalmenu-button-check:checked ~ div.globalmenu-list {
    display: block; /*メニューを画面内へ*/
}

header div.globalmenu div.globalmenu-list ul {
    padding: 12px 16px;
}
@media screen and (min-width: 960px) {
    header div.globalmenu div.globalmenu-list ul {
        display: flex;
        justify-content: space-around;
        padding: 16px;
    }
}

header div.globalmenu div.globalmenu-list ul li {
    list-style: none;
}

header div.globalmenu div.globalmenu-list ul li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    padding: 8px 0;
    position: relative;
}
@media screen and (min-width: 960px) {
    header div.globalmenu div.globalmenu-list ul li a {
        padding: 8px 16px;
    }
}

header div.globalmenu div.globalmenu-list ul li a dl dd.en {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.2rem;
  color: #6F2FBD;
}

header div.globalmenu div.globalmenu-list ul li a dl dd.ja {
    font-size: 1.3rem;
    color: #dddddd;
}

header div.globalmenu div.globalmenu-list ul li a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: solid 2px #6F2FBD;
    border-right: solid 2px #6F2FBD;
    transform: rotate(45deg);
    position: absolute;
    right: 4px;
    top: 28px;
}
@media screen and (min-width: 960px) {
    header div.globalmenu div.globalmenu-list ul li a::before {
        border: none;
    }
}

header p.lead {
  filter: drop-shadow(0 0 4px rgba(111, 47, 189, 1));
  font-size: 1.4rem;
  font-weight: 700;
  position: absolute;
    left: 40px;
    top: 44%;
  transform:rotate(-16deg);
}

header p.lead span.big {
  font-size: 1.8rem;
}

/* ------------------------------
layout
------------------------------ */

.l-content {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 1) 160px, rgba(0, 0, 0, 1) 100%);
  margin-top: -32px;
  position: relative;
}

.l-content h3 {
  background-image: url('/media/bg_h3.png');
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  font-size: 2.4rem;
  font-weight: 700;
  position: relative;
  padding: 16px;
}

.l-content h3 a {
  color: #ffffff;
}

.l-wrapper-zero {
	margin: 0 auto;
	padding: 0;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 960px) {
  .l-wrapper-zero {
    width: 960px;
  }
}

.l-wrapper-md {
	margin: 0 auto;
	padding: 0 16px;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 960px) {
  .l-wrapper-md {
    width: 960px;
  }
}

.l-wrapper-lg {
	margin: 0 auto;
	padding: 0 32px;
  position: relative;
}
@media screen and (min-width: 960px) {
  .l-wrapper-lg {
    width: 960px;
  }
}

.l-column-parent {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
	max-width: 428px;
  position: relative;
}

.l-tac {
  text-align: center;
}

/* ------------------------------
utility
------------------------------ */

.u-margin-top-xs {
	margin-top: 0.8rem;
}

.u-margin-top-sm {
	margin-top: 1.6rem;
}

.u-margin-top-md {
	margin-top: 2.4rem;
}

.u-margin-top-lg {
	margin-top: 3.2rem;
}

.u-margin-top-xl {
	margin-top: 4rem;
}

.u-margin-left-md {
	margin-left: 2.4rem;
}

p.en {
  color: #999;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* ------------------------------
project
------------------------------ */

.button-bbs {
  font-size: 1.6rem;
  font-weight: 700;
  position: relative;
  padding: 0 0 56px 0; /* 上下にスペースを追加 */
  text-align: center;
  z-index: 1;
}



.button-bbs::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px; /* 下部の背景画像が占める範囲 */
  background-image: url('/media/bg_h2_bottom.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; 
}

.button-bbs a {
  background-color: #6F2FBD;
  color: #ffffff;
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 16px;

}

.p-weeklyevents {

}

.p-weeklyevents > .unit {
  border-bottom: 2px solid #000;
  display: flex;
  margin: 0 auto;
  width: 100%;
}

.p-weeklyevents > .unit:last-of-type {
  border-bottom: none;
}

.p-weeklyevents > .today {
  background-color: #000;
}

.p-weeklyevents > .unit > .dow {
  background-color: #3b3b3b;
  background-image: url('/media/bg_dow.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 1.6rem;
}

.p-weeklyevents > .today > .dow {
  background-color: #6F2FBD;
}

.p-weeklyevents > .unit > .dow > p {
  color: rgba(255, 255, 255, 1);
  font-size: 1.6rem;
  font-weight: 700;
  padding: 16px 12px;
}

.p-weeklyevents > .today > .dow > p {
  color: rgba(255, 255, 255, 1);
}

.p-weeklyevents > .unit > .detail {
  padding: 16px;
}

.p-weeklyevents > .unit > .detail > h4 {
  font-size: 1.8rem;
  font-weight: 700;
}

.p-weeklyevents > .unit > .detail > p.description {
  color: #fff;
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
}

.p-weeklyevents > .unit > .detail > p.style {
  color: #bbbbbb;
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
}

.p-hours p span.big {
  font-size: 2rem;
  font-weight: 700;
}

.p-hours p span.annotation {
  font-size: 1.4rem;
}

.p-fees table {
  border-collapse: collapse;
  width: 100%;
}

.p-fees table tr th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 16px;
  text-align: left;
  white-space: nowrap;
}

.p-fees table tr:last-child th {
  border-bottom: none;
}

.p-fees table tr th span.sub {
  color: #bbb;
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
}

.p-fees table tr td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1.5rem;
  padding: 16px;
  text-align: right;
}

.p-fees table tr:last-child td {
  border-bottom: none;
}

.p-cautions {
}

.p-cautions > ul {
  list-style-position: inside;
  padding-left: 2rem;
}

.p-cautions > ul > li {
  font-size: 1.5rem;
  list-style-type: disc;
}

.p-map div.googlemaps {
    height: 0;
    overflow: hidden;
    padding-top: 60%;
    position: relative;
}

.p-map div.googlemaps iframe {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.p-map dl {

}

.p-map dl dd { 
  font-size: 1.5rem;
  text-align: center;
}

/* ------------------------------
Content Board
------------------------------ */

.u-pager {
	padding: 0 8px;
	text-align: center;
}

.u-pager ul {
}

.u-pager ul li {
	border: none;
	display: inline-block;
	padding: 8px 8px 0 8px;
}

.u-pager ul li a {
}

.u-pager ul li.off {
	color: #777;
}

.u-backNavigation {
    margin-top: 24px;
}

.u-backNavigation ul {
}

.u-backNavigation ul li {
	margin-bottom: 4px;
	text-align: center;
}

.u-backNavigation ul li a {
    color: #fff;
	font-size: 1.5rem;
	padding: 0 0 0 16px;
    position: relative;
}


.u-backNavigation ul li a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: solid 2px #6F2FBD;
    border-left: solid 2px #6F2FBD;
    transform: rotate(-45deg);
    position: absolute;
    left: 0;
    top: 2px;
}


dl.form {
    padding: 0;
}

dl.form dt {
	font-size: 1.8rem;
	margin-bottom: 8px;
}

dl.form dd {
    font-size: 1.5rem;
	margin-bottom: 16px;
	padding-left: 16px;
}


dl.form input.field,
dl.form textarea {
	appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	border: none;
    border-radius: 0;
	font-size: 1.5rem;
	outline: none;
	margin: 0 0 8px 0;
	padding: 8px;
}

dl.form select {
	appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	background: #FFF;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	outline: none;
	margin: 0 0 8px 0;
	padding: 8px;
}

dl.form .annotation {
	color: #BBB;
	font-size: 1.4rem;
}

dl.form .caution {
	color: #6F2FBD;
	font-size: 1.4rem;
}

dl.form dd ul.terms {
	border: 1px solid #777;
  list-style-position: inside;
	padding: 16px;
  padding-left: 2.4rem;
}

dl.form ul.terms li {
    font-size: 1.5rem;
    list-style-type: disc;
}

dl.form dd.submit {
	padding-top: 8px;
}

dl.form dd.submit ul {
}

dl.form dd.submit ul li {
	display: block;
}

dl.form dd.submit ul li input.button {
	appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	background: #6F2FBD;
	border: none;
	border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
	color: #050505;
	display: block;
	font-size: 1.5rem;
    margin: 0 auto;
	padding: 12px 0;
	text-decoration: none;
	width: 200px;
}

.p-board p.introduction {
  font-size: 1.6rem;
}

.p-board > h4 {
  font-size: 2rem;
  font-weight: 700;
}

.p-board div.buttonPost {
}

.p-board div.buttonPost a.button {
  background-color: rgba(5, 5, 5, 0.8);
  display: block;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  margin: 0 auto;
  padding: 3px;
  text-align: center;
  width: 50%;
}

.p-board div.buttonPost a.button span {
  border: 2px solid #6F2FBD;
  color: #fff;
  display: block;
  padding: 13px;
}

.p-board div.buttonComment {
  margin-top: 16px;
}

.p-board div.buttonComment a.button {
  background-color: rgba(5, 5, 5, 0.8);
  display: block;
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  margin: 0 auto;
  padding: 3px;
  text-align: center;
  width: 44%;
}

.p-board div.buttonComment a.button span {
  border: 1px solid rgb(111, 47, 189);
  color: #fff;
  display: block;
  padding: 6px;
}

.p-board .boardList {
margin-bottom: 24px;
}

.p-board .boardList p.noResult {
padding: 24px 16px;
}

.p-board .boardList ul {
}

.p-board .boardList ul li {
border: 1px solid rgba(255, 255, 255, 0.5);
display: block;
  margin: 16px 0;
padding: 16px;
}

.p-board .boardList ul li.official {
  background-color:rgb(22, 11, 36);
  border: 1px solid rgba(111, 47, 189, 0.5);
}

.p-board .boardList ul li div.child {
margin: 16px 0 0 24px;
}

.p-board .boardList ul li dl {
position: relative;
}

.p-board .boardList ul li div.child dl {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px;
}

.p-board .boardList ul li div.child dl:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.p-board .boardList ul li dl dt,
.p-board .p-boardDetail dl dt {
margin-top: 8px;
}

.p-board .boardList ul li dl dd,
.p-board .p-boardDetail dl dd {
color: #DDD;
font-size: 1.4rem;
}

.p-board .boardList ul li dl dd.delete {
position: absolute;
  top: 0;
  right: 0;
}

.p-board .boardList ul li dl dd.delete a {
color: #555;
text-decoration: none;
}

.p-board .p-boardDetail {
margin-bottom: 24px;
  padding: 0;
}

.p-board .p-boardDetail dl {
  background: #252525;
  border: 1px solid #555;
  padding: 16px;
}

.p-board .boardList ul li dl dt {
margin-top: 8px;
}

.p-board .boardList ul li dl dd {
color: #BBB;
font-size: 1.4rem;
}

/* ------------------------------
footer
------------------------------ */

div.footer-wrapper {
  width: 100%;
}

footer {
  padding: 24px;
  position: relative;
  width: 100%;
}

footer div.pageTop {
position: fixed;
  bottom: 12px;
  right: 12px;
z-index: 1000;
}

footer div.pageTop a {
background-color: rgba(5, 5, 5, 0.8);
border-radius: 50%;
display: block;
width: 56px;
height: 56px;
text-align: center;
color: #000;
text-decoration: none;
}

footer div.pageTop a::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: solid 3px #6F2FBD;
  border-left: solid 3px #6F2FBD;
  border-radius: 1px;
  transform: rotate(45deg);
  position: absolute;
  left: 20px;
  top: 23px;
}

footer div.links {
  text-align: center;
}

footer div.links ul {
  display: flex;
  flex-wrap: no-wrap;
  justify-content: center;
}

footer div.links ul li {
  padding: 0 0.5em;
}

footer div.links ul li img {
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.8;
  width: 48px;
}

footer p {
  font-size: 1.4rem;
  text-align: center;
}