@charset "UTF-8";
/* Scss Document */
.title01 {
  display: block;
  text-align: center; }

.bottom5 {
  margin-bottom: 5px; }

.bottom10 {
  margin-bottom: 10px; }

.bottom15 {
  margin-bottom: 15px; }

.center {
  text-align: center; }

.small {
  font-size: 80%; }
  @media (max-width: 679px) {
    .small {
      font-size: 90%; } }

.btn01 {
  display: block;
  text-align: center; }
  .btn01 a {
    display: block;
    background: #000;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    text-decoration: none;
    color: #FFF;
    box-sizing: border-box;
    width: 35%;
    margin: 0 auto;
    transition: 0.3s all linear; }
    .btn01 a:hover {
      opacity: 0.8; }

.show_sp {
  display: none; }
  @media (max-width: 679px) {
    .show_sp {
      display: block; } }

/*tbl01*/
table.tbl01 {
  width: 100%;
  margin-left: auto;
  margin-right: auto; }
  @media (max-width: 679px) {
    table.tbl01 {
      border-bottom: #999 1px solid; } }
  table.tbl01 th {
    background: #EEE;
    padding: 2%;
    vertical-align: top;
    font-weight: bold;
    border: #999 1px solid;
    word-break: keep-all;
    text-align: center;
    box-sizing: border-box; }
    @media (max-width: 679px) {
      table.tbl01 th {
        width: 100%;
        display: block;
        border-bottom: none; } }
  table.tbl01 td {
    padding: 2%;
    border: #999 1px solid;
    background: #FFF;
    word-break: break-all;
    box-sizing: border-box; }
    @media (max-width: 679px) {
      table.tbl01 td {
        width: 100%;
        display: block;
        border-bottom: none; } }
  table.tbl01.nowrap {
    white-space: nowrap; }

.btn-sp {
  display: none; }
  @media (max-width: 679px) {
    .btn-sp {
      display: block; }
      .btn-sp a {
        display: block;
        background: #fb7fb5;
        color: #FFF;
        font-weight: bold;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        border-radius: 7px;
        max-width: 18em;
        margin: 0 auto; } }

#class {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 30px; }
  @media (max-width: 1200px) {
    #class {
      margin-bottom: 30px; } }
  @media (max-width: 679px) {
    #class {
      margin-bottom: 0;
      padding-top: 0; } }
  #class > h3 {
    display: block;
    position: relative;
    color: #fb7fb5;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    max-width: 10em;
    padding-bottom: 20px;
    margin: 0 auto 20px auto; }
    #class > h3:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 3em;
      display: block;
      width: calc(100% - 6em);
      /*下線の幅*/
      height: 2px;
      /*下線の太さ*/
      background-color: #fb7fb5;
      /*下線の色*/ }
  #class p {
    line-height: 1.5; }
  #class .box > p.show-sp {
    display: none; }
    @media (max-width: 679px) {
      #class .box > p.show-sp {
        display: inline; } }
  @media (max-width: 679px) {
    #class .box > p.show-pc {
      display: none; } }
  #class h4 {
    display: block;
    background: #fb7fb5;
    padding: 10px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 1.2em;
    margin: 15px 0 10px 0; }
  #class .loginBox {
    display: block;
    border: #fb7fb5 2px solid;
    padding: 4%;
    border-radius: 10px;
    text-align: center; }
    #class .loginBox p {
      margin-bottom: 15px; }
      #class .loginBox p.error {
        color: #D50003;
        font-weight: bold; }
    #class .loginBox input[type="password"] {
      padding: 2px;
      font-size: 1.1em; }
    #class .loginBox input[type="submit"] {
      padding: 5px 10px; }
  #class .studioBox {
    display: block;
    border: #666 1px solid;
    padding: 4%;
    text-align: center; }
    #class .studioBox p {
      margin-bottom: 15px; }
    #class .studioBox ul {
      display: flex;
      flex-wrap: wrap;
      max-width: 600px;
      margin: 0 auto;
      list-style-type: none; }
      #class .studioBox ul li {
        width: 33.3%;
        padding: 15px; }
        #class .studioBox ul li a {
          display: block;
          color: #FFF;
          font-weight: bold;
          text-align: center;
          padding: 10px;
          text-decoration: none;
          font-size: 1.1em;
          transition: all linear 0.3s;
          border-radius: 5px; }
          #class .studioBox ul li a:hover {
            opacity: 0.7; }
        #class .studioBox ul li:nth-child(1) a {
          background: #007DD8; }
        #class .studioBox ul li:nth-child(2) a {
          background: #D50003; }
        #class .studioBox ul li:nth-child(3) a {
          background: #00AD54; }
    #class .studioBox p.small {
      display: block;
      font-size: 80%;
      padding-top: 20px;
      margin: 0; }
  #class .send {
    display: block;
    border: #666 1px solid;
    padding: 4%;
    text-align: center; }
  #class .attention {
    display: block;
    background: #EEE;
    padding: 15px;
    margin: 15px auto 0 auto;
    font-size: 80%; }
    @media (max-width: 679px) {
      #class .attention {
        font-size: 90%;
        line-height: 1.4; } }
  #class .message {
    display: block;
    text-align: center;
    padding-top: 15px; }
    #class .message p {
      display: block;
      font-size: 80%; }
  #class .btn-pc {
    display: block;
    text-align: center; }
    #class .btn-pc input[type="submit"] {
      background: #fb7fb5;
      color: #FFF;
      font-weight: bold;
      border-style: none;
      border-radius: 8px;
      font-size: 1.2em;
      overflow: hidden;
      padding: 10px;
      width: 10em; }
      #class .btn-pc input[type="submit"]:hover {
        cursor: pointer;
        background: #fef2f4;
        color: #fb7fb5;
        border: #fb7fb5 1px solid; }
      #class .btn-pc input[type="submit"]:focus {
        outline: 0;
        opacity: 0.7; }
    @media (max-width: 679px) {
      #class .btn-pc {
        display: none; } }

