@charset "UTF-8";
/*------------------------------------------------------------
	BASE
------------------------------------------------------------*/
/*------------------------------------------------------------
	COLOR
------------------------------------------------------------*/
/*------------------------------------------------------------
	FONT
------------------------------------------------------------*/
/*------------------------------------------------------------
	FUNCTION
------------------------------------------------------------*/
/*------------------------------------------------------------
	MIXIN
------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap");
header#sqexHeader-black {
  border-bottom: 0; }

.pc_hide {
  display: none; }

@media screen and (max-width: 767px) {
  .pc_hide {
    display: inline-block; }

  .sp_hide {
    display: none; } }
.contents {
  background: #fff; }

.top_area {
  background: #000; }

.terms_date {
  padding: 11px 0;
  background: url("../img/terms_date_bg.png") center center no-repeat;
  background-size: 100% 100%;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .terms_date {
      padding: 2vw 0; } }
  .terms_date p {
    text-align: center; }
  .terms_date img {
    width: 73.95833vw;
    height: auto; }
    @media screen and (max-width: 767px) {
      .terms_date img {
        width: 96vw; }
        .terms_date img.img_sp {
          display: inline-block !important; } }

.about {
  padding: 70px 0 78px;
  text-align: center;
  color: #000; }
  @media screen and (max-width: 767px) {
    .about {
      padding: 5.33333vw 0 6vw; } }
  @media screen and (max-width: 767px) {
    .about h3 img {
      width: 92.66667vw;
      height: auto; } }
  .about p {
    padding: 20px 0 0;
    font-size: 18px;
    line-height: 1.77778; }
    @media screen and (max-width: 767px) {
      .about p {
        padding: 2.93333vw 0 0;
        font-size: 3.2vw;
        line-height: 2; } }

.method_area {
  margin-bottom: 70px; }
  @media screen and (max-width: 767px) {
    .method_area {
      margin: 0 2.66667vw 2.66667vw;
      width: auto; } }
  @media screen and (max-width: 767px) {
    .method_area h3 img {
      margin: 0 auto;
      width: 38.93333vw;
      height: auto; } }
  .method_area .step_left {
    margin-top: 15px; }
    .method_area .step_left .line2_1 {
      height: 53px; }
      @media screen and (max-width: 767px) {
        .method_area .step_left .line2_1 {
          height: 34vw; } }
    .method_area .step_left .line2_2 {
      height: 32px; }
      @media screen and (max-width: 767px) {
        .method_area .step_left .line2_2 {
          height: 9.5vw; } }
  .method_area .method_right {
    margin-top: 0; }

.generator {
  position: relative;
  padding: 40px 0;
  background: linear-gradient(#041e31 0%, #2b5c9a 100%); }
  @media screen and (max-width: 767px) {
    .generator {
      padding: 1.46667vw 0 2.4vw; } }
  /* .generator:before, .generator:after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    background: url("../img/generator_frame.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 1349px;
    height: 183px; }
    @media screen and (max-width: 767px) {
      .generator:before, .generator:after {
        background: url("../img/generator_frame_sp.png") 0 0 no-repeat;
        background-size: 100% 100%;
        width: 96vw;
        height: 14.66667vw; } }
  .generator:before {
    top: 40px;
    transform: translateX(-50%); }
    @media screen and (max-width: 767px) {
      .generator:before {
        top: 1.46667vw; } }
  .generator:after {
    bottom: 40px;
    transform: translateX(-50%) scale(1, -1); }
    @media screen and (max-width: 767px) { */
      /* .generator:after {
        bottom: 2.4vw; } } */
  .generator .inner {
    padding: 60px 0; }
    @media screen and (max-width: 767px) {
      .generator .inner {
        padding: 9.33333vw 0; } }
    .generator .inner h3 {
      padding: 0 0 70px;
      text-align: center; }
      @media screen and (max-width: 767px) {
        .generator .inner h3 {
          padding: 0 0 4vw; } }
      @media screen and (max-width: 767px) {
        .generator .inner h3 img {
          margin: 0 auto;
          width: 92.66667vw;
          height: auto; } }
  .generator_input {
    margin: 0 auto;
    width: 910px; }
    @media screen and (max-width: 767px) {
      .generator_input {
        width: 94.66667vw; } }
    .generator_input_inner {
      position: relative;
      padding: 25px 0; }
      @media screen and (max-width: 767px) {
        .generator_input_inner {
          padding: 3.2vw 0; } }
      .generator_input_inner:before, .generator_input_inner:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 910px;
        height: 25px; }
        @media screen and (max-width: 767px) {
          .generator_input_inner:before, .generator_input_inner:after {
            width: 94.66667vw;
            height: 3.2vw; } }
      .generator_input_inner:before {
        top: 0;
        background: url("../img/generator_bg_top.png") 0 0 no-repeat;
        background-size: 100% 100%; }
        @media screen and (max-width: 767px) {
          .generator_input_inner:before {
            background: url("../img/generator_bg_top_sp.png") 0 0 no-repeat;
            background-size: 100% 100%; } }
      .generator_input_inner:after {
        bottom: 0;
        background: url("../img/generator_bg_top.png") 0 0 no-repeat;
        background-size: 100% 100%;
        transform: scale(1, -1); }
        @media screen and (max-width: 767px) {
          .generator_input_inner:after {
            background: url("../img/generator_bg_top_sp.png") 0 0 no-repeat;
            background-size: 100% 100%; } }
    .generator_input_table {
      margin: 0 auto;
      width: 100%;
      background: url("../img/generator_bg.png") 0 0 repeat-y;
      background-size: 100% auto; }
      @media screen and (max-width: 767px) {
        .generator_input_table {
          background: url("../img/generator_bg_sp.png") 0 0 repeat-y;
          background-size: 100% auto; } }
      .generator_input_table tr th {
        padding: 30px 0 0 90px;
        vertical-align: top; }
        @media screen and (max-width: 767px) {
          .generator_input_table tr th {
            display: block;
            padding: 5.33333vw 6.66667vw 0 8vw; } }
        .generator_input_table tr th img {
          width: 164px; }
          @media screen and (max-width: 767px) {
            .generator_input_table tr th img {
              width: 35.73333vw; } }
      .generator_input_table tr td {
        position: relative;
        padding: 30px 90px 0 0;
        vertical-align: top; }
        @media screen and (max-width: 767px) {
          .generator_input_table tr td {
            display: block;
            padding: 2.66667vw 6.66667vw 0 8vw; } }
        .generator_input_table tr td.date {
          line-height: 40px; }
        .generator_input_table tr td .input_wrap {
          position: relative;
          display: block; }
        .generator_input_table tr td .select_wrap {
          position: relative;
          display: block; }
        .generator_input_table tr td .select_date {
          position: relative;
          display: inline-block;
          margin: 0 15px 0 20px;
          width: 40px;
          height: 40px; }
          @media screen and (max-width: 767px) {
            .generator_input_table tr td .select_date {
              margin: 0 4vw;
              width: 10.66667vw;
              height: 10.66667vw; } }
          .generator_input_table tr td .select_date:first-child {
            margin-left: 0; }
            @media screen and (max-width: 767px) {
              .generator_input_table tr td .select_date:first-child {
                margin-left: 0; } }
          .generator_input_table tr td .select_date select {
            padding: 0;
            width: 40px;
            height: 40px; }
            @media screen and (max-width: 767px) {
              .generator_input_table tr td .select_date select {
                width: 10.66667vw;
                height: 10.66667vw;
                vertical-align: super; } }
          .generator_input_table tr td .select_date_display {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: block;
            width: auto;
            background: #fff;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
            color: #033a79;
            font-weight: bold;
            pointer-events: none; }
            @media screen and (max-width: 767px) {
              .generator_input_table tr td .select_date_display {
                font-size: 4.26667vw;
                line-height: 10.66667vw; } }
        @media screen and (max-width: 767px) {
          .generator_input_table tr td br + .select_date {
            margin-top: 2.66667vw;
            margin-left: 0; } }
        .generator_input_table tr td .input_cnt {
          position: absolute;
          right: 0;
          bottom: 0;
          transform: translateY(120%); }
        .generator_input_table tr td select {
          padding: 17px 15px; }
          @media screen and (max-width: 767px) {
            .generator_input_table tr td select {
              padding: 3.33333vw 1.33333vw; } }
        .generator_input_table tr td input {
          padding: 17px 15px;
          width: calc(100% - 30px);
          font-size: 16px;
          line-height: 1;
          color: #033a79;
          font-weight: bold; }
          @media screen and (max-width: 767px) {
            .generator_input_table tr td input {
              padding: 3.33333vw 1.33333vw;
              width: calc(100% - 2.66vw);
              font-size: 4.26667vw; } }
        .generator_input_table tr td textarea {
          padding: 17px 15px;
          height: 7.5em;
          width: calc(100% - 30px);
          font-size: 16px;
          line-height: 1.3;
          color: #033a79;
          font-weight: bold; }
          @media screen and (max-width: 767px) {
            .generator_input_table tr td textarea {
              padding: 3.33333vw 1.33333vw;
              width: calc(100% - 2.66vw);
              font-size: 4.26667vw; } }
        .generator_input_table tr td .select_department {
          width: 100%; }
          .generator_input_table tr td .select_department_display {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: block;
            width: auto;
            padding: 17px 15px;
            background: #fff;
            text-align: left;
            font-size: 16px;
            line-height: 1;
            color: #033a79;
            font-weight: bold;
            pointer-events: none; }
            @media screen and (max-width: 767px) {
              .generator_input_table tr td .select_department_display {
                padding: 3.33333vw 1.33333vw;
                font-size: 4.26667vw; } }
            .generator_input_table tr td .select_department_display:after {
              content: '▼';
              position: absolute;
              top: 50%;
              right: 15px;
              transform: translateY(-50%); }
      .generator_input_table tr:first-child th, .generator_input_table tr:first-child td {
        padding-top: 60px; }
        @media screen and (max-width: 767px) {
          .generator_input_table tr:first-child th, .generator_input_table tr:first-child td {
            padding-top: 7.33333vw; } }
      @media screen and (max-width: 767px) {
        .generator_input_table tr:first-child td {
          padding-top: 2.66667vw; } }
      .generator_input_table tr:last-child th, .generator_input_table tr:last-child td {
        padding-top: 65px;
        padding-bottom: 60px; }
        @media screen and (max-width: 767px) {
          .generator_input_table tr:last-child th, .generator_input_table tr:last-child td {
            padding-top: 9.33333vw;
            padding-bottom: 0; } }
      @media screen and (max-width: 767px) {
        .generator_input_table tr:last-child td {
          padding-top: 2.66667vw;
          padding-bottom: 11.33333vw; } }
    .generator_input #genelate_input_button {
      display: block;
      margin: 16px auto 0;
      padding: 0;
      width: 510px;
      border: none;
      background: none;
      cursor: pointer; }
      @media screen and (max-width: 767px) {
        .generator_input #genelate_input_button {
          margin: 6vw auto 0;
          width: 68vw; } }
      .generator_input #genelate_input_button img {
        transition: all 0.5s cubic-bezier(0.21, 0.51, 0.51, 1); }
        @media screen and (max-width: 767px) {
          .generator_input #genelate_input_button img {
            width: 100%;
            height: auto; } }
        .generator_input #genelate_input_button img:hover {
          filter: brightness(1.5); }
  .generator #genelate_canvas {
    width: 0px;
    height: 0px;
    overflow: hidden;
    pointer-events: none; }
    .generator #genelate_canvas_wrap {
      width: 0px;
      height: 0px;
      overflow: hidden;
      pointer-events: none; }
  .generator_output {
    padding: 65px 0 0; }
    @media screen and (max-width: 767px) {
      .generator_output {
        padding: 4vw 0 0; } }
    .generator_output_img {
      margin: 0 auto;
      text-align: center; }
      @media screen and (max-width: 767px) {
        .generator_output_img {
          width: 94.66667vw; }
          .generator_output_img img {
            width: 100%;
            height: auto; } }
    .generator_output_buttons {
      display: flex;
      justify-content: center;
      padding: 25px 0 0; }
      @media screen and (max-width: 767px) {
        .generator_output_buttons {
          display: block;
          padding: 0; } }
      @media screen and (max-width: 767px) {
        .generator_output_buttons li {
          margin: 4.4vw auto 0;
          width: 68vw; } }
      .generator_output_buttons li span {
        display: block;
        width: 510px;
        font-size: 16px;
        line-height: 1.75;
        white-space: nowrap; }
        @media screen and (max-width: 767px) {
          .generator_output_buttons li span {
            width: 68vw;
            font-size: 3.2vw;
            line-height: 1.58333;
            white-space: normal; }
            .generator_output_buttons li span br {
              display: none; } }
      .generator_output_buttons li:last-child {
        margin-left: 55px; }
        @media screen and (max-width: 767px) {
          .generator_output_buttons li:last-child {
            margin-left: auto; } }
      .generator_output_buttons li a {
        position: relative;
        z-index: 2;
        display: block; }
        .generator_output_buttons li a img {
          transition: all 0.5s cubic-bezier(0.21, 0.51, 0.51, 1); }
          @media screen and (max-width: 767px) {
            .generator_output_buttons li a img {
              width: 100%;
              height: auto; } }
          .generator_output_buttons li a img:hover {
            filter: brightness(1.5); }

.pr_area {
  text-align: center; }
  @media screen and (max-width: 767px) {
    .pr_area h3 {
      margin: 0 auto 4vw;
      width: 92.66667vw; } }
  @media screen and (max-width: 767px) {
    .pr_area h3 img {
      width: 92.66667vw;
      height: auto; } }
  @media screen and (max-width: 767px) {
    .pr_area .pr_img img {
      margin: 0 auto;
      width: 94.66667vw;
      height: auto; } }

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