@charset "UTF-8";
/*
Theme Name: zumistyle
Theme URI: https://example.com/
Author: zumistyle
Author URI: https://example.com/
Description: zumiのスタイルです。
Version: 1.0
*/
/***********************色の設定****************************/
/**************************サイズの定義*****************************/
/****************メディアクエリの設定*********************/
/*********************pxをremに変換***************************/
/*****基準は16px 使用時はfont-size: rem(10)のように記載pxはハぶく****/
/*****************pxをvwに変換**********************/
/***************************************************************************************************************************************************/
* {
  margin: 0;
  padding: 0; }

body {
  background-color: #EEF9FF;
  height: 100%;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; }

header {
  width: 100vw;
  height: 80px;
  background-color: #82BAD5; }
  header .header-inner {
    position: relative;
    height: 100%;
    margin: auto; }
    header .header-inner h1.header-logo {
      /*ロゴの表示*/
      width: 12.5vw;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%); }
      @media screen and (min-width: 480px) {
        header .header-inner h1.header-logo {
          /*480px以下*/
          width: 12.5vw; } }
      @media screen and (min-width: 768px) {
        header .header-inner h1.header-logo {
          /*768px以下*/
          width: 8.4635416667vw; } }
      @media screen and (min-width: 1280px) {
        header .header-inner h1.header-logo {
          /*1280px以下*/
          width: 5.46875vw; } }
      header .header-inner h1.header-logo a {
        display: block;
        width: 100%;
        height: 100%; }
        header .header-inner h1.header-logo a img {
          width: 100%;
          height: 100%; }
    header .header-inner .hamburger-menu {
      /*ハンバーガーメニュー*/
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%) translateX(-50%);
      color: #5B5B5B;
      margin-left: 30px;
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 5px; }
      @media screen and (min-width: 768px) {
        header .header-inner .hamburger-menu {
          /*768px以下*/
          width: 6.5104166667vw; } }
      @media screen and (min-width: 1280px) {
        header .header-inner .hamburger-menu {
          /*1280px以下*/
          display: none; } }
      header .header-inner .hamburger-menu span {
        display: inline-block;
        transition: all .4s;
        /*アニメーションの設定*/
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background: #5B5B5B;
        width: 45%; }
      header .header-inner .hamburger-menu span:nth-of-type(1) {
        top: 15px; }
      header .header-inner .hamburger-menu span:nth-of-type(2) {
        top: 23px; }
      header .header-inner .hamburger-menu span:nth-of-type(3) {
        top: 31px; }
    header .header-inner .hamburger-menu.active span:nth-of-type(1) {
      /*********押した後の変化********/
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%; }
    header .header-inner .hamburger-menu.active span:nth-of-type(2) {
      opacity: 0; }
    header .header-inner .hamburger-menu.active span:nth-of-type(3) {
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%; }
    header .header-inner .header-menu {
      display: none;
      top: 80px;
      box-shadow: 5px 5px 0px #fff;
      width: 100vw;
      height: 300px;
      background-color: #A9D6EB;
      z-index: 999;
      position: relative; }
      header .header-inner .header-menu ul li {
        padding: 5px 20px 5px 30px;
        border-bottom: 1px solid #888888;
        letter-spacing: 2px;
        transition: .2s;
        font-weight: bold; }
        header .header-inner .header-menu ul li:hover {
          background-color: #82BAD5; }
        header .header-inner .header-menu ul li a {
          text-decoration: none;
          color: #5B5B5B;
          width: 100%;
          height: 100%;
          display: block; }
      @media screen and (min-width: 768px) {
        header .header-inner .header-menu {
          /*768px以下*/
          width: 500px;
          /*tabサイズの時メニューが500pxで表示される**/
          box-shadow: none; } }
      @media screen and (min-width: 1280px) {
        header .header-inner .header-menu {
          /*1280px以下*/
          /*pc表示の時メニューcss***/
          display: block;
          height: 80px;
          position: absolute;
          top: 0;
          right: 0;
          background-color: transparent; }
          header .header-inner .header-menu ul {
            width: 100%;
            height: 100%; }
            header .header-inner .header-menu ul li {
              display: inline-block;
              padding: 5px;
              padding-top: 40px;
              height: 100%;
              margin-top: 0;
              border: none; }
              header .header-inner .header-menu ul li:nth-child(1), header .header-inner .header-menu ul li:nth-child(2) {
                margin-right: 10px; }
              header .header-inner .header-menu ul li:hover {
                background-color: #EEF9FF; } }

footer {
  width: 100vw;
  background-color: #EEF9FF;
  height: 87px;
  text-align: center; }
  footer p {
    line-height: 87px;
    font-size: 0.75rem; }

main {
  /*index.htmlのcss*/
  width: 100vw;
  height: auto; }
  main .greeting_inner {
    background-color: #A9D6EB; }
    main .greeting_inner .greeting_erea {
      margin: auto;
      text-align: center;
      padding-top: 7.7083333333vw;
      margin-bottom: 8.671875vw; }
      main .greeting_inner .greeting_erea .greeting_image {
        width: 47.9166666667vw;
        margin: auto;
        max-width: 300px;
        height: auto; }
      main .greeting_inner .greeting_erea .greeting {
        font-size: 2.875rem;
        color: #FC9C9D;
        font-weight: bold;
        margin-top: -50px; }
    main .greeting_inner .latest_works {
      margin-left: 5.625vw;
      margin-top: 37px;
      padding-bottom: 37px; }
      @media screen and (min-width: 768px) {
        main .greeting_inner .latest_works {
          /*768px以下*/
          margin-left: 23.828125vw;
          max-width: 960px;
          margin: auto;
          padding-bottom: 0; } }
      main .greeting_inner .latest_works p {
        color: #5B5B5B;
        font-size: 1.875rem; }
      main .greeting_inner .latest_works ul li {
        list-style: none;
        margin-bottom: 3.125vw;
        height: 19.375vw; }
        main .greeting_inner .latest_works ul li a {
          display: block;
          width: 100%;
          height: 100%; }
          main .greeting_inner .latest_works ul li a img {
            display: inline-block;
            width: 19.375vw;
            max-width: 93px;
            height: auto; }
          main .greeting_inner .latest_works ul li a .latest_works_box {
            height: 19.375vw;
            display: inline-block;
            text-decoration: none;
            vertical-align: top;
            padding-left: 2.5vw; }
            @media screen and (min-width: 768px) {
              main .greeting_inner .latest_works ul li a .latest_works_box {
                /*768px以下*/
                height: auto;
                padding-left: 1.5625vw; } }
            main .greeting_inner .latest_works ul li a .latest_works_box .latest_works_title {
              font-size: 0.9375rem; }
            main .greeting_inner .latest_works ul li a .latest_works_box .latest_works_time {
              font-size: 0.9375rem; }
        @media screen and (min-width: 768px) {
          main .greeting_inner .latest_works ul li {
            /*768px以下*/
            display: inline-block;
            width: 32%;
            height: auto; } }
  main .intro {
    border: 1px solid #5B5B5B;
    width: 64.7916666667vw;
    margin: 10.4166666667vw auto;
    background-color: #fff;
    text-align: center;
    padding: 4.5833333333vw 13.125vw; }
    main .intro h3 {
      font-size: 1.875rem;
      color: #FC9C9D; }
      @media screen and (min-width: 768px) {
        main .intro h3 {
          /*768px以下*/
          font-size: 1.875rem; } }
    main .intro p {
      font-size: 0.875rem;
      padding: 20px 0; }
    @media screen and (min-width: 768px) {
      main .intro {
        /*768px以下*/
        width: 62.5vw; } }
    main .intro .link_btn {
      width: 100%;
      border-radius: 5px;
      background-color: #FC9C9D;
      border: none;
      height: 19.5833333333vw;
      position: relative; }
      main .intro .link_btn a {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        line-height: 19.5833333333vw; }
        @media screen and (min-width: 768px) {
          main .intro .link_btn a {
            /*768px以下*/
            line-height: 7.34375vw; } }
      main .intro .link_btn:before {
        position: absolute;
        top: -3px;
        left: -3px;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        border: 2px solid #5B5B5B;
        transition: .3s;
        content: '';
        pointer-events: none; }
      main .intro .link_btn:hover:before {
        top: 0;
        left: 0; }
      @media screen and (min-width: 768px) {
        main .intro .link_btn {
          /*768px以下*/
          height: 7.578125vw; } }
    main .intro .link_btn_b {
      margin: auto;
      border: none;
      display: block;
      background-color: inherit;
      margin-top: 27px;
      position: relative;
      transition: .3s; }
      main .intro .link_btn_b:after {
        display: block;
        content: url("../img/bottomline.svg");
        width: 80px;
        transform: scale(-1, 1);
        margin: auto;
        margin-top: -10px; }
      main .intro .link_btn_b a {
        text-decoration: none;
        font-size: 0.875rem; }
      main .intro .link_btn_b:hover {
        opacity: 0.3; }

/**************************パンくずリスト************************************/
.breadcrumb_trail {
  max-width: 960px;
  margin: 10px auto; }
  .breadcrumb_trail ul li {
    list-style: none;
    display: inline-block; }
    .breadcrumb_trail ul li a {
      font-size: 0.875rem;
      text-decoration: none; }
    .breadcrumb_trail ul li:after {
      content: '>';
      width: 20px;
      height: 20px;
      padding: 9px; }

/**************************archiveおよびworkのcss************************************/
.menu_title_box {
  text-align: center; }
  .menu_title_box h2 {
    font-size: 1.875rem;
    color: #5B5B5B; }
  .menu_title_box span {
    font-size: 1.25rem;
    color: #5B5B5B; }

.tab_container {
  width: fit-content;
  margin: auto; }
  .tab_container li {
    width: 31.25vw;
    height: 9.1666666667vw;
    margin-top: 6.6666666667vw;
    line-height: 9.1666666667vw;
    border-radius: 5px;
    background-color: #FC9C9D;
    position: relative;
    border: none;
    font-size: 0.625rem;
    list-style: none;
    display: inline-block;
    text-align: center; }
    .tab_container li a {
      display: block;
      text-decoration: none;
      width: 100%;
      height: 100%;
      color: #5B5B5B; }
    @media screen and (min-width: 768px) {
      .tab_container li {
        /*768px以下*/
        width: 19.53125vw;
        height: 5.7291666667vw;
        margin-top: 4.1666666667vw;
        line-height: 5.7291666667vw;
        font-size: 0.9375rem; } }
    .tab_container li:before {
      position: absolute;
      top: -3px;
      left: -3px;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      border: 2px solid #5B5B5B;
      transition: .3s;
      content: '';
      pointer-events: none; }
    .tab_container li:hover:before {
      top: 0;
      left: 0; }

.thum_container {
  width: 64.5833333333vw;
  height: auto;
  margin: auto;
  margin-top: 3.75vw;
  margin-bottom: 8.125vw; }
  @media screen and (min-width: 768px) {
    .thum_container {
      /*768px以下*/
      width: 75vw;
      margin-bottom: 13.28125vw; } }
  .thum_container ul {
    /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;*/
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center; }
    .thum_container ul li {
      list-style: none;
      width: 47.9166666667vw;
      height: 47.9166666667vw;
      background-color: #000;
      margin-right: 3px;
      margin-bottom: 5px; }
      .thum_container ul li a {
        text-decoration: none;
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
        position: relative; }
        .thum_container ul li a img {
          position: absolute;
          object-fit: cover;
          width: 100%;
          height: 100%; }
        .thum_container ul li a .works_box {
          position: absolute;
          padding: 5px;
          align-items: center;
          z-index: 99;
          background-color: rgba(129, 129, 129, 0.5); }
          .thum_container ul li a .works_box .works_title {
            color: #fff;
            font-size: 1.25rem; }
          .thum_container ul li a .works_box .works_time {
            color: #fff;
            font-size: 0.9375rem; }
          @media screen and (min-width: 768px) {
            .thum_container ul li a .works_box {
              /*768px以下*/
              padding: 10px; } }
      @media screen and (min-width: 480px) {
        .thum_container ul li {
          /*480px以下*/
          width: 37.5vw;
          height: 37.5vw; } }
      @media screen and (min-width: 768px) {
        .thum_container ul li {
          /*768px以下*/
          width: 19.53125vw;
          height: 19.53125vw;
          margin-right: 16px;
          margin-bottom: 16px; } }
    @media screen and (min-width: 768px) {
      .thum_container ul {
        /*768px以下*/
        grid-template-columns: auto auto auto; } }

form.sort_box {
  text-align: center;
  margin: 20px auto; }
  form.sort_box button {
    padding: 2px 10px;
    border: 2px solid #FC9C9D; }

/**************************singleのcss************************************/
.slider {
  overflow: hidden;
  max-width: 980px;
  margin: auto; }

.slick-list {
  overflow: hidden;
  width: 100% !important;
  height: fit-content !important; }

.slick-track {
  margin-left: 0;
  margin-right: 0; }

.slick-slide {
  /*これが<li>*/ }

.slick-slide img {
  padding: 10px;
  margin: 0 auto; }

.slick-slider {
  /*これは画像をスマホで拡大出来るようにするcss*/
  -ms-touch-action: auto;
  touch-action: auto; }

.slick-dots {
  bottom: 10px; }

.single_title {
  padding: 8.3333333333vw 5.2083333333vw 4.1666666667vw;
  max-width: 980px;
  margin: auto;
  color: #5B5B5B; }
  @media screen and (min-width: 768px) {
    .single_title {
      /*768px以下*/
      padding-bottom: 1.3157894737vw; } }

.single_exptext {
  padding: 3.125vw 6.25vw 14.5833333333vw;
  max-width: 980px;
  margin: auto;
  color: #5B5B5B; }
  @media screen and (min-width: 768px) {
    .single_exptext {
      /*768px以下*/
      padding-top: 1.3157894737vw;
      padding-bottom: 0.6578947368vw; } }

.prev_btn, .next_btn {
  width: 100vw;
  margin: auto;
  text-align: center; }

.prev_btn a, .next_btn a {
  text-decoration: underline; }

/**************************contactのcss************************************/
.wpcf7-form {
  display: block;
  margin: auto;
  width: 100vw; }
  .wpcf7-form input, .wpcf7-form textarea {
    border: 2px solid #FC9C9D;
    width: 100%;
    margin-top: 10px;
    padding: 5px; }
    .wpcf7-form input:active, .wpcf7-form textarea:active {
      border: 2px solid #5B5B5B; }

.wpcf7-form p {
  display: block;
  margin: auto;
  text-align: left;
  width: 320px; }
  @media screen and (min-width: 768px) {
    .wpcf7-form p {
      /*768px以下*/
      width: 500px; } }

#contact_name, #contact_mail, #contact_textarea, #contact_title {
  margin-bottom: 20px;
  width: 100%;
  display: block;
  border-radius: 2px; }

.required {
  background-color: #BD0003;
  color: #fff;
  border-radius: 2px;
  padding: 0 2px; }

#submit_btn {
  width: inherit;
  border: 2px solid #333;
  padding: 10px; }

.wpcf7-submit {
  width: 100%;
  display: block;
  border-radius: 2px;
  background-color: #BD0003;
  color: #fff;
  font-weight: bold; }

.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
  color: #cc0000;
  font-weight: bold; }

/*エラーコード*/
/*****************************pagetopのcss***************************************/
.page_top {
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
  background-color: #FC9C9D;
  box-shadow: 4px 4px 0px rgba(252, 156, 157, 0.44);
  position: fixed;
  right: 2em;
  bottom: 1em;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 2em; }

a {
  text-decoration: none; }

.back-btn, .next-btn {
  text-decoration: none;
  margin: auto;
  border: none;
  background-color: inherit;
  margin-top: 27px;
  position: relative;
  display: block;
  text-align: center;
  width: fit-content; }

.back-btn:before, .next-btn:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 15px;
  top: 0;
  left: -50px;
  border-bottom: solid 1px;
  border-left: solid 1px;
  transform: skew(-45deg); }

.next-btn:after {
  left: 100%;
  border-left: none;
  border-right: solid 1px;
  transform: skew(45deg); }

/*******************************初回ロゴ表示***************************************/
.start {
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000; }

.start p {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
  width: 280px; }

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