@charset "UTF-8";

.page-template-template-newform h2 {
  border-top: none;
  border-bottom: none;
  margin: 0 !important;
  text-align: center;
}
h3.camp_select {
  
}
/* 重要赤色テキスト */
.redb {
  color: #e60012 !important;
  text-align:center;
  display:block;
  font-size:1.2em;
  line-height:1.6em;
  margin-bottom:2em;
}
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){
.redb {
  font-size:4vw;
}
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[data-sub="sub_all"].active span::before,
ul.event-sub li[data-sub="sub_all"]:hover span::before {
  background: url("../src/img/form/icon01_hover.png") center/contain no-repeat;
}
ul.event-sub li[data-sub="sub_chi"].active span::before,
ul.event-sub li[data-sub="sub_chi"]:hover span::before {
  background: url("../src/img/form/icon02_hover.png") center/contain no-repeat;
}
ul.event-sub li[data-sub="sub_ko"].active span::before,
ul.event-sub li[data-sub="sub_ko"]:hover span::before {
  background: url("../src/img/form/icon03_hover.png") center/contain no-repeat;
}
ul.event-sub li[data-sub="sub_pre"].active span::before,
ul.event-sub li[data-sub="sub_pre"]:hover span::before {
  background: url("../src/img/form/icon04_hover.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;
  color: #fff !important;
}
ul.event-sub li:hover,ul.event-sub li.active {
    background: #c34049;
	color: #fff !important;
}
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;
}

/********* グラビティフォームの表示調整 *********/
.id_31392 .post_content,.id_31076 .post_content,.id_5029 .post_content,.id_35256 .post_content {
  margin:0 auto !important;
  width:80% !important;
}

#gform_submit_button_41,#gform_submit_button_42,#gform_submit_button_43,#gform_submit_button_44{
  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;
}
#gform_wrapper_42 .ginput_container_address span,#gform_wrapper_43 .ginput_container_address span,#gform_wrapper_44 .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: 1199px) {
.id_31392 .post_content,.id_31076 .post_content,.id_5029 .post_content,.id_35256 .post_content {
  width:100% !important;
}
}
@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;
}

/**********************Wb広告用の個別相談フォームID44**********************/
#field_44_63{
  display:block !important;
}
#gform_wrapper_44{
  line-height:1.8em !important;
}
#gform_wrapper_41 .gfield_required_text,
#gform_wrapper_42 .gfield_required_text,
#gform_wrapper_43 .gfield_required_text,
#gform_wrapper_44 .gfield_required_text{
  font-style: normal;
  font-weight: bold;
}
.gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon {
  left: -35px !important;
}
.gform_wrapper.gravity-theme .gfield_validation_message, .gform_wrapper.gravity-theme .validation_message {
  padding: 8px 24px !important;
}

.gfield--type-phone,.yubin_num {
  display: flex;
  flex-direction: column; /* 縦方向に整列 */
}
.gfield--type-phone .ginput_container,.yubin_num .ginput_container{
  order: 2; /* input部分を2番目に */
}
.gfield--type-phone .validation_message,.yubin_num .validation_message {
  order: 3; /* エラーメッセージを3番目に */
}
.gfield--type-phone .gfield_label,.yubin_num .gfield_label {
  order: 1; /* labelは一番上 */
}

/* formID42の時間表示制御 */
.hide-morning option[value="10:00-"],
.hide-morning option[value="11:00-"] {
    display: none !important;
}




/* ============================================
   住所フィールド（ID41 / ID42 / ID43）共通レイアウト
   ============================================ */

/* コンテナを flex 化 */
#input_41_19,
#input_42_19,
#input_43_19 {
    display: flex;
    flex-wrap: wrap;
}

/* ① 郵便番号（半分幅だが独立行） */
#input_41_19_5_container,
#input_42_19_5_container,
#input_43_19_5_container {
    order: 1;
    width: 50%;
    flex-basis: 50%;
    margin-right: 100%; /* ← これで独立行になる */
}

/* ② 都道府県（左） */
#input_41_19_4_container,
#input_42_19_4_container,
#input_43_19_4_container {
    order: 2;
    width: 50%;
    flex-basis: 50%;
}

/* ③ 市区町村（右） */
#input_41_19_3_container,
#input_42_19_3_container,
#input_43_19_3_container {
    order: 3;
    width: 50%;
    flex-basis: 50%;
}

/* ④ 建物名 */
#input_41_19_2_container,
#input_42_19_2_container,
#input_43_19_2_container {
    order: 4;
    width: 100%;
}

/* ⑤ 番地 */
#input_41_19_1_container,
#input_42_19_1_container,
#input_43_19_1_container {
    order: 5;
    width: 100%;
}

/* フォーム43だけ存在する余計なスペース要素を非表示 */
#input_43_19 .ginput_address_zip_space {
    display: none !important;
}

/* ============================================
   住所フィールド：ラベルを上、入力欄を下にする
   （ID41 / ID42 / ID43 共通）
   ============================================ */

#input_41_19 span,
#input_42_19 span,
#input_43_19 span {
    display: flex;
    flex-direction: column-reverse; /* ★ これで順番が逆転する */
}

/* ラベルの余白調整（任意） */
#input_41_19 label,
#input_42_19 label,
#input_43_19 label {
    margin-bottom: 4px;
}