@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */

html {
	scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans JP", sans-serif;
	font-size: min(3.2vw, 14px);
	line-height: 1.8;
  letter-spacing: 0.06em;
	-webkit-text-size-adjust: 100%;
  background-color: #000;
}

img {
	max-width: 100%;
	height: auto;
}
ul { list-style: none;}

.anim {
	opacity: 0;
  transition: all 0.8s cubic-bezier(0.83, 0, 0.17, 1);
  transform: translateY(40px);
}
.anim.on {
	opacity: 1;
  transform: translateY(0px);
}

h2.scrl {
  position: relative;
  clip-path: inset(0 100% 0 0);
  transition: all 0.3s cubic-bezier(0.83, 0, 0.17, 1);
}
h2.grad {
  background: linear-gradient(0deg, #1d9ac6 40%, #dac05f 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}
h2.scrl.on {
  clip-path: inset(0 0 0 0);
}
h2.scrl::after {
  content: "";
  display: block;
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  transition: all 0.3s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;
}
h2.scrl.on::after {
  width: 0;
}


.block--languages {
  display: inline-block;
  position: fixed;
  z-index: 990;
  top: min(4.2vw, 33px);
  right: min(26vw, 130px);
}
.wovn-languages {
  color: #fff;
  font-size: 10px;
  z-index: 5;
  cursor: pointer;
  -webkit-transition: all 0.6s cubic-bezier(0.035, 0.675, 0.225, 1.025) 0.3s;
  transition: all 0.6s cubic-bezier(0.035, 0.675, 0.225, 1.025) 0.3s;
  
  position: relative;
}
.wovn-languages .icon {
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12px;
  height: 12px;
}
.wovn-languages .icon::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 10;
  -webkit-transform-origin: right;
          transform-origin: right;
}
.wovn-languages .icon::after {
  content: "";
  display: block;
  width: 1px;
  height: 10px;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #fff;
}
.wovn-languages .nav-switch_btn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  line-height: 1;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 1);
  backdrop-filter: blur(40px);
  padding: 6px 10px;
  width: 58px;
}
.wovn-languages .nav-switch_btn .langIcon {
  display: block;
  width: 14px;
  height: 14px;
}
.wovn-languages .nav-switch_btn .langIcon svg {
  fill: #fff;
  width: inherit;
  height: inherit;
}
.wovn-languages .nav-switch_btn .nav-current {
  margin-left: 6px;
  text-transform: uppercase;
  font-size: 12px;
}
.wovn-languages .nav-switch_btn .nav-current:empty {
  margin-left: initial;
}
.wovn-languages .nav-switch_btn:has(.nav-current:empty) {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.wovn-languages .nav-dropdown {
  position: absolute;
  top: 50%;
  right: 10px;
  line-height: 1.4;
  text-align: left;
  font-size: 10px;
  z-index: 2;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.wovn-languages .nav-dropdown .list--language {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: #121212;
}
.wovn-languages .nav-dropdown .list--language li {
  width: 100%;
  display: none;
  cursor: pointer;
  padding-bottom: 0;
  line-height: 1.4;
  padding: 0;
  white-space: nowrap;
}
.wovn-languages .nav-dropdown .list--language li::after {
  content: none;
}
.wovn-languages.visible::before {
  margin-top: 0;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.wovn-languages.visible .nav-dropdown {
  opacity: 1;
  pointer-events: visible;
  z-index: 1;
  border: none;
  color: #121212;
  top: 30px;
  left: 50%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: transparent;
  background: #fff;
  overflow: hidden;
  -webkit-box-shadow: 0 13px 30px -12px rgba(18, 18, 18, 0.3);
          box-shadow: 0 13px 30px -12px rgba(18, 18, 18, 0.3);
}
.wovn-languages.visible .nav-dropdown .list--language li {
  position: relative;
  display: block;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  padding: 8px 8px 8px 24px;
}
.wovn-languages.visible .nav-dropdown .list--language li.selected {
  pointer-events: none;
  -webkit-transition: none;
  transition: none;
  color: #121212;
  background: #d0d0d0;
}
.wovn-languages.visible .nav-dropdown .list--language li.selected::after {
  content: "";
  position: absolute;
  display: block;
  top: 11px;
  left: 8px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #121212;
  border-bottom: 2px solid #121212;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.wovn-languages.visible .nav-dropdown .list--language li:hover {
  opacity: 0.5;
}

@media screen and (min-width: 821px) {
	
	.sp { display: none !important;}
	
	a { transition: all 0.3s ease-out;}
	a:hover { opacity: 0.5;}
	
}
@media screen and (max-width: 820px) {
	
	.pc { display: none !important;}
	
}


.contentWrap {
  max-width: 1120px;
  padding: 0 min(6vw, 60px);
  margin: 0 auto;
  position: relative;
}


#menuBtn {
  position: fixed;
  top: min(4vw, 30px);
  right: min(4vw, 30px);
  z-index: 9200;
}
#menuBtn a {
  display: flex;
  align-items: center;
  border: #fff solid 1px;
  font-family: "Roboto", sans-serif;
  font-size: min(3vw, 12px);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 100px;
  padding: min(1vw, 5px) min(3vw, 15px);
  gap: min(1.8vw, 8px);
  background-color: rgba(0,0,0,1);
}
#menuBtn a::after {
  content: "";
  display: block;
  width: 0.5em;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 50%;
}
#menuBtn.active a .open {
  display: none;
}
#menuBtn a .close {
  display: none;
}
#menuBtn.active a .close {
  display: block;
} 

#globalNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9100;
  display: none;
}
#globalNav .navInr {
  width: 80%;
  max-width: 680px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  gap: min(8vw, 60px);
  padding-bottom: 10vh;
}
.menuTtl {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  font-size: min(6.2vw, 52px);
}
#globalNav .navInr li a {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  font-size: min(7.8vw, 34px);
  letter-spacing: 0.08em;
}




#mainVisual {
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  position: relative;
  overflow: hidden;
}
#mainVisual::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/kv.jpg") no-repeat center center / cover;
  clip-path: polygon(60% 0, 60% 0, 40% 100%, 40% 100%);
  animation: opImg 0.8s cubic-bezier(0.83, 0, 0.17, 1) 2.5s forwards;
}
@keyframes opImg {
  0% {  clip-path: polygon(60% 0, 60% 0, 40% 100%, 40% 100%);}
/*
  30% { clip-path: polygon(50% 0, 70% 0, 50% 100%, 30% 100%);}
  70% { clip-path: polygon(100% 50%, 100% 60%, 0 50%, 0 40%);}
  100% { clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);}
*/
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
#mainVisual h1 {
  font-family: "Roboto", sans-serif;
  color: #00c5ff;
  position: absolute;
  top: 12%;
  left: 5%;
  font-size: 4vw;
  line-height: 1.2;
}
#mainVisual h1 span {
  position: relative;
  clip-path: inset(0 100% 0 0);
/*  transition: all 0.3s cubic-bezier(0.83, 0, 0.17, 1);*/
  
}
@keyframes opTxt {
  0% {  clip-path: inset(0 100% 0 0);}
  100% { clip-path: inset(0 0 0 0);}
}
@keyframes opTxtMask {
  0% {  width: 100%;}
  100% { width: 0;}
}
#mainVisual h1 span::after {
  content: "";
  display: block;
  background: #690903;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
/*  transition: all 0.3s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;*/
}
#mainVisual h1 span.ttl1 {
  font-size: 6.2vw;
  animation: opTxt 0.4s cubic-bezier(0.83, 0, 0.17, 1) 0.5s forwards;
