/* reset.css */
@charset "utf-8";
html,body,address,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,div,p,pre,blockquote,hr,bdo,span,a,small,b,i,em,strong,br,del,ins,abbr,dfn,sub,sup,q,cite,code,var,kbd,samp,map,area,iframe,img,table,tr,th,td,caption,thead,tfoot,tbody,colgroup,col,form,label,fieldset,legend,input,textarea,select,option,optgroup,button,command,details,menu,summary,article,aside,header,footer,nav,section,figcaption,figure,main,mark,rp,rt,ruby,time,wbr,audio,canvas,embed,object,param,source,video,datalist,keygen,meter,output,progress { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; box-sizing: border-box; }
html { overflow-y: scroll;/*Firefox用縦スクロールバー*/ }
html,body { height: 100%; }
body { line-height: 1.6; font-family: Noto Sans JP,メイリオ,Meiryo,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Verdana,"游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
p {margin-bottom: 1em;}
ul,ol,dl { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a,a:link,a:visited { color: #fff; text-decoration: none; }
a:hover,a:active { color: #ccc; }
a:focus { outline: none; }
article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,section,summary { display: block; }
/* reset.css */
.sp-f07 {font-size: .7em;}
.f08, .sp-f08 {font-size: .8em;}
.f09 {font-size: .9em;}
.f11 {font-size: 1.1em;}
.f12 {font-size: 1.2em;}
.f13 {font-size: 1.3em;}
.f15 {font-size: 1.5em;}
.mt1r {margin-top: 1rem;}
.mt2r {margin-top: 2rem;}
.mb1 {margin-bottom: 1em !important;}
.mb2 {margin-bottom: 2em !important;}
.mb3 {margin-bottom: 3em !important;}
.mb5 {margin-bottom: 5em !important;}
.mb10 {margin-bottom: 10em !important;}
.b,b { font-weight: 600;}
.bb {border-bottom: 1px solid;}
.ctr {text-align: center;}
.w100 {width: 100%;}
/* 0 to 414px */
html,
#wrapper {
  overflow-x: hidden;
  background-color: #000;
  color: #fff;
  display: flex;
    flex-flow: column;
    min-height: 100vh;
}
header {
  background: #000;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4000;
  /* padding: 20px 10px; */
}
header h1 img {
  width: 200px;
}
header section { 
  padding: 0;
  margin: 0;
}
header .sp-head {padding: 15px 10px;}
.box-ctr {
  margin: 0 auto;
  display: table;
}



/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  top: 0;
  width:100%;
  height: 100vh;
}

/*丸の拡大*/
.circle-bg{
  position: fixed;
  z-index:3;
  /*丸の形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #1c1c1c;
  /*丸のスタート位置と形状*/
transform: scale(0);/*scaleをはじめは0に*/
right:-50px;
  top:-50px;
  transition: all .9s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
  display: none;/*はじめは表示なし*/
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
   display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
opacity: 0;/*はじめは透過0*/
  /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
  opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
text-align: center; 
list-style: none;
}

#g-nav li a, #g-nav li label{
/* color: #333; */
text-decoration: none;
padding:10px;
display: block;
/* text-transform: uppercase; */
letter-spacing: 0.1em;
font-weight: bold;
}


/*========= ボタンのためのCSS ===============*/
.openbtn1{
position:fixed;
top:7px;
right: 10px;
z-index: 9999;/*ボタンを最前面に*/
cursor: pointer;
  width: 50px;
  height:50px;
}

/*×に変化*/  
.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 1px;
  border-radius: 2px;
background-color: #fff;
  width: 60%;
}

.openbtn1 span:nth-of-type(1) {
top:15px; 
}

.openbtn1 span:nth-of-type(2) {
top:25px;
}

.openbtn1 span:nth-of-type(3) {
top:34px;
}

.openbtn1.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 60%;
}

.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 60%;
}
/* /nav-menu */

.container {
  overflow: hidden;
  text-align: center;
  /* background: #eee; */
}
.eyecatch {
  align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}
