/* 両ページ共通 
   ==============================  */

/* index用
   ================================ */
.child-contents-area .caution-text {
  text-indent: -1em;
  padding-left: 1em;
}

.child-contents-area > section[class] ~ section[class] {
  margin-top: 50px;
}

.child-contents-area .notice-point {
  color: #ce1d1d;
}

/* explanation-note
  --------------------------------- */
.explanation-note .explanation-text {
  margin-bottom: 20px;
}

/* description-meeting
  -------------------------*/
.description-meeting {
  margin-top: 50px;
}

.description-meeting .meeting-considerations {
  margin-top: 30px;
}

.description-meeting .meeting-considerations > .caution-text {
  margin-top: 20px;
}

/* card-area
  --------------------------------  */
section .card-area {
  margin-top: 30px;
}

.card-area .detail-card {
  padding: 30px 40px;
  background-color: #f7f7f7;
}

.card-area > .detail-card ~ .detail-card {
  margin-top: 30px;
}

.card-area .card-wrapper {
  align-items: flex-end;
}

.card-area .detail-card .card-items {
  margin-top: 20px;
}

.none_application .card-area .detail-card .holding-information {
  width: 100%;
}

.card-area .detail-card .holding-information {
  width: 65%;
  min-width: 260px;
}

.card-area .detail-card .holding-information > dl ~ dl {
  margin-top: 10px;
}

.card-area .detail-card .holding-information .link-detail {
  margin-top: 15px;
}

.detail-card .holding-information dt {
  font-weight: bold;
  width: 30%;
  max-width: 180px;
}

.detail-card .holding-information dt,
.detail-card .holding-information dd {
  display: inline-block;
  vertical-align: top;
}

.detail-card .holding-information dd {
  width: 69%;
}

/* hall-content */
.detail-card .holding-information dd > .hall-wrapper + .hall-wrapper {
  margin-top: 10px;
}

.detail-card .holding-information dd .free {
  margin-top: 10px;
}

.detail-card .partial-content > span ~ span {
  margin-left: 10px;
}

.description-meeting .postscript {
  margin-top: 20px;
}

/* experience-content
   -------------------------- */
.experience-content .experience-list {
  margin-top: 30px;
}

.experience-list > li + li {
  margin-top: 15px;
}

section.class .experience-list .class-name {
  display: inline-block;
  width: 30%;
}

.experience-content.club .reception-end {
  margin-top: 10px;
}

section.club .experience-inventory {
  margin-top: 20px;
}

/* individual_tour
  ----------------------- */
.child-contents-area section.individual_tour p ~ p {
  margin-top: 15px;
}

/* outside_party
　---------------------------    */
.outside_party .host_list {
  margin-top: 30px;
}

.outside_party .host_list > li + li {
  margin-top: 15px;
}

/* resovertionページ用
   ===============================  */

/* 全体
   -------------------------------  */
.child-contents-area > div[class] + div[class] {
  margin-top: 30px;
}

section.child-contents-area p + p {
  margin: 0;
}

input:focus,
select:focus {
  outline: none !important;
  border: 2px solid #8cafe7 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
}

.child-contents-area input,
.child-contents-area textarea,
.child-contents-area select {
  border: 1px solid #d9d9d9;
  padding: 2px 10px;
  font-size: 14px;
  height: 100%;
}

.child-contents-area select {
  background-color: #fff;
  width: 40%;
}

/* JS用*/
.error-msg {
  font-size: 14px;
  color: #ce1d1d;
  display: none;
}

.error-msg.is-show {
  display: block;
  margin-top: 10px;
}

.btn-area .cant-event {
  pointer-events: none;
  opacity: 0.5;
}

.btn-area .can-event {
  pointer-events: auto;
}

.error-highlight {
  border-color: #c90707 !important;
  background-color: #fde1e1 !important;
}

#StartTime,
#EndTime {
  margin: 0 10px;
}

/* form-area
===============================  */
/* form-line
-------------------------------  */
.form-list .form-line {
  vertical-align: top;
}

/* line-description
-------------------------------  */

.line-description .required-tag {
  margin-top: 3px;
  padding: 3px 16px;
  font-size: 13px;
  background-color: #ce1d1d;
  color: #fff;
  text-align: center;
}

.form-line .line-description {
  display: inline-flex;
  width: 28%;
  vertical-align: middle;
}

.line-description .list-title {
  font-weight: bold;
}

/* inputlist */
.form-list > li {
  width: 100%;
  padding: 30px 0;
  border-top: 1px solid #d9d9d9;
}

.form-list > li:last-child {
  border-bottom: 1px solid #d9d9d9;
}

.form-list .input-area {
  display: inline-block;
  vertical-align: middle;
}

.input-area {
  width: 68.6%;
  margin-left: 3%;
}

/*入力欄*/

.input-area input.is-email {
  width: 75%;
}

.input-area input:not(.is-email) {
  width: 50%;
}

/* btn-area
-------------------------------  */
.reservation-form .btn-area {
  margin-top: 30px;
}

.btn-area.flex-box {
  justify-content: center;
}

.c-radio-btn ~ .c-radio-btn {
  margin-left: 35px;
}

/* ============================================
タブレット
============================================ */

@media screen and (max-width: 1000px) {
  /* index用
  ============================ */
  /* card-area
  --------------------------------  */
  .card-area .detail-card {
    padding: 30px 15px;
  }

  .card-area .card-wrapper {
    justify-content: center;
  }

  .card-area .btn-wrapper {
    margin-top: 30px;
  }

  .card-area .detail-card .holding-information {
    width: 100%;
  }

  .detail-card .holding-information dt {
    width: 20%;
  }

  .detail-card .holding-information dd {
    width: 79%;
  }

  /* class-list
    ------------------------- */
  section.class .experience-list .class-name {
    width: 49%;
  }

  /* resovertionページ用
  =========================*/
  .form-line .input-area {
    margin-top: 20px;
  }

  .form-list .input-area input,
  .input-area select {
    width: 100%;
  }

  .form-line .line-description,
  .input-area {
    width: 100%;
    margin: 0;
  }

  .btn-area {
    width: 50%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 560px) {
  /* index
  ======================================= */

  /* card
   -------------------------------------  */
  .detail-card .holding-information dt {
    width: 30%;
  }

  .detail-card .holding-information dd {
    width: 68%;
  }

  /* experience-content
   -------------------------- */
  section.class .experience-list .class-name {
    width: 100%;
  }
}