/* responsive
-------------------------------------------------- */
.sp { display: none; }
.pc_f {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}


/* 画面幅小さいPC - small_pc
-------------------------------------------------- */
@media ( max-width: 1280px ) {
  .main_visual .main_catch_txt {
    /* right: auto;
    left: 50%;
    transform: translate( -50%, -50% ); */
  }

  .main_visual .main_catch_txt > p:first-of-type {
    font-size: 2.6rem;
  }
  .main_visual .main_catch_txt > p:last-of-type {
    font-size: 1.8rem;
  }

}

/* タブレット - tablet
-------------------------------------------------- */
@media ( max-width: 768px ) {

  /* メインビジュアル
  -------------------------------------------------- */
  .main_visual {
    margin-top: 0;
    height: 600px;
  }
  .main_visual > .main_slider {
    width: 100%;
  }
  .main_visual > .list_nav {
    display: none;
  }

  .main_visual .main_catch_txt {
    right: 3rem;
  }
  .main_slider > .logo img {
    margin: 1.5rem;
    width: 200px;
  }
  .main_visual .main_catch_txt > p:first-of-type {
    font-size: 2.1rem;
  }
  .main_visual .main_catch_txt > p:last-of-type {
    padding-left: 2rem;
    font-size: 1.4rem;
  }


  /* 制作事例
  -------------------------------------------------- */
  .list_production > li:nth-child(3) div {
    min-height: 200px;
  }

  /* ご利用の流れ
  -------------------------------------------------- */
  .flow_list {
    flex-wrap: wrap;
  }
  .flow_list > li {
    width: 100%;
  }
  .flow_list > li:not(:last-child) {
    margin-bottom: 4%;
  }

  .flow_list_other {
    flex-wrap: wrap;
  }
  .flow_list_other > li {
    width: 100%;
  }
  .flow_list_other > li:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  /* お問い合わせ
  -------------------------------------------------- */
  .ah_contact_form dt {
    width: 30%;
  }
  .ah_contact_form dd {
    width: 70%;
  }
  .wpcf7-form-control-wrap .wpcf7-checkbox > span .wpcf7-list-item-label {
    font-size: 1.4rem;
  }
}


/* スマホ - sp
-------------------------------------------------- */
@media ( max-width: 480px ) {
  
  /* レスポンシブ - responsive
  --------------------------------------------- */
  .pc { display: none; }
  .sp { display: block; }

  body {
    font-size: 1.4rem;
  }

  .ttl_main > span {
    font-size: 5rem;
  }

  .main_visual {
    height: 480px;
  }
  .main_visual .main_catch_txt {
    padding: 0 1rem;
    width: 100%;
    right: auto;
    left: 50%;
    transform: translate( -50%, -50% );
  }
  .main_visual .main_catch_txt > p:first-of-type {
    font-size: 2.4rem;
    text-align: center;
  }
  .main_visual .main_catch_txt > p:first-of-type br {
    display: block;
  }
  .main_visual .main_catch_txt > p:last-of-type {
    padding-left: 0;
    font-size: 1.2rem;
    text-align: center;
  }

  .list_production {
    padding: 0 1rem;
  }
  .list_production > li, .list_production > li:nth-child(4), .list_production > li:nth-child(5) {
    margin-bottom: 3%;
    width: 100%;
  }
  .list_production > li:nth-child(4) div, .list_production > li:nth-child(5) div {
    min-height: 135px;
  }
  .list_production > li:nth-child(3) div {
    min-height: 135px;
  }
  .list_production > li:nth-child(3) div:first-of-type {
    margin-bottom: 3%;
  }

  .flow_box, .contact_box {
    padding: 3rem 1rem;
  }
  .flow_list > li p {
    font-size: 1.4rem;
  }
  .flow_list_other > li:first-child h3 {
    font-size: 1.8rem;
  }

  .flow_list_other > li:last-child {
    flex-direction: column-reverse;
  }
  .flow_list_other > li {
    padding: 2rem 1rem;
  }
  .flow_list_other > li:last-child p {
    font-size: 1.6rem;
  }
  .flow_list_other > li:last-child p span {
    font-size: 1.1rem;
  }
  .flow_list_other {
    padding: 2rem 0;
  }

  .tbl_company table tr td:first-of-type {
    display: block;
    padding-bottom: 0;
    width: 100%;
    border-bottom: none;
  }
  .tbl_company table tr td:last-of-type {
    display: block;
    width: 100%;
    font-size: 1.4rem;
  }

  .modal-content {
    padding: 3rem 2rem 5rem;
  }

  .modal-content > figure.wp-block-gallery > figure {
    width: 48%;
  }


  .ah_contact_form dt, .ah_contact_form dd {
    width: 100%;
  }
  .ah_contact_form dt {
    padding: 1rem 0;
    border-bottom: 1px dotted rgba( 255, 255, 255, .4 );
  }
  .wpcf7-form-control-wrap .wpcf7-checkbox > span {
    width: 50%;
  }
}