.eyecatch #logo{
  -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    max-width: 70%;
    position: relative;
    top: -50px;
    width: 330px;
    z-index: 1;
}
#logo img {width: 100%;}
.recruit {
    margin: 2em 0 1em;
}
.recruit img {
	max-width: 500px;
	width: 90%;
}
.sns {
  /* align-items: baseline; */
  text-align: center;
  bottom: 0;
  box-sizing: border-box;
  line-height: 1.5em;
  margin: 0 auto;
  padding: 20px 0px 30px;
  position: absolute;
  width: 100%;
  z-index: 1;
  background: #f2f2f2;
  color: #000;
}
.sns span img {
  max-width: 55px;
  margin: 10px 5% 0;
}
.eyecatch .eyecatch-sidetexts {font-size: .8em;}
.eyecatch .eyecatch-sidetexts .sidetext-left {
  left: 0;
    letter-spacing: .2em;
    position: absolute;
    top: 40%;
    transform: translate(13px,4.79em) rotate(270deg);
    transform-origin: left;
}
.eyecatch .eyecatch-sidetexts .sidetext-right {
  letter-spacing: .2em;
  position: absolute;
  right: 0;
  top: 40%;
  transform: translate(-13px,4.79em) rotate(90deg);
  transform-origin: right;
}

/*** ぼよよん1 未使用***/
img.boing {
  animation: 2.2s boing-anim infinite;
}

