@charset "UTF-8";

.page-template-template-newform h2 {
  border-top: none;
  border-bottom: none;
  margin: 0 !important;
  text-align: center;
}
h3.camp_select {
  
}
ul.event-ca,ul.event-sub {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  align-items: start;
}
ul.event-ca {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
ul.event-ca::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* solid を指定 */
  position: absolute;
  bottom: -1.5em;
  left: 50%;
  transform: translateX(-50%) scaleX(2); /* 横幅2倍 */
  font-size: 3em;
  color: #d53020;
  display: none;
}
ul.event-ca.show-arrow::after {
  display: block;
}
ul.event-ca li,ul.event-sub li {
  aspect-ratio: 1.5 / 1;
  text-align: center;
  cursor: pointer;
  border: none;
  color: #fff;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0 0 1.5em 0;
  height: 5em;
  width: 100%;
}
ul.event-ca li {
  flex: 0 0 calc(50% - 10px); /* デフォルト：2列 */
  text-align: center;
  cursor: pointer;
  border: none;
  color: #fff;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0 0 1.5em 0;
  height: 5em;
}
/* 2行目と3行目の3つずつ */
ul.event-ca li:nth-child(n+3) {
  flex: 0 0 calc(33.333% - 10px);
}
@media screen and (max-width: 767px){
ul.event-ca li {
  margin: 0;
}
ul.event-ca li span.li-inner i {
  font-size: 1.3em;
}
ul.event-ca li:nth-child(n+3) {
  flex: 0 0 calc(50% - 10px);
}
  ul.event-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  ul.event-sub li {
    flex: 0 0 calc(50% - 10px); /* 2列にする */
    height: auto; /* 必要なら固定高さ解除 */
  }
}

