/* reset.css */
*,*::before,*::after{box-sizing:border-box}body,h3,p{margin:0}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img{max-width:100%;display:block}input,button,textarea{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* index.css */
html {

  
  overflow: auto;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  display: grid;
  overflow: hidden;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

html:has(.modal.open) {
  overflow: hidden;
}


/* utils.css */
:root {
  /* font size */
  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 1.2rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1.2rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.5rem;
  --font-size-19: 1.1875rem;
  --font-size-20: 1.25rem;
  --font-size-21: 1.3125rem;
  --font-size-22: 2.2rem;
  --font-size-23: 1.4375rem;
  --font-size-24: 1.5rem;
  --font-size-25: 1.5625rem;
  --font-size-26: 1.625rem;
  --font-size-27: 1.6875rem;
  --font-size-28: 1.75rem;
  --font-size-29: 1.8125rem;
  --font-size-30: 1.875rem;
  /* color */
  --color-black: #000;
  --color-darkgoldenrod: #be9e40;
  --color-darkorange: #ff7d00;
  --color-dotjunior: #ff7d00;
  --color-deeppink: #ff007d;
  --color-dotlife: #ff007d;
  --color-deeppink-100: #ff007d;
  --color-deeppink-200: #ff007c;
  --color-deeppink-300: #e4027f;
  --color-deepskyblue: #009fe8;
  --color-dimgray: #707070;
  --color-dimgray-100: #707070;
  --color-dimgray-200: #505050;
  --color-dodgerblue: #0096ff;
  --color-dotstay: #0096ff;
  --color-forestgreen: #01963c;
  --color-dothome: #01963c;
  --color-forestgreen-100: #009844;
  --color-forestgreen-200: #01963c;
  --color-gold-100: #fec709;
  --color-gold-200: #e2cd00;
  --color-dotcenter: #FFC80A;
  --color-hotpink: #e64290;
  --color-lightseagreen: #00aaaa;
  --color-dotline: #1400c8;
  --color-mediumblue-100: #1a00cf;
  --color-mediumblue-200: #1a00ce;
  --color-mediumblue-300: #1401c8;
  --color-mediumblue-400: #1400c8;
  --color-mediumblue-500: #0000c8;
  --color-midnightblue: #1d2087;
  --color-red: #ff0000;
  --color-dotinnovation: #ff0000;
  --color-red-100: #ff0000;
  --color-red-200: #e50012;
  --color-seagreen: #009b7c;
  --color-dotwork: #009b7c;
  --color-white: #fff;
  --color-whitesmoke: #ededed;
  --color-yellow: #ffff00;
  --color-yellow-100: #fff100;
  /* container */
  --container-2xs-width: min(440px, calc(100vw - 8%));
  --container-xs-width: min(660px, calc(100vw - 8%));
  --container-sm-width: min(800px, calc(100vw - 8%));
  --container-width: min(1080px, calc(100vw - 8%));
  --container-lg-width: min(1080px, calc(100vw - 4%));
  --container-xl-width: min(1080px, calc(100vw - 2%));
  /* margin */
  --margin-base: 1.8em;
  --margin-0-5: calc(var(--margin-base) * 0.5);
  --margin-1-0: calc(var(--margin-base) * 1);
  --margin-1-5: calc(var(--margin-base) * 1.5);
  --margin-2-0: calc(var(--margin-base) * 2);
  --margin-2-5: calc(var(--margin-base) * 2.5);
  --margin-3-0: calc(var(--margin-base) * 3);
  --margin-3-5: calc(var(--margin-base) * 3.5);
  --margin-4-0: calc(var(--margin-base) * 4);
  --margin-4-5: calc(var(--margin-base) * 4.5);
  --margin-5-0: calc(var(--margin-base) * 5);
  --margin-5-5: calc(var(--margin-base) * 5.5);
}

.container {
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
}

.black {
  color: var(--color-black);
}

.red {
  color: var(--color-red);
}

.font-12 {
  font-size: var(--font-size-12);
}

.font-14 {
  font-size: var(--font-size-14);
}

.font-22 {
  font-size: var(--font-size-22);
}

.center {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.w-7 {
  font-weight: 700;
}

.button {
  font-size: 0.625rem;
  font-weight: bold;
  display: inline-block;
  padding: 0.75em 5em;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-white);
  border-radius: 20px;
  background-color: var(--button-color);
  --button-color: var(--color-mediumblue-500);
}
.button:hover {
  opacity: 0.8;
}

.d-flex {
  display: flex;
}

.gap-2 {
  gap: 2em;
}

.shadow-box {
  padding: 5em;
  border: 5px solid var(--border-color);
  border-radius: 20px;
  box-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-color);
  --border-color: var(--color-mediumblue-500);
  --shadow-color: var(--color-mediumblue-500);
  --shadow-size: 1rem;
}
.shadow-box.transparent {
  position: relative;
  --background-color: #E8E6FA;
}
.shadow-box.transparent:after {
  position: absolute;
  z-index: -1;
  top: calc(var(--shadow-size) - 5px);
  right: 0;
  bottom: 0;
  left: calc(var(--shadow-size) - 5px);
  content: "";
  border-top-left-radius: 20px;
  background-color: var(--background-color);
}

.mt-1 {
  margin-top: var(--margin-1-0);
}

.mt-1-5 {
  margin-top: var(--margin-1-5);
}

.mt-2 {
  margin-top: var(--margin-2-0);
}

.mt-3 {
  margin-top: var(--margin-3-0);
}

.pt-3 {
  padding-top: var(--margin-3-0);
}

.mt-5 {
  margin-top: var(--margin-5-0);
}

.mb-3 {
  margin-bottom: var(--margin-3-0);
}

@media screen and (width <= 768px) {
  .contact-pc {
    display: none !important;
  }

  .shadow-box {
    padding: 3em;
  }
}
@media screen and (width >= 375px) {
  .contact-sp {
    display: none !important;
  }
}
@media screen and (width <= 768px) {
  .button {
    font-size: 0.9rem;
  }
}


/* top.css */

.contact {
  .contact-message-container-container {
    position: relative;

    .contact-message-container {
      max-width: min(652px, calc(100vw - 8%));
      margin: 15rem auto 4rem;
    }

    img {
      position: absolute;
      top: 0;
      left: 2rem;
    }
  }

  .contact-container {
    max-width: min(786px, calc(100vw - 8%));
    margin-right: auto;
    margin-bottom: 10rem;
    margin-left: auto;

    form {
      color: var(--color-mediumblue-500);

      label {
        font-size: 1.5rem;
      }

      input, textarea {
        font-size: max(16px, 0.75rem);
        max-width: 100%;
        border: 2px solid var(--color-mediumblue-500);
        border-radius: 4px;
        height: 2.5em;
        width: auto;

        &:focus {
          outline-color: var(--color-mediumblue-300);
        }
      }

      > div:has(input,textarea,select) {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
      }

      .tel-flex {
        display: flex;
        width: 90%;
        gap: 0.5em;

        > div:not(:first-child) {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5em;

          &:before {
            content: "-";
          }
        }
      }

      textarea[readonly] {
        padding: 1em;
      }
    }
  }
}


@media (max-width:768px){

.contact {
  .contact-message-container-container {
    margin-top: 9rem;

    img {
      left: 4%;
      transform: translateY(calc(-100% - 2rem));
    }
  }

  .contact-container {
    form {

      > div:has(input,textarea,select) {
        gap: 0.5em;
      }

      .tel-flex {
        margin-top: 0.5em;
        gap: 0.5em;

        input {
          width: 100%;
        }
      }
    }
  }
}

/*???*/

.contact-message-container-container .container.contact-message-container .font-14 {
  font-size: 1.1rem;
}

.contact {
  & .contact-container {
    & form {
      input, textarea {
        font-size: max(16px, 0.75rem);
        max-width: 100%;
        border: 2px solid var(--color-mediumblue-500);
        border-radius: 4px;
      }
    }
  }
}

.contact {
  & .contact-message-container-container {
    img {
      left: 4%;
      width: 5em;
      transform: translateY(calc(-100% - 2rem));
    }
  }
}

.contact {
  & .contact-container {
    & form {
      label {
        font-size: 1.5rem;
      }
    }
  }
}

.contact {
  .contact-container button {
    padding: 0.75em 1em;

  }
}

}

/* contact.css */
.contact-message-container-container {
  &:has(+ .contact-container .mw_wp_form_input) {
  }

  &:has(+ .contact-container .mw_wp_form_confirm) {
    .contact-message-container:not(.confirm-message) {
      display: none;
    }
  }

  &:has(+ .contact-container .mw_wp_form_complete) {
    .contact-message-container:not(.complete-message){
      display: none;
    }
  }

&:has(.contact-container .mw_wp_form_complete) {
  .content-main {
    display: none;
  }
}
}

.contact-message-container-container {
    &:has(+ .contact-container .mw_wp_form_complete) {
        margin: 5rem auto 4rem;
    }
}

.contact-message-container-container:has(.contact-container .mw_wp_form_complete) .content-main {
  display: none;
}


/* Contact Form 7のcss */

@media (max-width:768px){ 

  .contact {
    & .contact-message-container-container {
      img {
        width: 5em;
      }
    }
  }

  .contact-message-container-container .container.contact-message-container .font-14 {
    font-size: 1.1rem;
  }

  .contact {
    & .contact-container {
      & form {
        label {
          font-size: 1.1rem;
        }
      }
    }
  }

}

.submit-wrap {
  p {
    margin-inline: auto;
      width: 100%;
      max-width: 200px;

    .button {
      width: 100%;
      span {
        font-size: var(--font-size-18);
      }
    }

    .wpcf7-spinner {
      display: none;
    }
  }
}

.wpcf7 form.sent .wpcf7-response-output,.wpcf7 form.invalid .wpcf7-response-output {
  border-color: var(--color-dotline) !important;
  font-size: var(--font-size-16);
}

.wpcf7-list-item {
  margin-right: 1em;
}