.calendar {
  margin-bottom: 4%; }
  .calendar table {
    border-collapse: collapse;
    width: 100%; }
    .calendar table th {
      border: #CCC 1px solid;
      padding: 1.5% 1%;
      text-align: center;
      background: #EEE;
      font-weight: bold; }
      .calendar table th.sat {
        color: #0026b5; }
      .calendar table th.sun {
        color: #d90005; }
    .calendar table td {
      border: #CCC 1px solid;
      padding: 1%;
      width: 14.2%;
      word-break: break-all;
      vertical-align: top; }
      .calendar table td b.day {
        display: block;
        font-weight: bold;
        text-align: right;
        margin-bottom: 8px; }
        @media (max-width: 679px) {
          .calendar table td b.day {
            text-align: center;
            margin-bottom: 0;
            padding: 5px 0; } }
        .calendar table td b.day a {
          text-decoration: none;
          color: #000;
          font-weight: bold;
          pointer-events: none; }
          @media (max-width: 679px) {
            .calendar table td b.day a {
              pointer-events: all;
              text-decoration: underline;
              color: #fb7fb5; } }
      .calendar table td.td_5, .calendar table td.td_5 b.day a {
        color: #0026b5; }
      .calendar table td.td_6 {
        color: #d90005; }
      .calendar table td ul {
        list-style-type: none;
        color: #000; }
        .calendar table td ul li {
          display: block;
          border-radius: 5px;
          font-size: 90%;
          margin-bottom: 8px; }
          .calendar table td ul li .ttl {
            display: block;
            color: #FFF;
            padding: 5px;
            text-align: center; }
            .calendar table td ul li .ttl b {
              display: block;
              font-weight: bold;
              font-size: 120%;
              margin-bottom: 5px; }
            .calendar table td ul li .ttl p {
              padding: 0; }
            .calendar table td ul li .ttl .cancel {
              display: block;
              background: #FFF;
              padding: 3px;
              border-radius: 3px;
              margin-top: 3px; }
          .calendar table td ul li img {
            width: 100%;
            height: auto;
            margin-top: 3px; }
          .calendar table td ul li p {
            display: block;
            padding: 10px;
            font-size: 100%; }
          .calendar table td ul li .check {
            display: block;
            text-align: center;
            padding: 0 5px 5px 5px; }
          .calendar table td ul li.sin {
            background: #fef2f4;
            border: #fb7fb5 1px solid; }
            .calendar table td ul li.sin .ttl {
              background: #fb7fb5; }
              .calendar table td ul li.sin .ttl .cancel {
                color: #fb7fb5; }
          .calendar table td ul li.eki {
            background: #e7f3fb;
            border: #3097d9 1px solid; }
            .calendar table td ul li.eki .ttl {
              background: #3097d9; }
              .calendar table td ul li.eki .ttl .cancel {
                color: #3097d9; }
        @media (max-width: 679px) {
          .calendar table td ul {
            display: none; } }
      @media (max-width: 679px) {
        .calendar table td .btn01 {
          display: none; } }
      .calendar table td .btn01 a {
        width: 100%;
        padding: 5px;
        font-size: 80%;
        border-radius: 3px;
        background-position: left center; }

#form .title01 {
  display: block;
  background: #fb7fb5;
  color: #FFF;
  font-size: 1.2em;
  font-weight: bold;
  padding: 10px;
  margin-bottom: 15px; }
#form table td b {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 10px; }
#form table td span.small {
  display: block;
  font-size: 80%;
  margin: 5px 0 0 0; }
#form table ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }
#form table li {
  margin: 0 0 10px 0;
  padding: 8px 0;
  border-bottom: #999 1px dotted; }
  #form table li:last-child {
    border-bottom: none;
    padding-bottom: 0; }
  #form table li u {
    text-decoration: none; }
  #form table li.sin u {
    color: #fb7fb5; }
  #form table li.eki u {
    color: #3097d9; }
#form table input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle; }
#form table input[type="text"] {
  font-size: 1.1em;
  padding: 2px;
  width: 100%;
  max-width: 500px; }
#form .btn {
  display: block;
  padding: 3% 0;
  text-align: center; }
  #form .btn input {
    padding: 10px 20px;
    font-size: 1.1em; }
  #form .btn.confirm {
    position: relative;
    padding: 115px 0 3% 0; }
  #form .btn.confirm .g-recaptcha {
    position: absolute;
    width: 304px;
    top: 15px;
    left: calc(50% - 152px);
    text-align: center; }
#form p.rechap_msg {
  display: block;
  text-align: center;
  font-size: 90%;
  padding-top: 30px; }
#form .errormsg {
  display: block;
  color: #CD0003; }

/* POPUP用 */
#sp_class_form {
  font-size: 80%;
  line-height: 1.3; }
  #sp_class_form h2 {
    display: block;
    background: #999;
    color: #FFF;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.2em;
    padding: 5px 7px; }
  #sp_class_form p {
    padding: 0;
    margin: 0; }
  #sp_class_form ul {
    list-style-type: none;
    margin: 0;
    padding: 10px 0 0 0; }
    #sp_class_form ul li {
      display: block;
      margin-bottom: 10px;
      padding: 0; }
      #sp_class_form ul li .ttl {
        display: flex;
        align-items: center;
        padding: 7px;
        color: #FFF;
        font-weight: bold; }
        #sp_class_form ul li .ttl b {
          margin-right: 10px; }
        #sp_class_form ul li .ttl p {
          margin-right: 10px;
          margin: 0;
          padding: 0; }
      #sp_class_form ul li.sin {
        border: #fb7fb5 1px solid; }
        #sp_class_form ul li.sin .ttl {
          background: #fb7fb5; }
        #sp_class_form ul li.sin .check span {
          background: #fef2f4; }
      #sp_class_form ul li.eki {
        border: #3097d9 1px solid; }
        #sp_class_form ul li.eki .ttl {
          background: #3097d9; }
        #sp_class_form ul li.eki .check span {
          background: #e7f3fb; }
      #sp_class_form ul li .check {
        display: flex;
        vertical-align: middle;
        align-items: center;
        padding: 0; }
        #sp_class_form ul li .check span {
          padding: 5px;
          margin: 0; }
          #sp_class_form ul li .check span input[type="checkbox"] {
            width: 20px;
            height: 20px; }
        #sp_class_form ul li .check p {
          padding: 0 5px 0 10px; }
  #sp_class_form table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0; }
    #sp_class_form table th {
      padding: 10px;
      background: #EEE;
      border: #CCC 1px solid; }
    #sp_class_form table td {
      padding: 10px;
      border: #CCC 1px solid;
      line-height: 1.3; }
      #sp_class_form table td b {
        margin: 0;
        padding: 0; }
      #sp_class_form table td p {
        margin: 0; }
  #sp_class_form .btn {
    display: block;
    text-align: center; }
    #sp_class_form .btn input[type="submit"] {
      padding: 8px 10px; }
  #sp_class_form .btn-sp a {
    max-width: 10em; }