/*
  color: #dac05f;
  background:linear-gradient(0deg, #1d9ac6 0%, #dac05f 50%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
*/
  
  line-height: 0;
  width: 40vw;
  display: inline-block;
}
#mainVisual h1 span.ttl2 {
  animation: opTxt 0.4s cubic-bezier(0.83, 0, 0.17, 1) 0.7s forwards;
}
#mainVisual h1 span.ttl3 {
  animation: opTxt 0.4s cubic-bezier(0.83, 0, 0.17, 1) 0.9s forwards;
}

#mainVisual h1 span.ttl1::after { animation: opTxtMask 0.3s cubic-bezier(0.83, 0, 0.17, 1) 1s forwards;}
#mainVisual h1 span.ttl2::after { animation: opTxtMask 0.3s cubic-bezier(0.83, 0, 0.17, 1) 1.2s forwards;}
#mainVisual h1 span.ttl3::after { animation: opTxtMask 0.3s cubic-bezier(0.83, 0, 0.17, 1) 1.4s forwards;}

#mainVisual .mvImg {
  max-width: 1440px;
  margin: 0 auto;
}
#mainVisual .scroll {
  position: absolute;
  bottom: min(5vw, 30px);
  left: min(5vw, 30px);
  display: flex;
  align-items: center;
  gap: min(2vw, 10px);
  color: #00c5ff;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  transform-origin: bottom right;
  transform: translateX(-100%) rotate(90deg);
}
#mainVisual .scroll::after {
  content: "";
  display: block;
  width: min(6vw, 30px);
  height: 1px;
  background-color: #00c5ff;
}


@media screen and (max-width: 820px) {
	
  #mainVisual h1 {
    top: 15%;
    font-size: 6.2vw;
  }
  #mainVisual h1 span.ttl1 {
    font-size: 10.4vw;
    width: 62vw;
  }
  
}




section {
  width: 100vw;
  padding: min(10vw, 80px) 0;
}
section h2 {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: min(8vw, 54px);
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1.2;
  margin: 0 auto min(8vw, 80px);
  width: fit-content;
}
section h2 span {
  display: block;
  font-size: 0.3em;
  line-height: 1.4;
}

.btnWrap {
  display: flex;
  gap: min(4vw, 20px);
  justify-content: center;
}
.btnWrap a {
  display: block;
  background: #bb2816;
  color: #fff;
  text-decoration: none;
  min-width: 300px;
  text-align: center;
  padding: min(3vw, 15px);
  border-radius: min(2vw, 8px);
  font-size: min(3.4vw, 16px);
  font-weight: bold;
}
.btnWrap.btnWhite a {
  background: #fff;
  color: #000;
}
.btnWrap.beforeSale a {
  background: #999;
  pointer-events: none;
}

#schedule {
  background: linear-gradient(160deg, #690903 0%, #92190d 100%);
}
#schedule h3 {
  color: #00c5ff;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: min(6.4vw, 36px);
  line-height: 1.4;
  margin-bottom: min(4vw, 30px);
}

#schedule table {
	width: 100%;
	border-bottom: 1px solid #00c5ff;
	margin: 0 auto;
	text-align: left;
	border-collapse: collapse;
  border-spacing: 0;
  letter-spacing: 0.02em;
  font-size: 0.98em;
  color: #fff;
  margin-bottom: min(8vw, 60px);
}

#schedule tr {
  position: relative;
}

#schedule tr:first-child th {
  padding-bottom: 1em;
  padding-top: 0;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
  font-family: "Roboto", sans-serif;
  color: #00c5ff;
}


#schedule td {
  border-top: 1px solid #00c5ff;
  vertical-align: middle;
  padding: 1.5rem 0;
  position: relative;
  font-weight: 500;
}

#schedule .date {
  width: 13%;
  font-family: "Roboto", sans-serif;
}
#schedule .date .week { font-size: 12px;  margin-left: 8px;}
#schedule .date .year {
  font-size: 16px;
  letter-spacing: 0.06em;
  display: block;
  line-height: 1.2;
}

