.sp {
  display: none !important;
}

@media (min-width: 768px) {
  a[href^=tel] {
    text-decoration: none;
    pointer-events: none;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .site_wrapper {
    width: 100%;
  }
  #seo_txt h1 {
    width: 100%;
  }
  #site_header {
    padding: 0 20px;
  }
  #gnav .site_wrapper img {
    height: 30px;
    width: auto;
  }
  #ws_tab ul {
    width: 50%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #modal-window {
    width: calc(100% - 20px);
    height: auto;
    left: 10px !important;
    right: 10px !important;
    margin-left: 0 !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #lead_01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1px;
  }
  #lead_01 li {
    margin-right: 0 !important;
  }
  #lead_02 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  .logo_sp{
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  img {
    max-width: 100%;
  }
  #seo_txt {
    display: none;
  }
  #site_header {
    padding: 8px 10px;
  }
  #site_header .right_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto;
    gap: 5px;
  }
  #site_header .right_area ul {
    padding-top: 0;
    padding: 0;
    width: auto;
  }
  #site_header .right_area ul li#hnav03 a {
    background: none;
  }
  #site_header .left_area {
    width: 45%;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #site_header .left_area img {
    width: auto;
  }
  #gnav {
    display: none;
  }
  #site_header > .site_wrapper {
    width: 100%;
  }
  #site_header > .site_wrapper > div.clearfix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #site_header > .site_wrapper > div.clearfix::after {
    display: none;
  }
  #site_header > .site_wrapper .right_area img {
    width: 42px;
    height: auto;
  }
  body#toppage .bg_yel.pt40.pb35 {
    border-top: 10px solid #222;
  }
  .bg_yel .site_wrapper > div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .bg_yel .site_wrapper > div img {
    width: 195px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .menu_h {
    background-color: #222;
    color: #fff;
    padding: 10px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
    max-height: 100%;
    overflow: auto;
    display: none;
  }
  .menu_h > p {
    text-align: left;
  }
  .menu_h > p > a {
    border-bottom: 1px dotted #fff;
  }
  .menu_h > p > a span {
    color: #ffda00;
    margin-left: 10px;
  }
  .menu_h a {
    padding: 10px 0;
    color: currentColor;
    text-decoration: none;
    text-align: left;
    display: block;
  }
  .menu_h .menu_staff {
    display: none;
    background: url(../common_img/br1.png);
    padding: 10px;
  }
  .menu_h .menu_staff .en::first-letter {
    font-weight: bold;
    font-size: 18px;
  }
  .menu_h .menu_staff ul li a {
    display: block;
    background: url(../common_img/br3.png) repeat-y left top/100% 100%;
    font-size: 16px;
    padding: 10px;
    margin-top: 1px;
  }
  .menu_h .menu_staff ul li:first-child a {
    background: url(../common_img/br2.png) repeat-y left top/100% 100%;
  }
  .menu_h .menu_staff ul + ul {
    margin-top: 20px;
  }
  .nav-sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #222;
    padding: 10px;
  }
  .nav-sp a {
    width: 25%;
    border-left: 1px dotted #fff;
  }
  .nav-sp a:last-child {
    border-right: 1px dotted #fff;
  }
  .nav-sp img {
    height: 24px;
    width: auto;
  }
  .loopslider02 ul.sita li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .loopslider02 ul.sita {
    width: 750px !important;
  }
  .loopslider02 ul.sita img {
    height: 50px;
    width: auto;
  }
  .loopslider_wrap {
    width: 1500px !important;
  }
  .fotter_wrapper {
    width: 100%;
  }
  .fotter_wrapper .txt_align_r {
    background: #ffda00;
  }
  #site_footer ul.f_nav {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background-color: #222;
    padding: 0 50px 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #site_footer ul.f_nav::before {
    content: "";
    background: url(../common_img/fotter_tt.png) no-repeat left top;
    width: 100%;
    height: 24px;
    display: block;
  }
  #site_footer ul.f_nav li {
    width: 50%;
    padding: 0;
  }
  #site_footer ul.f_nav li a {
    display: block;
    text-align: left;
    padding: 10px 0;
  }
  #site_footer ul.f_nav li::before {
    display: none;
  }
  #site_footer ul.f_nav li:first-child ::before {
    display: none;
  }
  #site_footer {
    min-height: inherit;
  }
  #ws_tab {
    padding: 0 25px;
    margin: 0 0 20px !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #ws_tab li {
    width: calc(50% - 15px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #ws_tab li::before {
    margin: 0;
  }
  #ws_tab li a {
    padding: 10px;
    display: block;
  }
  #ws_tab ul + ul {
    border-top: 1px dotted #000;
  }
  .works_tab, .staff_tab {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-right: 0;
    padding-right: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  img {
    max-width: 100%;
  }
  #naka_main_img img {
    width: 100%;
  }
  .fotter_wrapper {
    width: 100%;
  }
  #page_area {
    padding-bottom: 0;
  }
  #page_area .site_wrapper {
    padding: 4% 2% 0 !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #page_area .img_area {
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
  }
  #page_area .img_area li {
    width: calc((100% - 30px) / 4);
    padding-right: 0 !important;
    margin: 0 !important;
  }
  #page_area .img_area li img {
    width: 100%;
  }
  #page_area .btn01 {
    width: 200px;
  }
}
@media (max-width: 767px) {
  .site_wrapper {
    width: 100%;
  }
  #naka_main_img {
    text-align: center;
    padding: 5% 0;
  }
  #naka_main_img img {
    height: 30px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .sentaku {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    margin-top: 0;
  }
  #page_area {
    padding-bottom: 20px;
    min-height: inherit;
  }
  #page_area .btn01 {
    width: 200px;
  }
  #page_area .site_wrapper {
    padding: 4% 2% 0 !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
  }
  #page_area .img_area {
    margin-bottom: 0;
  }
  #page_area .img_area li {
    width: auto;
    width: 49%;
    padding-right: 0 !important;
    margin-bottom: 2%;
  }
  #page_area .img_area li:nth-child(odd) {
    margin-right: 2%;
  }
  #page_area .img_area li img {
    width: 100%;
  }
  #main_area {
    width: 100%;
  }
  #side_area {
    display: none;
  }
  .tt_style01 {
    font-size: 200%;
  }
  .tt_style01 span {
    display: block;
    margin-left: 0;
    padding-top: 0;
  }
  .tt_style02 span {
    display: block;
    margin-left: 0;
    padding-top: 0;
  }
  .studio-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }
  .googlemap iframe {
    width: 100%;
    height: 300px;
  }
  .profile_box .photo {
    width: 40%;
    margin-left: 0;
    padding: 0;
  }
  .profile_box .photo img {
    height: auto;
  }
  .profile_box {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    position: relative;
    z-index: 1;
    border-top: 1px solid #000;
    margin-bottom: 40px;
  }
  .profile_box .txt {
    padding: 10px 0 10px 10px;
    width: 100%;
    border-top: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .profile_box .txt p:first-child {
    width: 53%;
    min-height: 144px;
  }
  .profile_box .txt a {
    word-break: break-all;
  }
  .profile_box.photo_right .photo {
    position: absolute;
    right: 0;
    top: 5px;
  }
  .profile_box.photo_left .photo {
    position: absolute;
    left: 0;
    top: 5px;
  }
  .profile_box.photo_left .txt {
    padding: 10px 10px 10px 0;
  }
  .profile_box.photo_left p:first-child {
    margin-left: auto;
  }
  input[type=text] {
    width: 100%;
  }
  textarea {
    width: 100%;
  }
  #contact #pp .pp_content {
    margin: 0 0 20px !important;
    padding: 10px;
  }
  .contact_input table tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .contact_input table tr th {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
  }
  .contact_input table tr td {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
  }
  .contact_input table #state {
    margin-top: 15px;
  }
}