/* 下の 「すべて、中学生、高校生、プレID生*/
ul.event-sub {
  margin-top: 1em;
}
ul.event-sub li {
  background: #F5F5F5;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border:solid 1px #414141;
  color:#414141;
}
ul.event-sub li span {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

ul.event-sub li span::before {
  content: "";
  display: inline-block;
  width: 1.8em;         /* アイコンの横幅 */
  height: 100%;           /* spanの高さに合わせる */
  margin-right: 0.5em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 個別アイコン指定 */
ul.event-sub li[data-sub="sub_all"] span::before {
  background: url("../src/img/form/icon01.png") center/contain no-repeat;
}
ul.event-sub li[data-sub="sub_chi"] span::before {
  background: url("../src/img/form/icon02.png") center/contain no-repeat;
}
ul.event-sub li[data-sub="sub_ko"] span::before {
  background: url("../src/img/form/icon03.png") center/contain no-repeat;
}
ul.event-sub li[data-sub="sub_pre"] span::before {
  background: url("../src/img/form/icon04.png") center/contain no-repeat;
  width: 2.5em;
}
ul.event-sub li.active {
  background: #c34049;
}
ul.event-ca li div.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-origin: center;
  transform: scaleY(1);
}
ul.event-ca li::before,ul.event-sub li::before {
  display:none;
}
ul.event-ca li.active {
  border: 4px solid #e60012;
  box-sizing: border-box;
  opacity: 0.7;
}
ul.event-ca li {
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: solid 1px #ccc;
  box-sizing: border-box;
}
ul.event-ca li span.li-inner {
  position: absolute;
  top: 8%;
  left: 0%;
  font-size: 0.6em;
  line-height: 1.4;
  pointer-events: none;
  width: 40%;
  text-align: left;
  color: #000;
  padding: 0.5em;
  background: #fff;
  z-index: 2; /* bg の上に表示 */

  /* 右下を折り曲げた形 */
  clip-path: polygon(
    0 0,
    100% 0,
    100% 85%,
    85% 100%,
    0 100%
  );

  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
ul.event-ca li span.li-inner i {
  font-style: normal;
  font-size: 2em;
  display: block;
  line-height: 1;
}
.event-sub-text{
  display: block;
  margin: 2em 0;
}
.db_inline{
  display: inline-block !important;
}
span.li-inner i.small_t {
  font-size: 1em !important;
  display: inline-block !important;
}
span.li-inner i.small_f {
  _font-size: 1.2em !important;
}
ul.event-ca li:hover,ul.event-sub li:hover {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
ul.event-sub li:hover {
    background: #c34049;
}
ul.event-ca li.active:hover {
  opacity: 1;
  transition: opacity 0.3s ease;
}

ul.event-ca li:nth-child(1) div.bg {
  background: url( "../src/img/form/all.jpg" ) top center / 100% auto no-repeat;
}
ul.event-ca li:nth-child(2) div.bg {
  background: url( "../src/img/form/online.jpg" ) top center / 100% auto no-repeat;
}
ul.event-ca li:nth-child(3) div.bg {
  background: url( "../src/img/form/suidobashi.jpg" ) top center / 100% auto no-repeat;
}
ul.event-ca li:nth-child(4) div.bg {
  background: url( "../src/img/form/akihabara.jpg" ) top center / 100% auto no-repeat;
}
ul.event-ca li:nth-child(5) div.bg {
  background: url( "../src/img/form/ikebukuro.jpg" ) top center / 100% auto no-repeat;
}
ul.event-ca li:nth-child(6) div.bg {
  background: url( "../src/img/form/tachikawa.jpg" ) top center / 100% auto no-repeat;
}
ul.event-ca li:nth-child(7) div.bg {
  background: url( "../src/img/form/omiya.jpg" ) top center / 100% auto no-repeat;
}
ul.event-ca li:nth-child(8) div.bg {
  background: url( "../src/img/form/yokohama.jpg" ) top center / 100% auto no-repeat;
}

/* 矢印ボックス */
ul.event-ca li .arrow-box {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  display: flex;
  padding: 0.3em 0.3em 0.2em 0.7em;
  z-index: 3;
  clip-path: polygon( 15% 0, 100% 0, 100% 100%, 0 100%, );
}
ul.event-ca li .arrow {
  font-size: 0.8em;
  color: #000;
  display: inline-block;
  transform: rotate(-90deg); /* 右に90度回転 */
  line-height: 1;
  letter-spacing: -0.1em;
}

#event-results {
  display: block;
  overflow:hidden;
  width:100%;
}
#event-results .event-results-link {
  display: block;
  overflow: hidden;
  width: 90%;
  margin: 0 auto 3em auto !important;
  background: #fafafa;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color:#333;
}
.event-results-link .event_item {
  display: flex !important;
  padding: 1em;
}
.event_item .samimg {
  width: 27%;
  margin-right: 3%;
  object-fit: cover;
}
.event_item .event_listin {
  width:70%;
}
.event_item .event_listin p:first-child {
  margin-bottom:0.5em;
}
.event_listin span {
  padding: 0.2em 1em;
  font-size: 0.8em;
  border-radius: 15px;
  color: #fff;
  margin-right: 0.5em;
}
.event_listin span.ev_set,
.event_listin span.ev_ko,
.event_listin span.ev_oc,
.event_listin span.ev_pre{ 
  background: #777;
}
span.camp_on{ background: rgb(239, 68, 68); }
span.camp_sui{ background: #62B9D3; }
span.camp_aki{ background: #ffd700; color: #555 !important; }
span.camp_ike{ background: #EE7800; }
span.camp_ta{ background: #7065A3; }
span.camp_omi{ background: #b4c400; }
span.camp_yo{ background: #4B65F1; }
.event_listin b {
  font-size: 1.2em;
  display: block;
  margin: 0.7em 0 0.5em 0;
}
.event_listin .he_ka{
  color:#c02b0a;
}
/********* グラビティフォームのテンプレート側設定 *********/
.event-info {
  display: block;
  overflow: hidden;
  width: 90%;
  margin: 2em auto !important;
  background: #fafafa;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: #333;
  padding: 1.5em 2em;
  line-height: 1.8em;
  font-size: 1.2em;
}
.ev_free {
  display:block;
  overflow:hidden;
  all: revert;
  margin-top: 1.5em;
}
.ev_free h1,
.ev_free h2,
.ev_free h3,
.ev_free p,
.ev_free b,
.ev_free span,
.ev_free div,
.ev_free strong,
.ev_free em {
  all: revert;
}

/********* グラビティフォームの表示調整 *********/
#gform_submit_button_41,#gform_submit_button_42,#gform_submit_button_43{
  text-align: center;
  margin-top: 1em !important;
  background: #e60012;
  border-radius: 5px;
  color: #fff;
  padding: 0.8em 2.5em;
  font-weight: bold;
}
.gform-page-footer #gform_previous_button_41, .gform-page-footer #gform_previous_button_42{
  background: #fff;
  color: #555;
}
#gf_progressbar_wrapper_41,#gf_progressbar_wrapper_42{
  margin:2em auto;
}
#gform_wrapper_41 h2.gform_title,#gform_wrapper_42 h2.gform_title{
  display:none;
}
h2.gform_submission_error{
  background: transparent;
  border-bottom: none;
}
/* ID42の住所フィールドだけに適用 */
#gform_wrapper_42 .ginput_container_address span,#gform_wrapper_43 .ginput_container_address span {
  display: flex;
  flex-direction: column-reverse; /* input と label を上下逆にする */
}
/*ZOOM開催の有無の表示制御*/
.gf_hidden {
  display: none !important;
}
/******************* 電話番号・郵便番号フィールドの順番を変更 *******************/
.gfield--type-phone,
.gfield--type-text {
  display: flex;
  flex-direction: column;
}
/* ラベル（見出し）は先頭 */
.gfield_label {
  order: 1;
  margin-bottom: 0 !important;
}
/* 注意書きを2番目に */
.gfield_description {
  order: 2;
  font-size: 0.85em;
  color: #666;
  margin-bottom: 0.5em;
  padding-top: 0 !important;
  padding-bottom: 0.5em;
}
/* 入力フォームを3番目に */
.ginput_container {
  order: 3;
}
/******************* thanks-message がある場合の並び替え *******************/
.post_content:has(.thanks-message) {
  display: flex;
  flex-direction: column;
}
.post_content .thanks-message p   { margin-bottom: 1em !important; }
.post_content:has(.thanks-message) .event-free-content {
  display: none; /* 非表示 */
}

.post_content:has(.thanks-message) .thanks-message {
  order: 1;
}

.post_content:has(.thanks-message) .event-info {
  order: 2;
}


@media screen and (max-width: 767px){
.event-results-link .event_item {
  display: block !important;
}
.event_item .samimg {
  width: 70%;
  margin: 0 auto 1em auto;
}
.event_item .event_listin {
  width: 100%;
}
.event-info {
  padding: 1em 1.5em;
  font-size: 1.1em;
}
}
/* 募集終了したイベント */
a.event-end {
  pointer-events: none;
  cursor: default;
  position: relative;
  overflow: hidden;
}

a.event-end::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55); /* 半透明の黒 */
  z-index: 1;
}

a.event-end::after {
  content: "募集終了しました";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 3em;
  letter-spacing: 0.2em;
  font-weight: bold;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
@media screen and (max-width: 769px){
a.event-end::after {
  font-size: 8vw;
  letter-spacing: 0.1em;
}
}

#input_41_19_5_label:after,#input_42_19_5_label:after{
  content:"（半角英数字で入力）";
}
#field_42_56,#field_42_57,#field_42_58,#field_42_59,#field_42_62,
#field_41_54,#field_41_55,#field_41_56,#field_41_57,#field_41_58,
#field_43_54,#field_43_55,#field_43_56,#field_43_57,#field_43_58{
  display:none;
}