/* 申込フォーム用CSS*/
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ,
    Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* header */
header {
  width: 100%;
  padding: 1%;
  background-color: #fff;
  top: 0;
  display: flex;
  align-items: center;
}

.logo img {
  width: 212px;
}

.info-block {
  display: none;
}

.info-block .block-txt {
  padding: 5px 15px;
  color: #41828b;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4285714286;
  text-align: center;
  border: 2px solid #41828b;
  border-radius: 8px;
}

/* ./header */

/* フォーム上部 */
.title {
  padding-top: 50px;
  padding-bottom: 170px;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}

.stepnavi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0;
}

.stepnavi-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #41828b;
  font-weight: bold;
  font-size: 17px;
  border: 1px dashed #41828b;
  border-radius: 10px;
  width: 30%;
}
.stepnavi-item span {
  display: block;
}
.stepnavi-item small {
  padding-right: 5px;
  font-size: 15px;
}
.stepnavi-item.current {
  background-color: #cce5e8;
}

.stepnavi-arrow {
  color: #41828b;
  font-size: 28px;
  transform: scaleX(0.7);
  list-style: none;
}

.form-desc {
  padding-top: 30px;
  padding-bottom: 50px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}

/* ./フォーム上部 */

/* フォーム */
input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset;
}

.form-attention {
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: bold;
  font-size: 16px;
}

.card{
  border-color:#41828b;
}

.card-header{
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  background-color:#41828b
}

.card-attention {
  font-size: 20px;
  color: #f04e4e;
  padding: 0px;
}

.form-group {
  margin: 10px;
}

.control-label {
  color: #41828b;
  font-weight: bold;
  text-align: left;
  padding-left: 2%;
  padding-right: 10px;
}

.control-label_text {
  color: #41828b;
}

.required::after {
  content: "必須";
  background-color: #f04e4e;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  min-width: 10px;
  padding: 3px 7px;
  margin: 0px 5px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
}
.orRequired::after {
  content: "いずれか一方必須";
  background-color: #f04e4e;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  min-width: 10px;
  padding: 3px 7px;
  margin: 0px 5px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
}

.form-group-control {
  display: flex;
}

.form-group-control input,
.form-group-control select,
.form-group-control p {
  margin: 0 10px;
}

.form-confirm {
	border-bottom: dotted 1px #41828b;
}

.form-confirm span:empty {
	padding: 15px 10px;
}

.form-confirm span {
	padding: 6px 10px;
}

.radio input {
  margin-left: 35px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  font-size: 30px;
  vertical-align: middle;
}

.btn-green {
  background-color: #41828b;
  color: #fff;
  font-size: 20px;
}

.btn-green-course {
  background-color: #41828b;
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
}

.submit {
  margin: 30px;
  text-align: center;
}

.btn-submit {
  padding: 30px;
  text-align: center;
  font-size: 30px;
}

.calculation {
  margin: 7px;
  text-align: center;
}

.btn-calculation {
  padding: 5px;
  text-align: center;
  font-size: 15px;
}

.attention {
  font-size: 13px;
  margin-bottom: 2px;
}

.radio .attention{
  margin-left: 35px;
  display: inline-block;
}

.addClassRoom .attention,
.addSiblings .attention {
  margin-left: 15px;
  display: inline-block;
}

.attention_red {
  color: #f04e4e;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.attention_red_text {
  color: #f04e4e;
}

/* 中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  padding: auto;
  height: auto;
  opacity: 1;
}

table{
  border: 1px solid #cce5e8;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;  
  /* overflow: hidden; */
  
  /* border-color: #cce5e8; */
}

th{
  background-color: #cce5e8;
}

th,td{
  border: 1px solid #cce5e8;
}

.round-corner-table tr:first-child th:first-child{ /* 最初のtr(行) かつ、最初の td(列) つまり、左上に適用*/
  border-radius: 6px 0 0 0; /* 左上から指定してゆく*/
}
.round-corner-table tr:first-child th:last-child{ /*最初のtr(行) かつ、最後の td(列) つまり、右上に適用*/
  border-radius: 0 6px 0 0;
}
.round-corner-table td[rowspan]:last-child { /*rowspanされている最後の td(列) つまり、左下に適用*/
  border-radius: 0 0 0 6px;
}
.round-corner-table tr:last-child td:last-child{ /*最後のtr(行) かつ、最後の td(列) つまり、右下に適用*/
  border-radius: 0 0 6px 0;
} 
.container{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* ./フォーム */

/* フッター */
footer {
  background-color: #41828b;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 50px;
}

.footer {
  color: #fff;
}

/* ./フッター */

/* 行間*/
.bottom_space {
  margin-bottom: 16px;
}

/* pc画面サイズ*/
@media screen and (min-width: 1081px) {
  .logo img {
    width: 308px;
  }

  .info-block {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
  }
}