@charset "UTF-8";

/* ================================================================================

  "Web Business" Contact PC Style

================================================================================ */
.sp { display: none; }

@media screen and (max-width:640px) {
  .sp { display: inherit; }
}

/*
  Main Visual
================================================================================ */
.main-visual {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  display: grid;
}
.main-visual video {
  min-width: 100%;
  min-height: 100%;
  grid-area: 1 / 1;
}
.main-visual .contents-area { place-content: center; }
.page-catch::after {
  content: "お問い合わせ";
  font-size: .35em;
  letter-spacing: .1em;
  display: block;
}

@media screen and (max-width:640px) {
  .main-visual {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/*
  Gradation Animation
================================================================================ */
.main-visual.gt .contents-area {
  place-content: center;
  background: linear-gradient( 45deg, rgba(238,119,0,.7), rgba(14,27,63,.7) ) 0 / 200% 100%;
  opacity: 1;
  animation: Grad 4s ease infinite alternate;
}

@keyframes Grad {
  0% { background-position: 0 50%; }
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/*
  Main
================================================================================ */
.l-main {
  top: 0;
  padding: 0 0 120px;
}

@media screen and (max-width:840px) {
  .l-main { padding: 0 0 10%; }
}

/*
  Section
-------------------------------------------------------------------------------- */
.l-main section {
  position: relative;
  z-index: 1;
  top: -40px;
  height: auto;
  display: block;
}
.l-main section .inner {
  background-color: var(--wht);
  padding: 80px 0 0;
}

@media screen and (max-width:840px) {
  .l-main section {
    top: -30px;
    padding: 0;
  }
  .l-main section .inner { padding: 7.5% 0 0; }
}

/*
  Form
-------------------------------------------------------------------------------- */
.attention {
  max-width: 960px;
  width: 90%;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  text-align: center;
  margin: 0 auto 1em;
}
.inquiry-form {
  max-width: 960px;
  width: 90%;
  margin: auto;
}
.inquiry-form table {
  width: 100%;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  border-top: solid 1px #ededed;
}
.inquiry-form table tbody tr { border-bottom: solid 1px #ededed; }
.inquiry-form table tbody th {
  width: 30%;
  text-align: right;
  font-weight: 400;
  white-space: nowrap;
  padding: 1em 1.5em;
  background-color: #fafafa;
  vertical-align: top;
}
.inquiry-form table tbody th span { display: block; }
.inquiry-form table tbody td {
  width: 70%;
  padding: 1em 1.5em;
}
.inquiry-form table tbody td label {
  display: flex;
  align-items: center;
}
.inquiry-form table tfoot th {
  text-align: center;
  padding: 2em 1.5em 0;
}
form input[type="text"], form input[type="email"] {
  width: 100%;
  height: 45px;
  border: solid 1px #ededed;
  padding: 1em;
  transition: all .3s;
}
form textarea {
  width: 100%;
  border: solid 1px #ededed;
  padding: 1em;
  transition: all .3s;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus {
  background: rgba(var(--orange-rgb),.075);
}

/* Form Button
-------------------------------------------------------------------------------- */
.button-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 15px;
  margin: 3em auto 0;
}
form input[type="submit"],
form input[type="button"] {
  width: 350px;
  height: 60px;
  font-size: calc(1.6rem * 1.1);
  color: var(--wht);
  letter-spacing: .05em;
  border-radius: 10px;
  cursor: pointer;
  transition: all .3s;
}
form.confirm input[type="submit"],
form.confirm input[type="button"] {
  width: 250px;
  margin: 0 10px;
}
form input[type="button"].return-btn { background-color: #999999; }
form input[type="submit"].submit-btn { background-color: #ee7700; }
form input[type="submit"].submit-btn[disabled] {
  pointer-events: none;
  background-color: #dcdcdc;
}
form input[type="submit"]:hover,
form input[type="button"]:hover { opacity: .7; }

.inquiry-form h3 {
  font-weight: 500;
  text-align: center;
  margin: 1em 0 0;
}
.inquiry-form h3 small { font-size: .8em; }

/* Privacy Policy */
.privacy-unit {
  width: 80%;
  height: 300px;
  overflow-y: scroll;
  margin: .5em auto 0;
  font-size: .85em;
  line-height: 1.8;
  border: solid 1px #ededed;
  padding: 1.5em;
}
.privacy-unit a {
  color: var(--blk);
  transition: all .3s;
}
.privacy-unit a:hover { text-decoration: none; }
.privacy-unit p { margin: 0 0 1em; }
.privacy-unit dl dt {
  font-size: calc(.95 / .85 * 1em);
  font-weight: 500;
  line-height: 1.0;
  margin: 0 0 .5em;
}
.privacy-unit dl dt::before {
  content: "●";
  font-size: .9em;
  display: inline-block;
  margin: 0 .25em 0 0;
}
.privacy-unit dl dd {
  margin: 0 0 1.75em;
  padding: 0 0 0 1.35em;
}
.privacy-unit dl dd ol {
  list-style-type: decimal;
  padding: 0 0 0 1.25em;
}

/* 同意する */
.agreement.is-half { opacity: .5; }
.agreement span {
  font-weight: 400;
  display: inline-block;
  margin: 0 0 0 .25em;
}

@media screen and (max-width:840px) {
  .privacy-unit { width: 90%; }
}

@media screen and (max-width:640px) {
  .button-unit {
    display: block;
    text-align: center;
  }
  form input[type="submit"], form input[type="button"] { margin: 0 auto 15px; }
  .attention { font-size: calc(15 / 640 * 100vw); }
  .inquiry-form table { font-size: calc(15 / 640 * 100vw); }
  .inquiry-form table tbody th {
    width: 100%;
    display: block;
    text-align: left;
    padding: 1em 1.25em;
  }
  .inquiry-form table tbody td {
    width: 100%;
    display: block;
    padding: 1em 1.25em;
  }
}

@media screen and (max-width:480px) {
  .inquiry-form h3 small { display: block; }
  form input[type="submit"], form input[type="button"] {
    width: 100%;
    font-size: calc(16 / 480 * 100vw);
  }
}

@media screen and (max-width:425px) {
  form input[type="submit"], form input[type="button"] { height: 55px; }
}

@media screen and (max-width:375px) {
  form input[type="submit"], form input[type="button"] { height: 50px; }
}