#schedule .area {
  width: 11%;
  padding: 0 1.3rem;
  text-align: center;
  letter-spacing: 0.1em;
}
#schedule .venue {
  width: 33%;
  line-height: 1.5;
  padding: 1rem 1.5rem 1rem 0;
}
#schedule td.venue {
  font-weight: 600;
  font-size: 1.4em;
}
#schedule td.venuel {
  font-weight: 600;
  font-size: 1.1em;
}
#schedule .venue a {
  transition: 0.3s;
}
#schedule .venue a:hover { opacity: 0.5;}

#schedule .venue_info {
  font-size: 0.85em;
  font-feature-settings: "palt";
}

#schedule .venue_info a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1em;
}
#schedule .venue_info .icoInfo {
  width: 1.4em;
  font-size: 1.2em;
  color: #690903;
  background-color: #fff;
  border-radius: 50%;
  aspect-ratio: 1/1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5em;
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
#schedule .venue_info .icoTel {
  width: 1.4em;
  font-size: 1.2em;
  color: #690903;
  background: #fff url("../images/ico_tel.png") no-repeat center center / 58%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5em;
  line-height: 1;
  vertical-align: middle;
}
#schedule .venue_info .icoMail {
  width: 1.4em;
  font-size: 1.2em;
  color: #690903;
  background: #fff url("../images/ico_mail.png") no-repeat center center / 58%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5em;
  line-height: 1;
  vertical-align: middle;
}

#schedule .venue_info .info_tit {
  border-left: 3px solid;
  padding-left: 0.3em;
  display: inline-block;
  margin-bottom: 0.3em;
}

#schedule .info {
  width: 28%;
}

#schedule .time {
  width: 15%;
  font-family: "Roboto", sans-serif;
}

#schedule .time span { display: block; padding: 7px 0 0 0;}

#schedule .general {
	width: 10%;
	padding: 5px;
	text-decoration: none;
}
#schedule .general .week { font-size: 12px;  margin-left: 5px; font-family: sans-serif;}

#schedule td.date {
  font-weight: bold;
  font-size: 2.4em;
  line-height: 1.2;
}

#schedule td.time {
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
}
#schedule td.area {
  font-weight: 600;
  font-size: 1.1em;
}


@media screen and (max-width: 820px) {

  #schedule tr:first-child th {
    font-size: 0.8em;
    line-height: 1.4;
  }

  #schedule .date {
    width: 100%;
  }
  #schedule .time {
    width: 100%;
  }
  #schedule .venue {
    width: 85%;
  }
  #schedule .area {
    width: 15%;
  }
  #schedule .info {
    width: 100%;
    padding-top: 1.3rem;
  }

  #schedule tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-top: #00c5ff 1px solid;
    padding: 1rem 0;
    align-items: flex-start;
  }
  #schedule tr:first-child {
    display: none;
  }
  #schedule tr.day-two {
    border-top: rgba(200,200,200,0.4) 1px dotted;
  }

  #schedule td.date {
    font-size: 2.6em;
    letter-spacing: 0;
    padding: 0;
  }

  #schedule .date .week {
    font-size: 0.75em;
  }

  #schedule td.time {
    font-size: 1.1em;
    line-height: 1.2;
    letter-spacing: -0.02em;
    padding: 0 0 0.8em;
  }

  #schedule td {
    padding: 0;
    display: block;
    border: none;
  }

  #schedule td.area {
    padding: 0.1em 0.2rem;
    text-align: center;
    font-size: 0.85em;
    background: #fff;
    color: #690903;
  }
  #schedule td.nobg {
    background-color: transparent;
  }
  #schedule td.venue,
  #schedule td.venuel {
    font-size: 1.2em;
    padding: 0;
    padding-left: 2%;
  }
  #schedule td.venue span,
  #schedule td.venuel span {
    font-size: 0.8em;
  }
  #schedule td.venue br.pc-br,
  #schedule td.venuel br.pc-br {
    display: none;
  }
