@charset "utf-8";


@media screen and (max-width : 1199px ) {
  /*--------------------------------------------
    GLOBAL CSS
  --------------------------------------------*/



  /*--------------------------------------------
    UNDER COMMON
  --------------------------------------------*/
  .key_sub .inner {
    height: 22rem;
  }



  /*--------------------------------------------
    HEADER
  --------------------------------------------*/
  body {
    padding-top: 6.5rem;
  }
  .header {
    position: fixed;
    z-index: 110;
    top: 0;
    left: 0;
    right: 0;
  }
  .header .hd_row02 .hd02_logo > a {
    max-width: 18rem;
  }

  .lang_btn_sp {
    margin-bottom: 2rem;
    text-align: center;
  }
  .lang_btn_sp > a,
  .lang_btn_sp > span {
    display: inline-block;
    padding: .5rem 5rem;
    background-color: #afafaf;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    letter-spacing: .1rem;
  }
  .lang_btn_sp > span {
    background-color: #8f89dc;
    color: #fff;
  }
  .lang_btn_sp > a:focus {
    opacity: .7;
  }
  .lang_btn_sp > span + a,
  .lang_btn_sp > a + span {
    margin-left: 2rem;
  }
  .contact_btn_sp {
    margin-bottom: 2rem;
    text-align: center;
  }
  .contact_btn_sp > a:focus {
    opacity: .7;
  }
  .contact_btn_sp > .tel {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid #D5D9DC;
    background-color: #fff;
  }
  .contact_btn_sp > .tel > img {
    width: 15px;
    height: auto;
  }
  .contact_btn_sp > .mail {
    display: inline-block;
    margin-left: 2rem;
    padding: 15px 16px;
    background-color: #8f89dc;
  }

  .sp_gmenu {
    text-align: center;
  }
  .sp_gmenu > li + li {
    border-top: 1px solid #D5D9DC;
  }
  .sp_gmenu > li > a {
    display: block;
    padding: 1.2rem;
    font-size: 1.6rem;
  }

  .hd02_tel_sp {
    padding-right: .5rem;
  }
  .hd02_tel_sp .tel {
    position: relative;
    display: block;
    width: 4.2rem;
    height: 4rem;
    border: 1px solid #D5D9DC;
  }
  .hd02_tel_sp .tel:focus {
    opacity: .7;
  }
  .hd02_tel_sp .tel > img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .hd02_contact_sp {
    padding-right: 0.5rem;
  }
  .hd02_contact_sp .btn_mail {
    border-radius: 0;
    width: 4.2rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }
  .drawer-hamburger {
    position: relative;
    top: auto !important;
    left: auto !important;
    display: block;
    box-sizing: border-box;
    width: 4.2rem;
    height: 4rem;
    padding: 0;
    border: 1px solid #D5D9DC;
  }
  .drawer-hamburger-icon {
    position: absolute;
    top: 0;
    left: .8rem;
    right: .8rem;
    bottom: 0;
    margin: auto;
    width: auto;
  }
  .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
      top: -8px;
  }
  .drawer-hamburger-icon:after {
      top: 8px;
  }

  .drawer--left .drawer-nav {
    left: -40rem;
    width: 40rem;
    background: url(../Image/common/bg_pat01.png);
  }
  .drawer--left .drawer-nav .drawer-menu {
    padding: 10rem 2rem 8rem;
  }

  /*--------------------------------------------
    TOP
  --------------------------------------------*/
  .top_key .key_h .inner {
    padding-top: 8%;
    padding-bottom: 30%;
  }
  .top_key .key_h .inner::before {
    padding-top: 28vw;
  }
  .top_key .key_h .inner > img {
    max-width: 70vw;
  }
  .fx_service > .item:nth-child(4) .item_inr::before {
    width: 40%;
  }
  .fx_service > .item:nth-child(5) .item_inr::before {
    width: 45%;
  }
  .fx_service > .item:nth-child(6) .item_inr::before {
    width: 40%;
  }

  /*--------------------------------------------
    GOOGLE MAP
  --------------------------------------------*/
  .sec_map .map_info {
    top: 2rem;
    left: 2rem;
    padding: 1.5rem;
  }
  .sec_map .map_info .d_name {
    margin-bottom: 1rem;
    font-size: 1.6rem;
  }
  .sec_map .map_info .d_address,
  .sec_map .map_info .d_access,
  .sec_map .map_info .d_open,
  .sec_map .map_info .btn_ggmap > a {
    font-size: 1.2rem;
  }

  /*--------------------------------------------
    FOOT CONTACT
  --------------------------------------------*/


}


