@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
/* ------------------------------
 Base
------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

* {
  border: none;
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
  font-style: normal;
  letter-spacing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section, article, aside, dialog, figure, footer, header, hgroup, nav, li, time {
  display: block;
}

body {
  font-size: 16px;
  font-weight: 400;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  line-height: 1.8;
  text-align: center;
  color: #222;
  background-color: #fff;
}

a {
  color: inherit;
  outline: none;
  text-decoration: none;
  backface-visibility: hidden;
}

a.hover {
  cursor: pointer;
}

li {
  list-style-type: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  -webkit-tap-highlight-color: transparent;
}
img.objectfit {
  object-fit: cover;
  object-position: center center;
  font-family: 'object-fit: cover;';
  width: 100%;
  height: 100%;
}
img.objectfit.contain {
  object-fit: contain;
}

svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  vertical-align: middle;
}

select {
  background: transparent;
}

::selection {
  background: rgba(216, 216, 216, 0.3);
}

::-moz-selection {
  background: rgba(216, 216, 216, 0.3);
}

/* ------------------------------
 Base END
------------------------------ */
main {
  display: block;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  clear: both;
  padding-inline: 50px;
  padding-bottom: 40px;
}

#header {
  padding-top: 60px;
}
#header .logo {
  display: block;
  line-height: 1;
  width: 260px;
  margin: 0 auto 50px;
  text-align: center;
}
#header .logo span {
  display: block;
}
#header .logo .logo {
  margin-bottom: 8px;
}
#header .logo .name {
  background-color: #F1F1F1;
  font-size: 11px;
  font-weight: 500;
  padding-block: 4px 5px;
  border-radius: 2px;
}

.message {
  font-size: 15px;
  margin-bottom: 40px;
}
.message .notes {
  margin-top: 10px;
  font-size: 14px;
  padding-left: 17px;
  text-indent: -17px;
}
.message .notes::before {
  content: "※";
  padding-right: 3px;
  color: #42BA9E;
  display: inline-block;
  text-indent: 0;
}

/* ------------------------------
 Mail-Form
------------------------------ */
#formarea {
  --inputborder: $lgray;
  --inputbg: #fff;
  border-radius: 10px;
  background-color: #F1F1F1;
  margin-inline: auto;
  padding: 50px 40px;
}

.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_file {
  box-shadow: none;
  border: 1px solid var(--inputborder);
  background-color: var(--inputbg);
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  margin: 2px 0;
}

table.inputform {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto 20px;
}
table.inputform th {
  font-weight: 500;
  width: 35%;
  box-sizing: border-box;
  vertical-align: middle;
  padding: 10px 0;
  text-align: right;
}
table.inputform td {
  padding: 10px 0 10px 20px;
  box-sizing: border-box;
}
table.inputform input[type="text"],
table.inputform input[type="tel"],
table.inputform input[type="email"],
table.inputform textarea {
  width: 100%;
  border: 1px solid var(--inputborder);
  box-sizing: border-box;
  padding: 15px;
  border-radius: 5px;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  vertical-align: middle;
  background-color: var(--inputbg);
  box-shadow: none;
}
table.inputform input[type="text"]:focus, table.inputform input[type="text"]:focus-visible,
table.inputform input[type="tel"]:focus,
table.inputform input[type="tel"]:focus-visible,
table.inputform input[type="email"]:focus,
table.inputform input[type="email"]:focus-visible,
table.inputform textarea:focus,
table.inputform textarea:focus-visible {
  border-color: #42BA9E;
  outline: none;
}

:placeholder-shown {
  color: #bbb;
}

::-webkit-input-placeholder {
  color: #bbb;
}

:-moz-placeholder {
  color: #bbb;
  opacity: 1;
}

::-moz-placeholder {
  color: #bbb;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #bbb;
}

.mfp_err {
  clear: both;
}

.hissu {
  margin-left: 10px;
  padding: 3px 10px;
  width: fit-content;
  background-color: #42BA9E;
  color: #FFF;
  font-size: .85em;
  border-radius: 3px;
}

/* ---------- button override ---------- */
.mfp_element_all {
  max-width: none;
}

#mfp_buttons button#btn_confirm {
  border: none;
  border-radius: 100px;
  background: #42BA9E;
  color: #fff;
  display: block;
  margin: 40px auto 0;
  width: 280px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transition: all 0.5s ease;
  padding: 0;
  overflow: hidden;
  text-shadow: none;
  transform: translateY(-3px);
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
}
#mfp_buttons button#btn_confirm:hover {
  background-color: #B7B7B7;
  transform: none;
  box-shadow: none;
}

/* ---------- confirm.css override ---------- */
div#mfp_phase_confirm {
  margin: 0;
}
div#mfp_phase_confirm h4 {
  font-size: clamp(17px, 2.4vw, 24px);
  padding: 0;
  text-align: center;
  margin: 40px auto 40px;
}

div#mfp_overlay_inner {
  padding: 30px;
  box-sizing: border-box;
  width: 840px;
  max-width: 90%;
  box-shadow: none;
}
div#mfp_overlay_inner h4 {
  font-size: clamp(17px, 2.4vw, 24px);
  font-weight: 700;
  padding: 0;
  text-align: center;
  margin: 20px auto 30px;
}