/*
  #schedule td .venue_place {
    width: 100%;
    padding-right: 0;
    margin-bottom: 0.5em;
    font-size: 0.92em;
  }
*/
  #schedule .venue_info a {
    margin-bottom: 0.6em;
  }
  #schedule .venue_con {
    width: 100%;
    font-size: 0.8em;
    opacity: 0.8;
  }
  #schedule .venue {
    padding-left: 0;
  }
  
}


#ticket {
  background-color: #bb2816;
  color: #fff;
}
#ticket h3 {
  margin-top: min(12vw, 60px);
  text-align: center;
  font-size: min(4.4vw, 26px);
  margin-bottom: min(6vw, 30px);
}

.priceList {
  margin-bottom: min(4vw, 20px);
  border-top: #fff solid 1px;
}
.priceList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: min(3vw, 20px);
  padding: min(3vw, 15px) 0;
  border-bottom: #fff solid 1px;
}
.priceList li .seat {
  font-size: min(4.2vw, 24px);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
  width: 40%;
  border-right: #fff solid 1px;
}
.priceList li .seat .note {
  font-size: min(3vw, 12px);
}
.priceList li .seat span {
  font-size: 0.6em;
  line-height: 1.3;
}

.priceList li > span {
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.priceList li .price {
  font-size: min(6.4vw, 40px);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  width: 60%;
}
.priceList li .price span {
  font-size: 0.6em;
  margin-left: 0.4em;
  line-height: 1.3;
}


.ticketBox {
  margin-bottom: min(6vw, 30px);
  background-color: #fff;
  border-radius: min(2vw, 10px);
  overflow: hidden;
}
.ticketBox dt {
  background-color: #000;
  color: #fff;
  padding: min(4vw, 20px) min(12vw, 50px) min(4vw, 20px) min(6vw, 30px);
  font-size: min(3.2vw, 20px);
  font-weight: 600;
  position: relative;
  cursor: pointer;
  line-height: 1.6;
}
.ticketBox dt span {
  display: block;
  position: absolute;
  top: 50%;
  right: min(4vw, 20px);
  width: min(5vw, 30px);
  aspect-ratio: 1/1;
  transform: translateY(-50%);
}
.ticketBox dt span::before,
.ticketBox dt span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.ticketBox dt span::before {
  transition: all 0.3s ease-out;
  transform: translate(-50%, -50%) rotate(0deg);
}

.ticketBox dt.on span::before {
  transform: translate(-50%, -50%) rotate(90deg);
}


.ticketBox dd {
  padding: min(6vw, 30px) min(6vw, 30px);
  color: #000;
}
.ticketBox dd .ticketInfo {
  margin-bottom: min(3vw, 15px);
}
.ticketBox dd .ticketInfo li {
  display: flex;
  border-bottom: #000 solid 1px;
  padding: min(3vw, 15px) 0;
}
.ticketBox dd .ticketInfo li h5 {
  width: 200px;
  font-size: min(3.4vw, 16px);
}
.ticketBox dd .ticketInfo li p {
  width: calc(100% - 200px);
  font-size: min(3.4vw, 16px);
}
.ticketBox dd > p {
  margin-bottom: min(6vw, 30px);
}


@media screen and (max-width: 820px) {
  
  
  .ticketBox dd .ticketInfo li {
    flex-direction: column;
    gap: min(2vw, 10px);
  }
  .ticketBox dd .ticketInfo li h5 {
    width: 100%;
  }
  .ticketBox dd .ticketInfo li p {
    width: 100%;
  }
  
  .priceList {
    margin-bottom: min(10vw, 60px);
  }
  .priceList li .seat {
    line-height: 1.2;
    width: 55%;
    padding-right: 4%;
  }
  .priceList li .seat span {
    font-size: 0.6em;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.4;
    display: inline-block;
    margin-top: 0.8em;
  }
  
  .priceList li .price {
    width: 40%;
  }
  
}



#movie {
  background-color: #000;
}
.movWrap {
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 100/56.25;
}
.movWrap iframe {
  width: 100%;
  height: 100%;
}