@media screen and (max-width : 991px ) {
  /*--------------------------------------------
    BASE
  --------------------------------------------*/
  html {
    font-size: 1.2vw;
  }

  /*--------------------------------------------
    GLOBAL CSS
  --------------------------------------------*/
  .ttl_sec {
    margin-bottom: 3rem;
  }
  .ttl_sec .main {
    font-size: 3.2rem;
    letter-spacing: .1rem;
  }
  .ttl_sec .sub {
    margin-top: .5rem;
    font-size: 1.6rem;
  }
  .ttl_subsec {
    margin-bottom: 3rem;
    font-size: 2.4rem;
    letter-spacing: .1rem;
  }
  .ttl_gchildsec {
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-size: 2rem;
  }
  .ttl_underbar {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    font-size: 1.6rem;
  }
  .ttl_underbar::before {
    height: 2px;
  }
  .ttl_underbar::after {
    width: 9rem;
    height: 2px;
  }

  .text_sec_under {
    font-size: 1.6rem;
  }
  .text_sec_under02 {
    margin-bottom: 2.5rem;
    font-size: 1.6rem;
  }

  .separate_bar {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .separate_bar.lg {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .ul_check li {
    padding-left: 2.5rem;
    font-size: 1.6rem;
  }
  .ul_check li + li {
    margin-top: .5rem;
  }
  .ul_check li::before {
    top: .8rem;
  }

  .wrap_btn {
    margin-top: 3.5rem;
  }

  .btn_green,
  .btn_gray {
    padding: .8rem 3rem;
    font-size: 1.4rem;
  }
  .btn_green.lg,
  .btn_gray.lg {
    padding: 1rem 2rem;
    font-size: 1.6rem;
  }

  .wrap_2col {
    margin-top: 2.5rem;
  }


  /*--------------------------------------------
    UNDER COMMON
  --------------------------------------------*/
  .key_sub .inner {
    height: 18rem;
  }
  .key_sub .inner .key_illust::before {
    right: 0;
  }
  .key_sub .title {
    font-size: 3.2rem;
  }
  .key_sub .en {
    font-size: 1.4rem;
  }


  /*--------------------------------------------
    HEADER
  --------------------------------------------*/


  /*--------------------------------------------
    GOOGLE MAP
  --------------------------------------------*/
  .ggmap_under {
    padding-bottom: 80%;
  }


  /*--------------------------------------------
    FOOT CONTACT
  --------------------------------------------*/
  .sec_contact .illust_lr {
    max-width: 100%;
  }
  .sec_contact .illust_lr::before,
  .sec_contact .illust_lr::after {
    display: none;
  }
  .sec_contact .illust_lr .contactbtn_tbl {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }


  /*--------------------------------------------
    FOOTER
  --------------------------------------------*/
  .footer .inner {
    display: none;
  }
  .ft_copyright {
    padding: 1.5rem 1rem;
    font-size: 1.2rem;
  }


  /*--------------------------------------------
    TOP
  --------------------------------------------*/
  /* SERVICE */
  .fx_service > .item {
    margin-top: 3rem;
    width: calc( (100% - 2rem) / 2 );
    padding-right: .5rem;
    padding-bottom: .5rem;
  }
  .fx_service > .item .item_inr {
    padding: 2rem 2rem 4rem;
  }
  .fx_service > .item .s_ttl {
    font-size: 2.2rem;
  }
  .fx_service > .item .s_catch {
    font-size: 1.6rem;
  }
  .fx_service > .item .s_text {
    font-size: 1.6rem;
  }
  .fx_service .ul_arrow {
    margin-top: 1rem;
  }

  .fx_service > .item:nth-child(1) .item_inr::before {
    width: 50%;
    padding-top: 19%;
  }
  .fx_service>.item:nth-child(2) .item_inr::before {
    width: 35%;
  }
  .fx_service > .item:nth-child(3) .item_inr::before {
    width: 45%;
  }
  .fx_service > .item:nth-child(4) .item_inr::before {
    width: 30%;
    bottom: 2rem;
  }
  .fx_service > .item:nth-child(5) .item_inr::before {
    width: 35%;
  }
  .fx_service > .item:nth-child(6) .item_inr::before {
    width: 30%;
    bottom: .7rem;
  }


  /* NEWS */
  .sec_news_tbl,
  .sec_news_tbl > * {
    display: block;
  }
  .sec_news_tbl .tbc_bnr {
    width: 100%;
    padding-top: 3rem;
    padding-left: 0;
    text-align: center;
  }


  /*--------------------------------------------
    CASE
  --------------------------------------------*/
  .ul_caselist > li > a {
    padding-right: .5rem;
    padding-bottom: .5rem;
  }
  .ul_caselist > li > a .item_inr {
    padding: 2rem;
  }
  .ul_caselist > li > a .item_inr .number {
    width: 6rem;
  }
  .ul_caselist > li > a .item_inr .number .no {
    font-size: 3.8rem;
  }
  .ul_caselist > li > a .item_inr .conts .title {
    font-size: 1.8rem;
  }

  /* 詳細ページ */
  .single_wrap {
    padding-right: .5rem;
    padding-bottom: .5rem;
  }
  .single_wrap + .single_wrap {
    margin-top: 3rem;
  }
  .single_wrap.mgb_md {
    margin-bottom: 3rem;
  }
  .single_wrap .item_inr {
    padding: 2.5rem 2rem 3rem;
  }
  .single_wrap .item_inr .title {
    font-size: 2rem;
  }
  .ul_caselist.relation>li {
    width: 100%;
  }
  .ul_caselist.relation>li:not(:first-child) {
    margin-left: 0;
  }
  .wp_editor {
    font-size: 1.6rem;
  }
  .wp_editor p,
  .wp_editor ul,
  .wp_editor ol {
    margin-bottom: 1.5rem;
  }
  .wp_editor h2 {
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    font-size: 1.8rem;
  }
  .wp_editor h3 {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    font-size: 1.6rem;
  }
  .wp_editor h3::before {
    height: 2px;
  }
  .wp_editor h3::after {
    width: 9rem;
    height: 2px;
  }
  .wp_editor h4 {
    margin-bottom: 1rem;
    font-size: 1.6rem;
  }

  .wp_editor * + .editor_box,
  .wp_editor * + .note_box,
  .wp_editor * + .accordion_box {
    margin-top: 2.5rem;
  }
  .wp_editor .note_box {
    padding: 1.5rem;
  }
  .wp_editor .accordion_box h2 {
    padding-right: 4rem;
  }
  .wp_editor .accordion_box h2 > span {
    right: 1.5rem;
    width: 1.5rem;
  }
  .wp_editor .accordion_box h2 > span::before {
    height: 1.5rem;
  }
  .wp_editor .accordion_box .conts_inr {
      padding: 2rem 2rem 3rem;
  }
  .wp_editor .accordion_box .conts_inr .white_box {
      padding: 2rem;
  }
  .wp_editor .accordion_box .conts_inr * + .white_box,
  .wp_editor .accordion_box .conts_inr * + .editor_box {
      margin-top: 2rem;
  }
  .wp_editor .accordion_box .conts_inr .white_box .bd_box {
    padding: 1.5rem;
  }

  .under_inr_sec + .under_inr_sec {
    margin-top: 2rem;
  }
  .under_inr_sec .ul_deco > li:not(:first-child) {
    margin-top: 1rem;
  }


  /*-------------------------------------
    SERVICE
  --------------------------------------*/
  #service .single_wrap .item_inr.service_img01::before,
  #service .single_wrap .item_inr.service_img02::before {
    right: 2rem;
    bottom: 3rem;
  }


  /*-------------------------------------
    お問い合わせ
  --------------------------------------*/
  input:not([type='radio']):not([type='checkbox']),
  select,
  textarea {
    font-size: 1.8rem;
    padding: 1rem .8rem;
  }
  select {
    padding: 1rem .8rem;
  }
  .ios select {
    padding: 1.4rem .8rem;
  }

  .wrap_form .f_row + .f_row {
    margin-top: 2.5rem;
  }

  .tbl_label + .tbl_label {
      margin-top: 1rem;
  }


  /*-------------------------------------
    SITEMAP
  --------------------------------------*/
  .fx_50p > .item {
    width: calc( (100% - 2rem) / 2 );
  }


}


@media screen and (min-width: 768px) and (max-width : 991px ) {
  /*--------------------------------------------
    CASE
  --------------------------------------------*/
  .ul_caselist > li > a .item_inr .conts .fx_info {
    display: block;
  }
  .ul_caselist > li > a .item_inr .conts .fx_info .info_btn {
    margin-top: 1.5rem;
    text-align: center;
  }
}


@media screen and (max-width : 767px ) {
  /*--------------------------------------------
    BASE
  --------------------------------------------*/
  html {
    font-size: 1.8vw;
  }
  body {
    font-size: 1.4rem;
    line-height: 1.5;
  }


  /*--------------------------------------------
    GLOBAL CSS
  --------------------------------------------*/
  .ul_deco > li {
    padding-left: 2.2rem;
  }
  .ul_deco > li:not(:first-child) {
    margin-top: .5rem;
  }
  .ul_deco > li > span {
    position: absolute;
    left: 0;
  }

  .label_text {
    padding: .5rem .8rem;
    font-size: 1.3rem;
    letter-spacing: .05rem;
  }



  /*--------------------------------------------
    UNDER COMMON
  --------------------------------------------*/
  .key_sub .inner {
    height: 15rem;
  }



  /*--------------------------------------------
    HEADER
  --------------------------------------------*/
  .drawer--left .drawer-nav {
    left: -100%;
    width: 100%;
  }


  /*--------------------------------------------
    GOOGLE MAP
  --------------------------------------------*/
  .sec_map {
    padding-bottom: 5rem;
  }
  .sec_map .ggmap {
    padding-top: 60%;
    margin-left: 0;
    margin-right: 0;
  }
  .sec_map .map_info {
    position: static;
    display: block;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: 92%;
    max-width: 100%;
    padding: 0;
    box-shadow: none;
  }
  .sec_map .map_info .d_name {
    font-size: 1.8rem;
  }
  .sec_map .map_info .d_address {
    font-size: 1.6rem;
  }
  .sec_map .map_info .d_access,
  .sec_map .map_info .d_open {
    font-size: 1.4rem;
  }
  .sec_map .map_info .btn_ggmap {
    margin-top: 2rem;
    text-align: center;
  }

  /*--------------------------------------------
    FOOTER
  --------------------------------------------*/
  #page_top {
    right: 1rem;
    bottom: 1rem;
  }
  #page_top > a {
    max-width: 3.5rem;
  }


  /*-------------------------------------
    TOP
  --------------------------------------*/
  /* SERVICE */
  .fx_service > .item {
    margin-top: 2.5rem;
    width: 100%;
  }

  /* NEWS */
  .n_news > li > a {
    display: block;
  }
  .n_news > li > a > time {
    width: 100%;
    font-size: 1.3rem;
  }
  .n_news > li > a > .text {
    margin-top: .5rem;
    width: 100%;
    padding-left: 0;
    font-size: 1.4rem;
  }


  /*--------------------------------------------
    CASE
  --------------------------------------------*/
  .ul_pagenav > li {
    flex-basis: auto;
    width: 100%;
  }
  .ul_pagenav > li + li {
    margin-left: 0;
  }
  .ul_caselist > li {
    width: 100%;
  }

  /*--------------------------------------------
    OFFICE
  --------------------------------------------*/
  #office .tbl_2col > tbody > tr > th {
    text-align: center;
  }
  #office .fx_member {
    display: block;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  #office .fx_member:first-child {
    margin-top: -2rem;
  }
  #office .fx_member > .fx_img {
    padding-bottom: 1.5rem;
    width: 100%;
    padding-right: 0;
  }
  #office .fx_member > .fx_conts {
    width: 100%;
    padding-bottom: 0;
  }
  #office .fx_member > .fx_conts .member_title,
  #office .fx_member > .fx_conts .member_name {
    text-align: center;
  }
  #office .fx_member > .fx_position {
    margin-top: 2rem;
    padding-bottom: 0;
  }
  #office .fx_2col {
    display: block;
  }
  #office .fx_2col > * {
    width: 100%;
  }
  #office .fx_2col > *:first-child {
    padding-right: 0;
  }
  #office .fx_2col > *:last-child {
    padding-left: 0;
    border-left: none;
  }
  #office .fx_2col > .xs_pdt {
    padding-top: 2rem;
  }
  #office .fx_2col > * .under_text {
    font-size: 1.6rem;
  }


  /*-------------------------------------
    お問い合わせ
  --------------------------------------*/
  .tbl_2col > tbody > tr > th,
  .tbl_2col > tbody > tr > td {
    display: block;
    width: 100%;
    padding: 1rem;
  }

  input:not([type='radio']):not([type='checkbox']),
  select,
  textarea {
    font-size: 1.8rem;
  }

  textarea {
    min-height: 14rem;
  }

  .note_text {
    font-size: 1.2rem;
  }

  .address_row {
    margin-top: 1rem;
    display: block;
  }
  .address_row > * {
    display: block;
  }
  .address_row > .label {
    margin-bottom: .5rem;
    width: 100%;
    padding-right: 0;
    text-align: left;
  }

  .scroll_box {
    padding: 1rem;
  }
  .scroll_box .inr_box {
    height: 16rem;
    padding: .8rem;
  }


  /*-------------------------------------
    プライバシーポリシー
  --------------------------------------*/
  .terms_box > p + h2,
  .terms_box > ul + h2,
  .terms_box > p + h3,
  .terms_box > ul + h3,
  .terms_box > p + h4,
  .terms_box > ul + h4 {
    margin-top: 2.5rem;
  }


  /*-------------------------------------
    サイトマップ
  --------------------------------------*/
  .ul_sitemap > li + li {
    margin-top: 1.5rem;
  }
  .ul_sitemap > li > a {
    padding-left: 2rem;
    font-size: 1.6rem;
  }
  .ul_sitemap > li > a::before {
    border-width: .6rem 0 .6rem .6rem;
  }

  .ul_sitemap_sub {
    padding-left: 2rem;
    padding-bottom: 1rem;
  }
  .ul_sitemap_sub > li > a {
    font-size: 1.4rem;
  }
  .ul_sitemap_sub > li > a::before {
    width: .3rem;
    height: .3rem;
  }



  /*--------------------------------------------
    PAGETOP
  --------------------------------------------*/


  /*-----------------------------------------------------
    Wordpress
  ------------------------------------------------------*/

  .wp-pagenavi {
    margin-top: 2.5rem;
  }
  .wp-pagenavi * {
    width: 3rem;
    height: 3rem;
  }
  .wp-pagenavi * + * {
    margin-left: 1rem;
  }
}



