/* --------------------------------------------- */
/* top */
/* --------------------------------------------- */
.top01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5vw;
  background: var(--back03);
}
@media screen and (max-width: 768px) {
  .top01 {
    padding: 10vw 5vw;
  }
}
.top01 p {
  margin-top: 1vw;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5vw;
}
@media screen and (max-width: 768px) {
  .top01 p {
    font-size: 1.125rem;
    margin-bottom: 8vw;
  }
}
.top01 ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 3vw;
}
@media screen and (max-width: 768px) {
  .top01 ul {
    padding: 0 5vw;
    gap: 5vw 1vw;
  }
}
.top01 ul li {
  width: 14.2857142857%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .top01 ul li {
    width: calc(50% - 1vw - 20px);
  }
}
.top01 ul li::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: 80px;
  left: -25px;
  border-top: 3px solid var(--green);
  border-right: 3px solid var(--green);
  transform: rotate(45deg);
}
.top01 ul li:first-child img {
  max-height: 200px;
}
.top01 ul li:first-child::before {
  content: none;
}
.top01 ul li:nth-child(2) img, .top01 ul li:nth-child(3) img, .top01 ul li:nth-child(4) img {
  max-height: 190px;
}
.top01 ul li:nth-child(5) img, .top01 ul li:nth-child(6) img {
  max-height: 270px;
}