div#mfp_overlay_background {
  background-color: #222;
}

table#mfp_confirm_table {
  border-bottom: var(--inputborder) 1px solid;
  width: 90%;
  margin: 0 auto;
}
table#mfp_confirm_table tr.mfp_colored {
  background-color: transparent;
}
table#mfp_confirm_table tr.mfp_achroma {
  background-color: transparent;
}
table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {
  text-align: left;
  border-top: var(--inputborder) 1px solid;
  font-size: 15px;
}
table#mfp_confirm_table tr th {
  width: 30%;
  white-space: nowrap;
  padding: 15px 10px 15px 30px;
}
table#mfp_confirm_table tr td {
  padding: 15px 30px;
}

div.mfp_buttons {
  margin: 25px auto 0;
  vertical-align: middle;
}
div.mfp_buttons button {
  border: none;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 10px;
  text-align: center;
  text-shadow: none;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  overflow: hidden;
  vertical-align: middle;
  padding: 15px 0;
}
div.mfp_buttons button:hover {
  border: none;
  box-shadow: none;
}
div.mfp_buttons button#mfp_button_send {
  width: 280px;
  background: #42BA9E;
}
div.mfp_buttons button#mfp_button_send:hover {
  background-color: rgba(66, 186, 158, 0.8);
}
div.mfp_buttons button#mfp_button_cancel {
  width: 160px;
  font-size: 15px;
  letter-spacing: 0;
  background: #222;
}
div.mfp_buttons button#mfp_button_cancel:hover {
  background-color: #ccc;
}

/* ------------------------------
 Thanks
------------------------------ */
#thanks #container {
  height: 100svh;
  align-content: center;
}
#thanks #container #header {
  padding-top: 0;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  body {
    font-size: 15px;
  }

  .wrapper {
    padding-inline: 5vw;
    margin-inline: 0;
  }

  /* ------------------------------
   Mail-Form
  ------------------------------ */
  /* ---------- confirm.css override ---------- */
  table#mfp_confirm_table {
    width: 100%;
  }
  table#mfp_confirm_table tr th, table#mfp_confirm_table tr td {
    font-size: 14px;
    display: table-cell;
    width: auto;
    white-space: normal;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  body {
    font-size: 13px;
  }

  .wrapper {
    text-align: left;
  }

  #header {
    padding-top: 60px;
  }
  #header .logo {
    width: 220px;
    margin: 0 auto 40px;
  }

  .message {
    font-size: 13px;
    margin-bottom: 40px;
  }
  .message br {
    display: none;
  }
  .message .notes {
    font-size: 12px;
    padding-left: 15px;
    text-indent: -15px;
  }

  /* ------------------------------
   Mail-Form
  ------------------------------ */
  #formarea {
    padding: 30px 6vw 40px;
  }

  table.inputform {
    margin: 0 auto 20px;
    display: block;
  }
  table.inputform thead, table.inputform tbody, table.inputform tr, table.inputform th, table.inputform td {
    display: block;
  }
  table.inputform th {
    width: auto;
    text-align: center;
  }
  table.inputform td {
    padding: 0 0 5px;
  }
  table.inputform input[type="text"],
  table.inputform input[type="tel"],
  table.inputform input[type="email"],
  table.inputform textarea {
    padding: 10px;
    font-size: 13px;
  }

  /* ---------- label override ---------- */
  form#mailformpro label.mfp_checked {
    padding: 6px 12px 6px 32px;
  }

  form#mailformpro label,
  form#mailformpro label.mfp_not_checked {
    padding: 6px 12px 6px 32px;
  }
  form#mailformpro label::before,
  form#mailformpro label.mfp_not_checked::before {
    width: 24px;
    height: 24px;
    margin-top: -15px;
  }
  form#mailformpro label::after,
  form#mailformpro label.mfp_not_checked::after {
    font-size: 25px;
    margin-top: -15px;
  }

  /* ---------- button override ---------- */
  #mfp_buttons button#btn_confirm {
    width: 80%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }

  /* ---------- confirm.css override ---------- */
  div#mfp_phase_confirm {
    margin: 0;
  }
  div#mfp_phase_confirm h4 {
    margin: 20px auto 20px;
    font-size: 19px;
    letter-spacing: 1px;
  }

  div#mfp_overlay_inner {
    padding: 15px;
  }
  div#mfp_overlay_inner h4 {
    margin: 20px auto;
  }

  table#mfp_confirm_table tr th tr th, table#mfp_confirm_table tr th tr td {
    font-size: 13px;
  }
  table#mfp_confirm_table tr th tr th {
    width: 40%;
    padding: 10px;
    white-space: normal;
  }
  table#mfp_confirm_table tr th tr td {
    padding: 10px 10px;
  }

  div.mfp_buttons {
    margin: 10px 0 0;
  }
  div.mfp_buttons button {
    margin-inline: 5px;
  }
  div.mfp_buttons button#mfp_button_send {
    width: 50%;
    font-size: 15px;
  }
  div.mfp_buttons button#mfp_button_cancel {
    width: 40%;
    font-size: 13px;
  }
}

/*# sourceMappingURL=style.css.map */