@media screen and (max-width : 575px ) {
  /*--------------------------------------------
    BASE
  --------------------------------------------*/
  html {
    font-size: 2.5vw;
  }


  /*--------------------------------------------
    GLOBAL
  --------------------------------------------*/
  .ss_ta_left {
    text-align: left;
  }
  .ss_ta_center {
    text-align: center;
  }

  .ul_check li::before {
    top: .7rem;
  }


  /*--------------------------------------------
    UNDER COMMON
  --------------------------------------------*/
  .key_sub .inner {
    height: 13rem;
  }
  .key_sub .inner .key_illust {
    max-width: 100%;
  }


  /*--------------------------------------------
    HEADER
  --------------------------------------------*/


  /*--------------------------------------------
    FOOT CONTACT
  --------------------------------------------*/
  .sec_contact .illust_lr .contactbtn_tbl {
    margin-top: 2rem;
  }
  .sec_contact .illust_lr .contactbtn_tbl,
  .sec_contact .illust_lr .contactbtn_tbl > * {
    display: block;
  }
  .sec_contact .illust_lr .contactbtn_tbl .contactbtn_contact {
    margin-top: 1.5rem;
  }

  /*--------------------------------------------
    TOP
  --------------------------------------------*/
  .fx_service > .item:nth-child(1) .item_inr::before,
  .fx_service > .item:nth-child(2) .item_inr::before,
  .fx_service > .item:nth-child(3) .item_inr::before,
  .fx_service > .item:nth-child(4) .item_inr::before,
  .fx_service > .item:nth-child(5) .item_inr::before,
  .fx_service > .item:nth-child(6) .item_inr::before {
    right: 2rem;
    bottom: 2.5rem;
  }
  .fx_service > .item:nth-child(1) .item_inr::before {
    width: 43%;
  }
  .fx_service > .item:nth-child(3) .item_inr::before {
    width: 40%;
  }
  .fx_service > .item:nth-child(4) .item_inr::before {
    width: 35%;
  }
  .fx_service > .item:nth-child(5) .item_inr::before {
    width: 35%;
  }
          .fx_service>.item:nth-child(6) .item_inr::before{
            width: 38%;
          }

  /*-------------------------------------
    CASE
  --------------------------------------*/
  .ul_caselist > li > a .item_inr,
  .ul_caselist > li > a .item_inr > * {
    display: block;
  }
  .ul_caselist > li > a .item_inr .number {
    width: 100%;
    padding-right: 0;
    padding-bottom: 1rem;
    border-right: none;
    border-bottom: 2px dotted #CFCFCF;
    text-align: center;
  }
  .ul_caselist > li > a .item_inr .conts {
    padding-left: 0;
  }
  .ul_caselist > li > a .item_inr .conts .fx_info {
    display: block;
  }
  .ul_caselist > li > a .item_inr .conts .fx_info .info_btn {
    margin-top: 1.5rem;
    padding-left: 0;
  }


  /* 詳細ページ */
  .single_wrap .item_inr {
    padding: 2.5rem 1.5rem 3rem;
  }
  .wp_editor .accordion_box .conts_inr {
    padding: 2rem 1.5rem 3rem;
  }
  .wp_editor .accordion_box .conts_inr .white_box {
    padding: 2rem 1rem;
  }
  .wp_editor .accordion_box .conts_inr .white_box .bd_box {
    padding: 1.5rem 1rem;
  }


  /*-------------------------------------
    SERVICE
  --------------------------------------*/
  #service .single_wrap .item_inr.service_img01::before,
  #service .single_wrap .item_inr.service_img02::before {
    display: none;
  }


  /*-------------------------------------
    お問い合わせ
  --------------------------------------*/
  .wrap_2col > a + a,
  .wrap_2col > button + button {
    margin-left: 1rem;
  }
  .wrap_2col > a,
  .wrap_2col > button {
    min-width: 0;
    width: 45%;
    padding: .8rem 1.5rem;
  }


  /*--------------------------------------------
    ACCESS
  --------------------------------------------*/



  /*-------------------------------------
    サイトマップ
  --------------------------------------*/
  .fx_50p > .item {
    width: 100%;
  }
  .fx_50p > .item + .item {
    margin-top: 2rem;
  }


}