@charset 'UTF-8';

/*********************************
 * カラー設定
 *********************************/
:root {
  --main_green: #78dd36; /*鹿島田A*/
  --main_pink: #ef2184; /*鹿島田B*/
  --main_yellow: #fcf024; /*平間A*/
  --main_blue: #48b2f6; /*平間B*/
  --main_gray: #a5a5a5; /*共通グレー*/

  --color_kashimadaA: var(--main_green);
  --color_kashimadaB: var(--main_pink);
  --color_hiramaA: var(--main_yellow);
  --color_hiramaB: var(--main_blue);

  --contents_max_width: 980px;
  --form_max_width: 640px;
  --parts_max_width: 600px;
}

/*********************************
 * 共通スタイル
 *********************************/
.sp_hidden {
  display: block;
}
.pc_hidden {
  display: none;
  @media (orientation: portrait) {
    display: block;
  }
}
.required {
  color: red;
}
/* 縦向き（ポートレート） */
@media (orientation: portrait) {
  .sp_hidden {
    display: none;
  }
}
/* 横向き（ランドスケープ） */
@media (orientation: landscape) {
}

/*********************************
 * フォームパーツ基本スタイル
 ***************************/
.stageEntryForm.contactForm,
.mediaForm.contactForm {
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    margin: 0;
    max-width: var(--form_max_width);
    width: 100%;
    height: 48px;
  }
  input[type="radio"],
  input[type="checkbox"] {
    margin: 0;
    margin-right: 10px;
    transform-origin: center left;
    scale: 1.3;
  }
  textarea {
    height: 100px;
  }
  input[type="submit"] {
    margin: 0 auto;
    padding: 10px 40px;
    background-color: var(--main_blue);
    border-radius: 4px;
    height: 3em;
    width: fit-content;
    color: white;
    letter-spacing: 3px;
    cursor: pointer;
  }
  input[type="submit"]:disabled {
    cursor: not-allowed;
  }
}
.wpcf7-radio {
  display: flex;
  gap: 20px;
}

/*********************************
* フォーム共通スタイル
*********************************/
.contactForm {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0 auto;
  padding: 0 min(2.5vw, 20px);
  width: min(95vw, var(--form_max_width));
  .required {
    margin-left: 1em;
  }
  .section_title {
    font-weight: bold;
  }
  .conditional_group,
  .formElement_wrap,
  .form_section {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .conditional_group {
    gap: 30px;
  }
  .formElement_wrap {
    gap: 6px;

    &.formElement_flex {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }
    &.formElement_flex.policyLink {
      margin: 0;
      gap: 0;
    }
  } /*fromElement_wrap //*/
  .formElement_label {
    display: block;
    font-weight: bold;
  }
  .formElement_input:has(input[type="radio"]),
  .formElement_input:has(input[type="checkbox"]) {
    border: 1px solid var(--main_gray);
    padding: 6px 16px;
  }

  .formElement_input.input_num {
    width: 3.5em;
    input {
      text-align: right;
    }
  }
  .formElement_input.num_3digit {
    width: 7em;
    input {
      text-align: right;
    }
  }
  .formElement_annotation {
    display: block;
  }

  .agreement_wrap {
    input {
      scale: 1.25;
    }
  }
  .conditional_group {
    transition: all 0.3s ease;
  }
}
/***************
* バリデーション
*/
/*ContactForm7のバージョンを非表示*/
.screen-reader-response,
.contactForm .wpcf7-not-valid-tip {
  display: none;
}

/*********************************
* 発表会出演意思確認フォーム
*********************************/
.stageEntryForm {
  #perform-count {
    width: 3.5em;
    input {
      padding: 0;
      text-align: right;
    }
  }
  .formElement_input.num_span {
    padding: 0 16px;
    background-color: oklch(from var(--main_blue) l c h / 0.06);
    border: 1px solid;
    height: 48px;
    line-height: 48px;
    font-weight: bold;
    color: var(--main_blue);
    input {
      text-align: center;
    }
  }
  .lessons_section {
    display: flex;
    flex-direction: column;
    gap: 42px;

    .lesson_set {
      position: relative;
      padding: 16px;
      padding-top: 32px;
      padding-left: 24px;
      border: 0.75px solid var(--main_green);
      max-width: var(--form_max_width);
      width: min(90vw, var(--parts_max_width));
      @media (orientation: portrait) {
        padding-left: 16px;
      }
      .lesson_items {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 20px;
      }
      .lesson_number {
        position: absolute;
        top: -5px;
        left: 12px;
        display: inline-block;
        margin-top: -16px;
        margin-bottom: 5px;
        margin-left: 5px;
        padding: 4px 12px;
        background-color: #fff;
        border: 1px solid var(--main_green);
        font-weight: bold;
      }
      .formElement_wrap {
        display: inline-block;
        margin-bottom: 0;
        &:not(:last-child) {
          width: 144px;
          /* margin-right: 20px; */
        }
        @media (orientation: portrait) {
          width: 100%;
          &:not(:last-child) {
            /* margin-right: 0; */
            width: 100%;
          }
        }
      }
    }
    #show_inputed_lessons {
      border: 1px solid var(--main_green);
      background-color: oklch(from var(--main_green) l c h / 0.04);
      color: var(--main_green);
    }
    .formElement_input {
    }
    select {
      width: 100%;
    }
    select.instructor {
      width: 100%;
    }
  }

  .fee_section {
    max-width: var(--parts_max_width);
    .fee_label,
    .fee_amount,
    .formElement_input {
      display: inline-block;
      width: fit-content;
    }
    .fee_items {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: repeat(2, 48px);
      grid-row-gap: 12px;
      justify-items: end;
      @media (orientation: portrait) {
        grid-template-columns: 1fr;
      }
    }
    .fee_items > span {
      font-weight: bold;
      height: 48px;
      line-height: 48px;
    }
    .entry_fee_amount {
      padding-right: 16px;
    }
    #number-fee {
      color: #333;
    }
    .fee_label {
      font-weight: bold;
    }
    #number-fee {
      display: inline-block;
      width: 7em;
    }
    .total_wrap {
      text-align: right;
      font-size: 20px;
      justify-content: flex-end;
    }
    .fee_border {
      margin: 0;
    }
    #total-fee {
      display: inline-block;
      background-color: oklch(from var(--main_pink) l c h / 0.06);
      border-color: var(--main_pink);
      width: 7em;
      font-size: 24px;
      font-weight: bold;
      color: var(--main_pink);
    }
  }
}

/*********************************
* 発表会出演意思サンクスページ
*********************************/
.stage_entry_thanks {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: var(--contents_max_width);
  margin: 0 auto;
  padding: 0 min(2.5vw, 20px);
  p {
    margin: 0;
  }
  .account {
    margin: 15px auto;
    width: min(95vw, var(--parts_max_width));
    dt,
    dd {
      margin: 0;
      padding: 10px;
      border: 1px solid var(--main_pink);
      line-height: 26px;
    }
    dt {
      border-bottom: none;
      font-weight: bold;
    }
  }
}

/*********************************
* Blu-ray・DVD購入意思表示フォーム
*********************************/
.dvdForm {
  .formElement_wrap {
  }
  .formelement_label {
  }
}