@keyframes boing-anim{
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  /* 15%  { transform: scale(0.9, 0.9) translate(0%, 5%); } */
  30%  { transform: scale(1.2, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.2) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/*** LOGOアニメーション **/
.poyoon {
  animation: poyoon 1.2s ease-out 1;
  /* animation: poyoon 2.4s ease-out infinite; */

}
@keyframes poyoon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  25%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  30%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  35%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  45%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  55%  { transform: scale(0.9, 1.2) translate(0%, -50%); }
  70%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
  80%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  90% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

span.title {
  border-bottom: 1px white solid;
  font-size: 1.2em;
}
span.title.white {  border-bottom: 1px #000 solid;}

span.title + div {margin-top: 1.5em;}
.container h2:after {
  /* background: #b8ceea; */
  /* content: "0〜414px";
  padding: 3px; */
}
.container main h3 ~ i:after {
  content: "width 100vw";
}
.container aside h3 ~ i:after {
  content: "width 100vw";
}
.container .inner {
  text-align: left;
}
.container .inner main {
  /* background: #ccc; */
  width: 100vw;
  min-height: 300px;
  margin: 0;
  /* padding: 10px; */
}
.container .inner aside {
  /* background: #ddd; */
  width: 100vw;
  min-height: 300px;
  margin: 0;
  padding: 10px;
}

.section  {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    margin: 0 auto;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}
section {
  margin: 0;
  padding-left: 3%;
  padding-right: 3%;
  width: auto;
  padding-top: 80px; /* 調整したい高さ（固定ヘッダーの高さ） */
  margin-top: -80px; /* heightと同じ分のネガティブマージン */
}
#event {text-align: center;}
#event img,.pic img {
  width: 100%;
  /* max-width: 500px; */
}
section.pics01{
    margin: 0;
    padding: 0.5em 0 3em;
    width: auto;
}
section.pics02{
  margin: 0;
  padding: 3em 3% 3em 2%;
  width: auto;
}
/* .pics01 .pic {
    box-shadow: -6px 6px #313337;
    height: 100%;
    position: relative;
    width: 100%;
} */
.pics01 .pic {
  background: url(../../img/p02.jpg);
  /* height: 200px; */
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  box-shadow: none;
  height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    /* padding-top: 66.6666666667%; */
    padding-top: 50%;
    background-repeat: no-repeat;
    background-position: center 20%;
    background-size: cover;
}
.pics02 .pic img {
  box-shadow: 8px 8px #313337;
  /* height: 100%;
  position: relative;
  width: 100%; */
}

section .catch {
  font-size: 1.2em;
    letter-spacing: .2em;
    line-height: 2em;
    padding-bottom: 1.1em;
}
.concept .disc {
    letter-spacing: .1em;
    line-height: 2.2em;
    /* padding: 2em 0; */
    padding: 0;
}
.concept .disc p {
  margin-bottom: 1.5rem;
}
.section.section-access {
  background-color: #1c1c1c;
  flex-direction: column;
  justify-content: center;
}
.section .section-item-title {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  padding: 0 49px;
  position: relative;
  transform-origin: center top;
  /* width: 50%; */
}
.section.section-access .section-item {
  display: block;
}
.section .reverse:not(.section-access) .section-item-title {
  left: 0;
  right: inherit;
  padding: 0;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
    transform: none;
}
.section .reverse .section-item-content {
  width: auto;
}
.section-body {
  margin: 0 auto;
  max-width: 1120px;
  width: 100%;
}
.section .section-item {
  display: flex;
  position: relative;
}
.section+.section {
  
}
.section .section-item-content.access-map-wrapper, .section .section-item-content.access-map-wrapper .access-map {
  width: 100%;
}
.access-map {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
  transition: all 1s ease;
  width: 100%;
  margin-top: 30px;
}
.access-map embed, .access-map iframe, .access-map object {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
footer {
  text-align: center;
  padding: 20px 10px;
  background: #1c1c1c;
  font-size: .8rem;
  letter-spacing: .05em;
}
.foot-menu {padding: 1.5em 0;}
.foot-menu span {margin: 0 5px;}

/* ポップアップ */
#popup {
  display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.popup-overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}

#popup:checked ~ .popup-overlay {
  display: block;
  z-index: 99999;
  /* background-color: #00000070; */
  /* position: fixed; */
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.popup-window {
  width: 90vw;
  max-width: 560px;
  padding: 20px;
  /* background-color: #888; */
  color: #000;
  background-color: #fff;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-text {
  margin: 0;
}

.popup-text:not(:last-of-type) {
  margin-bottom: 1em
}

.popup-close {
  cursor: pointer;
  position: absolute;
  /* top: -26px; */
  top: 5px;
  right: 0;
}

/******* スイッチボックス ********/
/*ボックス全体*/
.switchbox {
  margin: 10px 0;
  padding: 0;
}
/*ラベル*/
.switchbox label {
  display: block;
  font-weight: bold;
  cursor :pointer;
  border: 2px solid;
    padding: 1em 0;
    text-align: center;
    margin-bottom: 1em;
    border-radius: 5px;
    /* background: #fff;
    color: #000; */
    box-shadow: inset 0 0 0.8em rgba(255,255,255,0.3), 0 0 0.8em rgba(255,255,255,0.3);
    border: #fff solid 2px;
}
/*チェックボックスを非表示にする*/
.switchbox input {
  display: none; 
}
/*中身を非表示にしておく*/
.switchbox div.box {
  height: 0;
  overflow-y: hidden;
  transition: 0.8s;/*ゆっくり表示させる*/
  opacity: 0;
}
/*クリックで中身を表示*/
.switchbox input:checked + label + div.box {
  height: auto;
  opacity: 1;
}

/*アイコン
.switchbox label::before {
  content: 'f067';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  padding-right: 8px;
}
/*クリックでアイコン入れ替え
.switchbox input:checked + label::before {
  content: 'f068';
}
*/


.party div {
  background: #ddd;
  padding: 0.5em 0.5em 0;
  color: #000;
}
.nomiho {
	background: #b5d7e0;
    color: #000;
    padding: 0.5em 0.5em 0;
}
span#click {margin-left: .5rem;}

#party #click::after {
  content: "";
  background-image: url("../../img/icon-click.svg");
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
}
.party .title {
  border-bottom: 2px #000 solid;
    font-size: 1.25em;
    display: block;
}
.s-cap {
  line-height: 1.3;
    display: block;
    padding: 0.5em 0;
}

#party { margin-bottom: 2rem;}

.link {
	padding: 1rem 0;
    background: #fff;
    color: #000;
    font-size: 1.2em;
    border-radius: 5px;
	width: 500px;
	max-width: 100%;
    margin: 0 auto 3rem;
	display: flex;
    align-items: center;
    justify-content: center;
}

/************* 揺れるボタンアニメ ******************/
.yure {
  animation: yure 2s infinite;
}
@keyframes yure {
  0% {
      transform: translate(0px, 2px);
  }
  5% {
      transform: translate(0px, -2px);
  }
  10% {
      transform: translate(0px, 2px);
  }
  15% {
      transform: translate(0px, -2px);
  }
  20% {
      transform: translate(0px, 2px);
  }
  25% {
      transform: translate(0px, -2px);
  }
  30% {
      transform: translate(0px, 0px);
  }
}
.switchbox input:checked + label.yure {animation: none;}
/************* 光るボタンアニメ ******************/
.button {
  display: inline-block;
  color: #000;
  font-size: 14px;
  text-decoration: none;
  background: #fff;
  text-align: center;
}
.button.glow {
  position: relative;
  -webkit-animation: glow-reverse 2s ease-in-out infinite alternate;
          animation: glow-reverse 2s ease-in-out infinite alternate;
}
.button.glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: inherit;
  -webkit-box-shadow: 0 0 2em #fff, 0 0 0.5em rgba(255, 255, 255, 0.5) inset;
          box-shadow: 0 0 2em #fff, 0 0 0.5em rgba(255, 255, 255, 0.5) inset;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
          animation: glow 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes glow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes glow-reverse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes glow-reverse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* 0 to 414px */
/*------------------------------------------------------------------*/
@media (min-width: 415px) {
.container h2:after {
  /* background: #e5c5da;
  content: "415px〜959px"; */
}
.container main h3 ~ i:after {
  /* content: "width 90vw"; */
}
.container aside h3 ~ i:after {
  /* content: "width 90vw"; */
}
.container .inner main {
  width: 90vw;
  margin: 0 auto;
}
.container .inner aside {
  width: 90vw;
  margin: 0 auto;
}
.section {
  align-items: center;
    box-sizing: border-box;
    display: flex;
    margin: 0 auto;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}
}
@media (min-width: 768px) {
  header .sp-head {padding: 15px 20px 0;}
  .sp-f07 {font-size: 1em;}
  .pc-ctr {text-align: center;}
  .pc50 {
    display: flex;
    position: relative;
    margin: 7em auto 3em;
    /* max-width: 1120px; */
    width: 100%;
  }
  .pc50 section {
    width: 62%;
    transform-origin: top;
    height: 100%;
    padding: 0 1em;
    margin: 0;
    padding-top: 80px;
    margin-top: -80px;
  }
  .pc50 section.pics02 { width: 38%;}
  .party.pc50 {
    margin-top: 2em;
    justify-content: space-evenly;
    gap: 5px;
  }
  section .catch {
	font-size: 1.5em;
  }
  span#click {margin-left: 2.5rem;}
  #event {
    text-align: center;
    /* max-width: 500px; */
    /* margin: -80px auto 0; */
  }
  #event .pc50 {
    padding-top: 2em;
  }
  #event .pc50 section {
    width: 50%;
  }
  .event-pop {
    margin: 0px auto 0;
    max-width: 500px;
  }
  .section-access .section-body {
    display: flex;
    position: relative;
  }
  .section-access .section-item {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    padding: 0 0 0 10%;
    position: relative;
    transform-origin: center top;
    width: 50%;
  }
  .section .section-item-content.access-map-wrapper {
    transform-origin: right top;
    width: 50%;
    order: 2;
    height: auto!important;
    padding: 0 10% 0 0;
  }
  .access-map {
    padding-bottom: 40%;
  }
}
@media (min-width: 960px) {
  #g-nav-list {
    display: block;
    height: auto;
  }
  #g-nav ul {
    display: flex;
    opacity: 1;
    position: inherit;
    z-index: 999;
    /* top: 15px; */
    top: 5px;
    left: auto;
    right: 20px;
    transform: none;
  }
  .openbtn1 {display: none;}
  section.pics01 {
    padding: 0;
    margin-bottom: 10em;
    margin-top: 1px;
  }
  .pics01 .pic {
    /* height: 480px; */
    margin: 0 calc(50% - 50vw);
    padding-top: 60%;
  }
  .pics01 .pic img { display: none;}
  .pics02 .pic {width: 125%;
    margin-left: -25%;}
.container h2:after {
  /* background: #b3d3c4;
  content: "960px〜1199px"; */
}
.container main h3 ~ i:after {
  /* content: "max-width 804 min-width 544px"; */
}
.container aside h3 ~ i:after {
  /* content: "width 356px"; */
}
.container .inner {
  display: flex;
  justify-content: center;
}
.container .inner main {
  /*width: 604px;*/
  width: 850px;
  min-width: 544px;
  order: 1;
  margin: 0;
}
.container .inner aside {
  width: 356px;
  min-width: 356px;
  /*flex: 0 0 356px;*/
  order: 2;
  margin: 0;
}

/*960px〜1199px*/}

@media (min-width: 1200px) {
  .pics01 .pic {
    padding-top: 75%;
  }
  /* ↓ 大画面だけ背景固定画像 */
  #event {margin-bottom: 5em;}
  section.pics01 {margin-bottom: 12em;}
  .pics01 .pic {display: none;}
  .bg-pic {
    background: url(../../img/p02.jpg);
    background-size: cover;
    background-attachment: fixed;
  }
}