@charset "utf-8";

@media screen and (max-width: 1024px) {
  @media screen and (max-width: 700px) {
    html {
     font-size: 62%;
    }
  }
  /* ----------------------------------------------- sp */
  @media screen and (max-width: 700px) {
    .sp {
      display: block;
    }
  }
  /* ----------------------------------------------- wrapper */
  #wrapper {
    margin: 60px auto;
  }
  @media screen and (max-width: 700px) {
    #wrapper {
      width: 94%;
      margin: 30px auto;
    }
  }
  /* ----------------------------------------------- header */
  #header h1 {
    text-align:  center;
  }
  #header h1 img {
    width: 80%;
    max-width: 329px;
    height: auto;
  }
  /* ----------------------------------------------- main */
  main {
    margin-top: 30px;
    padding: 40px;
  }
  @media screen and (max-width: 700px) {
    main {
      margin-top: 30px;
      padding: 25px;
    }
  }
  /* h要素 */
  main h1 {}
  main h2 {}
  main h3 {}
  main h4 {}
  main h4.ptn1 {}
  /* ul/ol */
  main ul {}
  main ul li {}
  main ul li::before {}
  main ul.small {}
  main ul.small li {}
  /* link */
  main a:link,main a:active,main a:visited {}
  /* hr */
  main hr {}
  main hr::before {}
  /* 必須マーク */
  .req {}
  /* 例 */
  .exa {}
  /* 重要 */
  .imp {}
  /* inner */
  div.inner {}
  /*2分割*/
  div.flex2 {}
  div.flex2 p {}
  /*3分割*/
  div.flex3 {}
  div.flex3 p {
    width : 45%;
  }
  /*4分割*/
  div.flex4 {}
  div.flex4 p {
    width : 45%;
  }
  @media screen and (max-width: 700px) {
    /*3分割*/
    div.flex3 {
      display: -webkit-block;
      display: block;
    }
    div.flex3 p {
      padding: 0 0 10px 0;
      width : 100%;
    }
    /*4分割*/
    div.flex4 {
      display: -webkit-block;
      display: block;
    }
    div.flex4 p {
      padding: 0 0 10px 0;
      width : 100%;
    }
  }
  /*背景白*/
  .white_base {}
  .white_base hr {}
  .white_base hr::before {}
  /**/
  .privacypolicy {}
  /*250917追加 message*/
  .message {}
  /* ----------------------------------------------- 来校日カレンダー */
  #calendar_block {}
  .calendar {
    font-size: 90%;
  }
  .calendar .toolbar {}
  .calendar .toolbar h3 {}
  .toolbar_btn {}
  .toolbar_btn button {}
  .toolbar_btn .period {}
  .toolbar_btn .period button {}
  .toolbar_btn .month {}
  .toolbar_btn .month button {}
  .toolbar_btn .month .prev,
  .toolbar_btn .month .next {}
  .toolbar_btn .month .prev::after,
  .toolbar_btn .month .next::after {}
  .toolbar_btn .month .prev {}
  .toolbar_btn .month .prev::after {}
  .toolbar_btn .month .next {}
  .toolbar_btn .month .next::after {}
  .toolbar_btn .month button span {}
  /* calendar_tb */
  .calendar_tb {}
  .calendar_tb table {}
  .calendar_tb table thead {}
  .calendar_tb table tbody {}
  .calendar_tb table tr {}
  .calendar_tb table th,
  .calendar_tb table td {}
  .calendar_tb table th {}
  .calendar_tb table td {}
  .calendar_tb table .not {}
  .calendar_tb table .day {}
  .calendar_tb table .prev_month .day,
  .calendar_tb table .next_month .day {}
  .calendar_tb table .select_area {}
  .calendar_tb table .select_area .select_time1,
  .calendar_tb table .select_area .select_time2,
  .calendar_tb table .select_area .select_time3 {
    font-size: 1.2rem;
  }
  @media screen and (max-width: 900px) {
    .calendar_tb table .select_area .select_time1,
    .calendar_tb table .select_area .select_time2,
    .calendar_tb table .select_area .select_time3 {
      text-align: left;
    }
  }
  .calendar_tb table .select_area .select_time1 {}
  .calendar_tb table .select_area .select_time2 {}
  .calendar_tb table .select_area .select_time3 {}
  .calendar_tb table .select_area .stopped {}
  /* selected */
  .selected {}
  .selected dt {}
  .selected dd {}
  .selected_check_area {}
  .selected_check_area .selected_day {}
  @media screen and (max-width: 700px) {
    #calendar_block {}
    .calendar {}
    .calendar .toolbar {
      display: flex;
      flex-direction: column;
      text-align: center;
      margin: 30px 0 16px;
    }
    .calendar .toolbar h3 {
      font-size: 2.6rem;
    }
    .toolbar_btn {
      margin: 4px auto;
    }
    .toolbar_btn button {
      height: 32px;
      font-size: 1.3rem;
    }
    .toolbar_btn .period {}
    .toolbar_btn .period button {}
    .toolbar_btn .month {}
    .toolbar_btn .month button {}
    .toolbar_btn .month .prev,
    .toolbar_btn .month .next {}
    .toolbar_btn .month .prev::after,
    .toolbar_btn .month .next::after {}
    .toolbar_btn .month .prev {}
    .toolbar_btn .month .prev::after {}
    .toolbar_btn .month .next {}
    .toolbar_btn .month .next::after {}
    .toolbar_btn .month button span {}
    /* calendar_tb */
    .calendar_tb {
      position: relative;
      left: -25px;
      width: calc(100% + 50px);
    }
    .calendar_tb table {}
    .calendar_tb table thead {}
    .calendar_tb table tbody {}
    .calendar_tb table tr {}
    .calendar_tb table th,
    .calendar_tb table td {}
    .calendar_tb table th {}
    .calendar_tb table td {}
    .calendar_tb table .not {}
    .calendar_tb table .day {}
    .calendar_tb table .prev_month .day,
    .calendar_tb table .next_month .day {}
    .calendar_tb table .select_area {}
    .calendar_tb table .select_area .select_time1,
    .calendar_tb table .select_area .select_time2,
    .calendar_tb table .select_area .select_time3 {
      font-size: 1.1rem;
    }
    .calendar_tb table .select_area .select_time1 {}
    .calendar_tb table .select_area .select_time2 {}
    .calendar_tb table .select_area .select_time3 {}
    .calendar_tb table .select_area .stopped {}
    /* selected */
    .selected {
      display: flex;
      flex-direction: column;
    }
    .selected dt {}
    .selected dd {
      padding: 0;
    }
    .selected_check_area {}
    .selected_check_area .selected_day {}
  }
  /* ----------------------------------------------- form関係 */
  /*ラジオボタン*/
  input[type=radio] {}
  .radio {}
  .radio:hover:after {}
  .radio:after {}
  .radio:before {}
  /*ラジオボタン*/
  input[type=radio]:checked + .radio:after {}
  input[type=radio]:checked + .radio:before {}
  input[type=checkbox] {}
  /*チェックボックス*/
  .checkbox {}
  .checkbox:hover:after {}
  .checkbox:after {}
  .checkbox:before {}
  input[type=checkbox]:checked + .checkbox:after {}
  input[type=checkbox]:checked + .checkbox:before {}
  /*テキストエリア*/
  form input[type="text"] {}
  form input[type="text"]:focus {}
  .w100 {}
  .w700 {
    width: 80%;
  }
  .w350 {}
  .w120 {}
  .w90 {}
  @media screen and (max-width: 700px) {
    .w700 {
      width: 100%;
    }
    .w350 {
      width: 100%;
    }
  }
  /*セレクト*/
  select {}
  .selectbox {}
  .selectbox::after {}
  .selectbox select {}
  @media screen and (max-width: 700px) {
    select {
      margin-bottom: 5px;
    }
  }
  /*備考*/
  textarea {}
  textarea:focus {}
  /* ----------------------------------------------- ボタン */
  /*link button*/
  .link_btn a {}
  .link_btn a:hover {}
  .link_btn a::before {}
  .link_btn a:hover::before {}
  /**/
  .form_btn {}
  /*確認画面へ*/
  .btn_submit,
  .btn_back {}
  .btn_submit {}
  .btn_submit:hover {}
  .btn_submit::before{}
  .btn_submit:hover::before{}
  .btn_back {}
  @media screen and (max-width: 700px) {
    .link_btn a {
      padding: 6px 50px 8px 30px;
    }
    /**/
    .form_btn {}
    /*確認画面へ*/
    .btn_submit,
    .btn_back {
      min-width: 250px;
      margin: 0 auto 10px;
    }
  }
  /* ----------------------------------------------- address */
  address {}
  /* ----------------------------------------------- error */
  .error_top {}
  .error_top p {}
  .error_box {}
  .error_text {}
  .error_input {}
  .selectbox select.error_select {}
  /* ----------------------------------------------- 確認画面 */
  main h2.check {}
  .message {}
  .agreement {}
  .agreement p {}
  .agreement p::before {}
  main table.check {}
  main table.check th,main table.check td {}
  main table.check th {}
  @media screen and (max-width: 700px) {
    main table.check th,main table.check td {
      display: block;
      width: 100%;
    }
    main table.check th {
      padding-bottom: 0;
      border: none;
    }
  }
  /* ----------------------------------------------- 送信完了 */
  .thanks {}
  .thanks table.tel {}
  .thanks table.tel td,.thanks table.tel th {}
  .thanks th {}
  @media screen and (max-width: 700px) {
    .thanks table.tel {
      width: 100%;
      border-bottom: 1px solid #ccc;
    }
    .thanks table.tel td,.thanks table.tel th {
      display: block;
      text-align: center;
      border-bottom: none;
    }
    .thanks table.tel td a:link,
    .thanks table.tel td a:active,
    .thanks table.tel td a:visited,
    .thanks table.tel td a:hover {
      pointer-events: auto;
    }
  }

}