.top02 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5vw;
}
@media screen and (max-width: 768px) {
  .top02 {
    padding: 10vw 5vw;
  }
}
.top02 .inner {
  display: flex;
  flex-direction: row;
  gap: 2vw;
  max-width: 1100px;
  width: 100%;
  margin-top: 5vw;
}
.top02 .inner ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 60px 1vw;
}
.top02 .inner ul li {
  width: calc(33.3333333333% - 1vw);
}
@media screen and (max-width: 768px) {
  .top02 .inner ul li {
    width: 100%;
  }
}
.top02 .inner ul li.before {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  padding: 1vw;
  text-align: center;
  background: var(--back02);
  border-radius: 20px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .top02 .inner ul li.before {
    margin-top: 5vw;
    padding: 4vw 4vw;
  }
}
.top02 .inner ul li.before::after {
  content: "";
  width: 48px;
  height: 24px;
  background: url("../img/top02_arrow.svg") no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  margin: 0 auto;
}
.top02 .inner ul li.before h3 {
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
.top02 .inner ul li.before h3 span {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.top02 .inner ul li.before p {
  font-size: 0.875rem;
  margin-top: 10px;
}
.top02 .inner ul li.after {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.5vw;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1019607843);
}
@media screen and (max-width: 768px) {
  .top02 .inner ul li.after {
    padding: 4vw 2vw;
  }
}
.top02 .inner ul li.after h3 {
  margin-top: 10px;
  color: var(--light-blue);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
.top02 .inner ul li.after h3 span {
  display: block;
  color: var(--text01);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.top02 .inner ul li.after .image {
  width: 11vw;
  padding-top: 20px;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .top02 .inner ul li.after .image {
    width: 50vw;
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .top02 .inner ul li:nth-child(1) {
    order: 1;
  }
  .top02 .inner ul li:nth-child(2) {
    order: 3;
  }
  .top02 .inner ul li:nth-child(3) {
    order: 5;
  }
  .top02 .inner ul li:nth-child(4) {
    order: 2;
  }
  .top02 .inner ul li:nth-child(5) {
    order: 4;
  }
  .top02 .inner ul li:nth-child(6) {
    order: 6;
  }
}
.top02 .inner ul .pict {
  max-width: 40px;
  width: 100%;
}
.top03 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5vw;
  background: var(--back03);
}
@media screen and (max-width: 768px) {
  .top03 {
    padding: 10vw 5vw;
  }
}
.top03 .sec01 ul {
  display: flex;
  flex-direction: row;
  margin: 3vw 6vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec01 ul {
    flex-direction: column;
    align-items: center;
    margin: 0;
  }
}
.top03 .sec01 ul li {
  width: 50%;
  padding: 0 2.5vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec01 ul li {
    width: 100%;
    margin-top: 10vw;
    padding: 0;
  }
}
.top03 .sec01 ul li img {
  max-width: 310px;
}
@media screen and (max-width: 480px) {
  .top03 .sec01 ul li img {
    max-width: 100%;
  }
}
.top03 .sec02 ul {
  display: flex;
  flex-direction: row;
  margin: 3vw 0;
  gap: 0 6vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec02 ul {
    flex-direction: column;
    align-items: center;
  }
}
.top03 .sec02 ul li {
  width: 50%;
  position: relative;
}
.top03 .sec02 ul li:first-child::after {
  content: "";
  width: 48px;
  height: 24px;
  background: url("../img/top02_arrow.svg") no-repeat;
  position: absolute;
  right: -15%;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(-90deg);
}
@media screen and (max-width: 768px) {
  .top03 .sec02 ul li:first-child::after {
    right: 0;
    left: 0;
    top: unset;
    bottom: -6vw;
    transform: unset;
  }
}
@media screen and (max-width: 768px) {
  .top03 .sec02 ul li {
    width: 100%;
    margin-top: 10vw;
    padding: 0;
  }
}
.top03 .sec02 ul li img {
  max-width: 310px;
  margin-top: 2vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec02 ul li img {
    max-width: 60%;
    padding: 3vw 0;
  }
}
.top03 .sec02 ul li p {
  margin-top: 1vw;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: left;
}
.top03 .sec03 h4 {
  margin-top: 3vw;
  font-size: 1.5rem;
  font-weight: 700;
}
.top03 .sec03 picture {
  display: block;
  padding: 1vw 6vw 0;
}
@media screen and (max-width: 768px) {
  .top03 .sec03 picture {
    padding: 1vw 0 0;
  }
}
.top03 .sec03 picture img {
  max-width: 700px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .top03 .sec03 picture img {
    margin-top: 5vw;
  }
}
.top03 .sec03 .bar03 {
  margin-top: 2vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec03 .bar03 {
    margin-top: 10vw;
  }
}
.top03 .sec03 p {
  margin-top: 2vw;
  font-size: 1rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .top03 .sec03 p {
    margin-top: 5vw;
  }
}
.top03 .sec04 picture {
  display: block;
  margin-top: 1vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec04 picture {
    margin-top: 5vw;
  }
}
.top03 .sec04 picture img {
  max-width: 700px;
  width: 100%;
}
.top03 .sec04 .bar03 {
  margin-top: 5vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec04 .bar03 {
    margin-top: 10vw;
  }
}
.top03 .sec04 p {
  margin-top: 2vw;
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .top03 .sec04 p {
    margin-top: 5vw;
  }
}
.top03 .sec04 p strong {
  font-size: 1.25rem;
  font-weight: 700;
}
.top03 .sec04 p strong.light-blue {
  color: var(--light-blue);
}
.top03 .sec04 .cv {
  padding-bottom: 3vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec04 .cv {
    padding-bottom: 5vw;
  }
}
.top03 .sec04 .cv .inner {
  margin-top: 2vw;
}
@media screen and (max-width: 768px) {
  .top03 .sec04 .cv .inner {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 768px) {
  .top03 .sec04 .cv .inner img {
    width: unset;
  }
}
.top03 .end-text {
  max-width: 890px;
  width: 100%;
  margin-top: 4vw;
  mix-blend-mode: multiply;
}

/* --------------------------------------------- */
/* form */
/* --------------------------------------------- */
.form .text01 {
  margin-top: 3vw;
}
.form .text01 p {
  font-weight: 700;
}
.form .text01 span {
  color: var(--text03);
  font-size: 0.75rem;
}
.form .text02 {
  margin-top: 3vw;
}
@media screen and (max-width: 768px) {
  .form .text02 {
    margin-top: 10vw;
  }
}
.form .text02 span {
  color: var(--text03);
  font-size: 0.75rem;
}
.form .privacy {
  height: 250px;
  margin-top: 3vw;
  padding: 0 4% 4%;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow-y: scroll;
}
@media screen and (max-width: 768px) {
  .form .privacy {
    margin-top: 10vw;
  }
}
.form .privacy h3 {
  margin-top: 3vw;
  font-size: 1.25rem;
  font-weight: 700;
}
.form .privacy h4 {
  margin-top: 2vw;
  font-size: 1rem;
  font-weight: 700;
}
.form .privacy p {
  margin-top: 1vw;
  font-size: 0.875rem;
}
.form .privacy .red {
  color: var(--red);
}
.form form {
  max-width: 800px;
  margin: 3vw auto 0vw;
  text-align: left;
}
.form form .req {
  margin-left: 10px;
  color: var(--red);
  font-size: 0.625rem;
}
.form form .small {
  margin-left: 20px;
  color: var(--text03);
  font-size: 0.75rem;
}
.form form label {
  display: block;
  margin-top: 1vw;
}
.form form .radiospace {
  margin-right: 2vw;
  white-space: break-spaces;
}
.form form input[type=radio] {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
  vertical-align: -4px;
}
.form form input[type=radio]:checked {
  border: 1px solid var(--light-blue);
}
.form form input[type=radio]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--light-blue);
  content: "";
}
.form form input[type=text],
.form form input[type=email],
.form form input[type=tel],
.form form textarea {
  width: 100%;
  margin-top: 5px;
  padding: 1vw;
  font-size: 1.25rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  resize: vertical;
}
.form form .block {
  margin-top: 2vw;
}
.form form .block.formtitle {
  line-height: 2.5;
}
@media screen and (max-width: 768px) {
  .form form .block {
    margin-top: 5vw;
  }
}
/* 修正: input[type=image] → #submit-btn に変更 */
.form form #submit-btn {
  display: block;
  width: 192px;
  height: 50px;
  margin: 3.5vw auto 0vw;
  background: url('../img/form_btn_send.svg') no-repeat center center;
  background-size: contain;
  border: none;
  text-indent: -9999px; /* 文字を隠す */
  cursor: pointer;
  transition: opacity 0.2s;
}
@media screen and (max-width: 768px) {
  .form form #submit-btn {
    margin: 5vw auto;
  }
}
.form form #submit-btn:hover {
  opacity: 0.8;
}
.wpcf7-spinner {
  display: none;
}
/* --------------------------------------------- */
/* confirm/send */
/* --------------------------------------------- */
.error-txt {
  color: var(--red);
}
#confirm,
#send {
  background: var(--back03);
}
#confirm .header-menu,
#send .header-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  height: 10vh;
  padding: 2vw 5vw;
}
#confirm .header-menu .logo img,
#send .header-menu .logo img {
  max-width: 250px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #confirm .header-menu .logo,
  #send .header-menu .logo {
    width: 40%;
  }
}
#confirm .confirm-txt,
#send .confirm-txt {
  border-bottom: 1px solid var(--border);
}
#confirm .back img,
#send .back img {
  width: 193px;
}

#send main {
  width: 100%;
  height: 90vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#send main p {
  margin-top: 2vw;
}
@media screen and (max-width: 768px) {
  #send main p {
    margin-top: 10vw;
  }
}
#send main a {
  display: block;
  margin-top: 2vw;
}
@media screen and (max-width: 768px) {
  #send main a {
    margin-top: 10vw;
  }
}