#attention {
  background-color: #000;
}

#attention h2 {
  margin-bottom: min(4vw, 20px);
}

.alert {
  color: #eb0814;
  text-align: center;
  font-size: min(4.2vw, 22px);
  font-weight: bold;
  margin-bottom: min(8vw, 60px);
}

.attentionWrap {
  background-color: #fff;
  padding: min(6vw, 30px);
  border-radius: min(2vw, 10px);
  margin-bottom: min(6vw, 30px);
}
.attentionWrap h5 {
  font-size: min(3.8vw, 20px);
  font-weight: 600;
/*
  border-bottom: #000 solid 1px;
  padding-bottom: min(2vw, 10px);
*/
  border-left: 3px solid #fc7204;
  padding-left: 0.6em;
  margin-bottom: min(6vw, 30px);
}
.attentionWrap h5 span {
  color: #eb0814;
}

.attentionWrap .contactBox {
  padding: min(6vw, 30px);
  background-color: rgb(0, 0, 0, 0.1);
}
.attentionWrap .contactBox h6 {
  font-size: min(3.4vw, 16px);
  margin-bottom: min(1vw, 5px);
}
.attentionWrap .contactBox p + p {
  margin-top: min(3vw, 15px);
}
.attentionWrap .contactBox a {
  color: #000;
  text-decoration: underline;
}

.simpleList {
  list-style: disc;
  padding-left: min(4vw, 20px);
}
.simpleList li p a {
  color: #fff;
  text-decoration: underline;
}
.simpleList li p + p {
  margin-top: min(4vw, 20px);
}
.simpleList + p {
  margin-top: min(6vw, 30px);
}


#members {
  background-color: #000;
  color: #fff;
}

.badge {
  position: absolute;
  top: 0;
  right: min(5vw, 30px);
  width: 18%;
  max-width: 240px;
  line-height: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.3s cubic-bezier(0.83, 0, 0.17, 1);
}
.badge.on {
  opacity: 1;
  transform: scale(1);
}

#members h2 {
  width: 48%;
  max-width: 520px;
  line-height: 0;
}
#members .membersImg {
  line-height: 0;
  margin-bottom: min(8vw, 60px);
}
#members p {
  font-size: min(3.4vw, 16px);
  margin-bottom: min(4vw, 20px);
}


.membersBox {
  border: #fff solid 1px;
  padding: min(6vw, 30px);
  border-radius: min(2vw, 10px);
  margin-top: min(8vw, 60px);
  margin-bottom: min(8vw, 60px);
}
.membersBox li {
  display: flex;
  border-bottom: #fff solid 1px;
  padding: min(4vw, 20px) 0;
}
.membersBox li:last-child {
  border-bottom: none;
}
.membersBox li h5 {
  width: 200px;
  font-size: min(3.4vw, 16px);
}
.membersBox li .membersTxt {
  width: calc(100% - 200px);
  font-size: min(3.4vw, 16px);
}
#members .membersBox li .membersTxt p:last-child {
  margin-bottom: 0;
}
.membersBox li .membersTxt h6 {
  font-size: min(3.6vw, 18px);
}
.membersBox li .membersTxt .note {
  display: inline-block;
  font-size: 0.8em;
  line-height: 1.6;
}

@media screen and (max-width: 820px) {
  
  .membersBox li {
    flex-direction: column;
    gap: min(2vw, 10px);
  }
  .membersBox li h5 {
    width: 100%;
  }
  .membersBox li .membersTxt {
    width: 100%;
  }
  
}

#contact {
  background-color: #000;
}


footer {
  background-color: #fff;
  padding: min(10vw, 80px) min(6vw, 60px);
}
.copyright {
  font-size: min(2.8vw, 10px);
  text-align: center;
}