.sp-only {
  display: block;
}
@media (min-width: 768px), (orientation: landscape) and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
}

.red {
  color: #ff0000;
}

.bold {
  font-weight: bold;
}

.w15p {
  width: 15% !important;
}

.w19p {
  width: 19% !important;
}

.w24p {
  width: 24% !important;
}

.w25p {
  width: 25% !important;
}

.w30 {
  width: 30% !important;
}

.w50 {
  width: 50% !important;
}

.w70 {
  width: 70% !important;
}

#header .agency-wrapper {
  width: 96%;
  max-width: 800px;
  margin: 5px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px), (orientation: landscape) and (min-width: 768px) {
  #header .agency-wrapper {
    width: 100%;
    margin: 8px auto;
  }
}
#header .agency-wrapper .logo {
  width: 150px;
  height: auto;
}
#header .agency-wrapper .agency-name {
  font-size: 1.2rem;
}

.site-title {
  background-color: #007bff;
  padding: 15px 0;
}
.site-title-inner {
  max-width: 800px;
  margin: 0 auto;
}
.site-title a {
  color: #fff;
  text-decoration: none;
}
.site-title h1 {
  font-size: 1.3rem;
  color: #fff;
  text-align: center;
  margin: 0;
  font-weight: normal;
}
@media (min-width: 768px), (orientation: landscape) and (min-width: 768px) {
  .site-title h1 {
    font-size: 1.6rem;
  }
}
.site-title h2 {
  font-size: 2.4rem;
  color: #fff;
  text-align: center;
  margin: 0;
}
@media (min-width: 768px), (orientation: landscape) and (min-width: 768px) {
  .site-title h2 {
    font-size: 3rem;
  }
}

#wrapper {
  max-width: 800px;
  margin: 0 auto;
  width: 96%;
}
@media (min-width: 768px), (orientation: landscape) and (min-width: 768px) {
  #wrapper {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  #wrapper {
    width: 100%;
  }
}

ol,
ul {
  margin: 0;
  padding-left: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

form#mailformpro input,
form#mailformpro textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1.3rem;
}
form#mailformpro select {
  padding: 5px;
}
form#mailformpro input[type=date] {
  max-width: 240px;
  font-size: 1.6rem;
}
form#mailformpro input[type=tel] {
  max-width: 300px;
}
form#mailformpro textarea {
  width: 100% !important;
  height: 15rem !important;
}
form#mailformpro h3 {
  background-color: #007bff;
  padding: 5px 10px;
  color: #fff;
  border-radius: 5px;
}
form#mailformpro dl {
  display: flex;
  flex-direction: column;
}
form#mailformpro dl dt {
  padding-top: 10px !important;
  border: 0 !important;
  text-align: left;
  font-size: 1.4rem;
}
form#mailformpro dl dd {
  padding: 5px 0 0 0;
  margin-bottom: 10px !important;
}
form#mailformpro .noborder {
  border: 0 !important;
}
form#mailformpro .mb0 {
  margin-bottom: 0 !important;
}
form#mailformpro .name {
  display: flex;
  gap: 10px;
  max-width: 500px;
  width: 100%;
}
form#mailformpro .name > div {
  width: 50% !important;
}
form#mailformpro .zip {
  width: 15rem;
}
form#mailformpro .age {
  width: 10rem;
}
form#mailformpro .address {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
form#mailformpro .type,
form#mailformpro .gender {
  display: flex;
}
form#mailformpro .type label,
form#mailformpro .gender label {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}
form#mailformpro .type input,
form#mailformpro .gender input {
  width: auto;
}

.question h1 {
  font-size: 2rem;
  text-align: center;
}
.question .buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.question .buttons a {
  display: block;
  background: #dfdfdf;
  padding: 10px 0;
  width: 150px;
  text-align: center;
  text-decoration: none;
  color: #000;
}
.question .buttons a:hover {
  opacity: 0.8;
}

.table-wrapper {
  overflow-x: scroll;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
}
.price-table label {
  margin: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.price-table label span {
  display: block;
}
.price-table input {
  width: auto !important;
}
.price-table th,
.price-table td {
  padding: 5px;
  text-align: center;
  border: 1px solid #ccc;
  white-space: nowrap;
}
.price-table th {
  background-color: #61adff;
  color: #fff;
}

.yesno-buttons {
  display: flex;
  gap: 15px;
}
.yesno-buttons label {
  display: flex !important;
  background: #eee;
  padding: 10px 25px;
  gap: 5px;
}

#plan-info {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  background-color: #efefef;
}

.plan-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

#plan1,
#plan2,
#plan3 {
  display: none;
}

#footer {
  text-align: center;
  margin-top: 50px;
  font-size: 1.2rem;
}

#flow .steps {
  list-style: none;
  padding: 0;
  font-weight: bold;
  margin-bottom: 20px;
}
#flow .steps .step {
  display: flex;
  align-items: center;
  margin: 5px 0;
}
#flow .steps .step span {
  display: block;
}
#flow .steps .step .num {
  background-color: #0473b0;
  color: #fff;
  padding: 5px 20px;
  border-radius: 5px;
  margin-right: 10px;
}
#flow .notes {
  padding-left: 1.8rem;
}
#flow .notes li {
  margin-bottom: 10px;
}/*# sourceMappingURL=form.css.map */