@charset "UTF-8";
@font-face {
  font-family: 'genshin';
  src: url("../fonts/GenShinGothic-Bold.ttf") format("truetype");
  font-weight: bold; }

@font-face {
  font-family: 'emugo';
  src: url("../fonts/GenEiMGothic2-Heavy.ttf") format("truetype");
  font-weight: black; }

.f-genkaku {
  font-family: source-han-sans-japanese, sans-serif;
  font-style: normal; }

.w-genkaku-bo {
  font-weight: 700; }

.w-genkaku-re {
  font-weight: 400; }

.f-genshin {
  font-family: 'genshin'; }

.f-emugo {
  font-family: 'emugo'; }

.f-mei, section#contactSection .center p.intro, section#contactSection .center #contactForm .form-row .form-label, section#contactSection .center #contactForm .form-row .form-input.need::before, section#contactSection .center #contactForm .form-row .form-input:not(.need)::before {
  font-family: 'メイリオ', Meiryo,sans-serif; }

.grad {
  background: linear-gradient(to right, #22DCFD 0%, #1C91E2 60%, #5865B9 100%); }

.center {
  max-width: 800px;
  width: 100%;
  margin: 0 auto; }
  @media screen and (max-width: 1024px) {
    .center {
      padding: 0 20px; } }
  @media screen and (max-width: 560px) {
    .center {
      padding: 0 10px; } }

section#contactSection {
  padding-bottom: 100px; }
section#contactSection .center p.intro {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 80px;
}

@media screen and (max-width: 1024px) {
  section#contactSection .center p.intro {
    font-size: 15px;
  }
}

@media screen and (max-width: 768px) {
  section#contactSection .center p.intro {
    font-size: 14px;
  }
}
  section#contactSection .center #contactForm {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px;
    border-color: #E3E3E3;
    margin-bottom: 50px; }
    section#contactSection .center #contactForm .form-row {
      display: -webkit-flex;
      display: -ms-flex;
      display: flex; }
      @media screen and (max-width: 560px) {
        section#contactSection .center #contactForm .form-row {
          display: block; } }
      section#contactSection .center #contactForm .form-row:not(:last-child) {
        border-bottom: solid 1px #E3E3E3; }
      section#contactSection .center #contactForm .form-row .form-label {
        width: 180px;
        text-align: left;
        background: #F6F6F6;
        padding: 20px 0;
        padding-left: 20px;
        font-size: 14px;
        font-weight: normal; }
        @media screen and (max-width: 1024px) {
          section#contactSection .center #contactForm .form-row .form-label {
            width: 140px;
            padding: 20px 0;
            text-align: center; } }
        @media screen and (max-width: 560px) {
          section#contactSection .center #contactForm .form-row .form-label {
            display: block;
            width: 100%;
            text-align: left;
            padding-left: 20px; } }
      section#contactSection .center #contactForm .form-row .form-input {
        flex: 1;
        padding: 20px 30px; }
        @media screen and (max-width: 560px) {
          section#contactSection .center #contactForm .form-row .form-input {
            width: 100%;
            display: block;
            padding: 20px; } }
        section#contactSection .center #contactForm .form-row .form-input.need::before {
          content: '必須';
          background: #D10000;
          padding: 0 10px;
          color: white;
          font-size: 14px;
          font-weight: normal;
          margin-right: 20px;
          vertical-align: top; }
        section#contactSection .center #contactForm .form-row .form-input:not(.need)::before {
          content: '任意';
          background: #888;
          padding: 0 10px;
          color: white;
          font-size: 14px;
          font-weight: normal;
          margin-right: 20px;
          vertical-align: top; }
        section#contactSection .center #contactForm .form-row .form-input .form-size {
          border: solid 1px #E3E3E3;
          max-width: 400px;
          width: 100%; }
  section#contactSection .center p.desc {
    max-width: 450px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 30px; }
    section#contactSection .center p.desc > a {
      text-decoration: underline;
      transition: .4s; }
      section#contactSection .center p.desc > a::after {
        content: '';
        display: inline-block;
        width: 1.2em;
        height: 1.2em;
        background-size: contain;
        background-image: url("../img/contact/link.png"); }
      section#contactSection .center p.desc > a:hover {
        opacity: .6; }
section#contactSection .center #submitBtn {
  width: 240px;
  padding: 15px 0;
  display: block;
  margin: 30px auto 0;
  color: white;
  background: linear-gradient(to bottom, #22DCFD 0%, #5865B9 100%);
  border-radius: 50px;
}