@charset "utf-8";
/*
Template:   habakiri
Theme Name: kudousekizai
*/

/*----------------------------------------------
Common
----------------------------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body * {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  word-break: normal;
}

.sp-none {}

.pc-none {
  display: none;
}

.mdl-none {
  display: block;
}

.mdl-block {
  display: none;
}

.responsive-nav-contents {
  box-shadow: none;
}

@media screen and (max-width:991px) {
  .mdl-none {
    display: none;
  }

  .mdl-block {
    display: block;
  }
}

@media screen and (max-width:767px) {
  .sp-none {
    display: none;
  }

  .pc-none {
    display: block;
  }
}

/*----------------------------------------------
Text
----------------------------------------------*/
html {
  font-size: 100%;
}

body {
  font-size: 16px;
  line-height: 1.8;
  color: #0a2557;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

body * {
  word-break: break-all;
}

a {
  text-decoration: none;
  transition: all 0.8s ease 0s;
}

a:hover {
  text-decoration: none;
  transition: all 0.8s ease 0s;
}

a:focus {
  outline: 1px solid transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
  font-weight: 400;
}

.text--center {
  text-align: center;
}

.text--right {
  text-align: right;
}

.description {
  margin-bottom: 2rem;
  text-align: center;
}

@media screen and (max-width:991px) {
  body {
    font-size: 14px;
  }

  .description {
    text-align: left;
  }
}



/*----------------------------------------------
Image
----------------------------------------------*/
img {
  max-width: 100%;
  height: auto;
  transition: all 0.4s;
}

a img:hover {
  filter: opacity(0.75);
}

/*----------------------------------------------
filter
----------------------------------------------*/
a.invert:hover {
  filter: invert(100%);
}

a.contrast:hover {
  filter: contrast(120%);
}

a.blur:hover {
  filter: blur(1px);
}

/*----------------------------------------------
title
----------------------------------------------*/
h3 {
  font-size: 3rem;
  font-weight: bold;
  border-bottom: 1px solid #0a2557;
  padding: 0 0 0.5rem 1rem;
  margin-bottom: 2rem;

  span {
    font-size: 1.5rem;
  }
}

h4 {
  font-size: 1.5rem;
  font-weight: bold;
}

h5 {
  font-size: 1.25rem;
  font-weight: bold;
}

.commonTtl {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;

}

.commonTtl--main {
  color: #2B6CE5;
  font-size: 3.75rem;
}

.commonTtl--sub {
  font-size: 1.25rem;
}

.itemTtl {
  text-align: center;
  margin-bottom: 2rem;

  img {
    margin-bottom: 1rem;
  }
}

@media screen and (max-width:767px) {
  h3 {
    font-size: 1.5rem;

    span {
      font-size: 0.9rem;
    }
  }

  h4 {
    font-size: 1.25rem;
  }

  h5 {
    font-size: 1.1rem;
  }
}

/*----------------------------------------------
button
----------------------------------------------*/
.btn {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0;
  font-size: 1rem;

  a {
    display: block;
    border-radius: 2rem;
    padding: 1rem;
    font-weight: bold;
  }
}

.btn--short {
  width: 100%;
  margin: 0 auto;

  a {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 360px;
    border-radius: 2rem;
    padding: 1rem;
    text-align: center;
  }
}

.btn--bb {
  a {
    background-color: #0a2557;
    color: #fff;
    border: 1px solid #0a2557;
  }

  a:hover {
    background-color: rgba(0, 0, 0, 0);
    color: #0a2557;
  }
}

.btn--white {
  a {
    background-color: #fff;
    color: #0a2557;
    border: 1px solid #fff;
  }

  a:hover {
    background-color: #0a2557;
    color: #fff;
  }
}

.btn--blue {
  a {
    background-color: #fff;
    color: #2B6CE5;
    border: 1px solid #fff;
  }

  a:hover {
    background-color: #2B6CE5;
    color: #fff;
  }
}


/*----------------------------------------------
table
----------------------------------------------*/
table {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  border: 0;

  thead {
    tr {

      th,
      td {
        background-color: rgba(0, 0, 0, 0) !important;
        font-weight: normal;
        padding: 0.5rem 1rem;
      }
    }
  }
}

/*----------------------------------------------
animation
----------------------------------------------*/

/*----------------------------------------------
header
----------------------------------------------*/
.header {
  position: fixed;
  width: 100%;
  z-index: 1000 !important;
  height: 80px;

  .headerWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
  }
}

.logo {
  padding: 0.5rem;

  a {
    display: inline-block;
    max-width: 240px;

    .logoImg {
      max-width: 100%;
      width: 100%;
    }
  }
}

.menuWrap {
  display: flex;
  justify-content: end;
  align-items: center;
  font-weight: bold;
  line-height: 1.5;
  height: 80px;

  .navi {
    list-style: none;
    display: flex;
    height: 100%;

    .naviItem {
      a {
        color: #0a2557;
        display: block;
        padding: 1rem;
        height: 100%;

        span {
          display: block;
          text-align: center;
        }

        span:nth-of-type(2) {
          font-size: 12px;
          letter-spacing: 0.05em;
        }
      }

      a:hover {
        color: #2B6CE5;
      }
    }
  }

  .menuTel {
    background-color: #2B6CE5;


    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 1rem;
      text-align: center;
      height: 80px;

      span {
        display: block;
        color: #fff;
        text-align: center;
      }

      span:nth-of-type(1) {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
      }

      span:nth-of-type(2) {
        font-size: 1.75rem;
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: 0.05em;
      }

      img {
        margin-top: 0.5rem;
        height: 30px;
      }
    }
  }

  .manuForm {
    background-color: #0a2557;


    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 1rem;
      text-align: center;
      height: 80px;

      span {
        display: block;
        color: #fff;
        line-height: 1.0;
      }

      img {
        margin-top: 0.75rem;
        height: 30px;
      }
    }
  }

  .menuMini__bar {
    display: none;
  }

  .menuMini {
    display: none;
  }
}

@media screen and (max-width:1399px) {
  .menuWrap {
    .navi {
      display: none;
    }

    .menuMini__bar {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      width: 86px;

      span {
        display: inline-block;
        width: 2rem;
        height: 2px;
        background-color: #0a2557;
        transition: 0.5s;
      }
    }

    .menuMini__bar.active {
      span:nth-of-type(1) {
        transform: rotate(-45deg);
        transition: 0.5s;
        background-color: #0a2557;
      }

      span:nth-of-type(2) {
        display: none;
        transition: 0.5s;
      }

      span:nth-of-type(3) {
        transform: rotate(45deg);
        margin-top: -11px;
        transition: 0.5s;
        background-color: #0a2557;
      }
    }

    .menuMini {
      display: block;
      z-index: 998 !important;
      position: fixed;
      top: 80px;
      right: -120%;
      width: 30%;
      height: 100vh;
      background-color: #fff;
      transition: all 0.5s;

      .menuMini__navi {
        list-style: none;
        padding: 2rem;

        .naviItem {
          a {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border-bottom: 1px solid #2B6CE5;
            color: #2B6CE5;

            span:nth-of-type(1) {
              font-size: 1.5rem
            }
          }
        }
      }
    }

    .menuMini.active {
      right: 0;
    }
  }
}

@media screen and (max-width:991px) {
  .menuWrap {
    .menuMini__bar {
      width: 60px;
    }

    .menuMini {
      top: 80px;
      width: 70%;

      .menuMini__navi {
        padding: 1rem;

        .naviItem {
          a {

            span:nth-of-type(1) {
              font-size: 1.25rem
            }
          }
        }
      }
    }

    .menuTel {
      background-color: #2B6CE5;


      a {
        padding: 0.5rem;
        white-space: nowrap;

        img {
          margin-top: 0.5rem;
          height: 24px;
        }
      }
    }

    .manuForm {

      a {
        padding: 0.5rem;

        white-space: nowrap;

        img {
          margin-top: 0.5rem;
          height: 24px;
        }
      }
    }
  }
}

@media screen and (max-width:767px) {
  .header {
    height: 48px;

    .headerWrap {
      .logo {
        a {
          .logoImg {
            height: 32px;
          }
        }
      }

      .menuWrap {
        height: 48px;

        .menuTel {
          div {
            a {
              img {
                margin-top: 0;
              }

              height: 48px;

              span {
                display: none !important;
              }
            }
          }

        }

        .manuForm {
          a {
            height: 48px;

            img {
              margin-top: 0;
            }

            span {
              display: none !important;
            }
          }
        }
      }

      .menuMini {
        top: 48px;
        width: 80%;
      }
    }
  }
}

/*----------------------------------------------
footer
----------------------------------------------*/
.footer {
  background-color: #fff !important;

  .contact {
    color: #fff;
  }

  .footerWrap {
    .detail__flex {
      gap: 1rem;

      .footerItem {
        width: 40%;
        display: flex;
        gap: 1rem;

        .footerAdd {
          width: 60%;
        }

        .footerMenu {
          width: 40%;

          .menu-globalmenu-container {
            .menu {
              list-style: none;

              li {
                a {
                  color: #0a2557;
                  display: block;
                  padding: 0.5rem;
                }
              }
            }
          }
        }
      }

      .footerMap {
        width: 60%;
      }
    }
  }

  .copyright {
    background-color: #0a2557;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.5rem;
    text-align: center;
  }
}

@media screen and (max-width:991px) {
  .footerWrap {
    .detail__flex {
      gap: 1rem;

      .footerItem {
        width: 100% !important;
      }

      .footerMap {
        width: 100% !important;
      }
    }
  }
}

/*----------------------------------------------
main
----------------------------------------------*/
/*--- main common ---*/
#main {
  margin: 0;
  margin-top: 80px;
  padding: 0;
}

@media screen and (max-width:767px) {
  #main {
    margin-top: 48px;
  }
}

/*----------------------------------------------
page
----------------------------------------------*/
/*--- page common ---*/
section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 0;
}

.section__background {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.section__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 0;
}

.section__background--color {
  background-color: #EAF1FF;
}

.section__background--colorbb {
  background-color: #0a2557;
}

.detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.detail__flex {
  display: flex;
  gap: 2rem;
}

.pageMV {
  width: 100vw;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0;
}

@media screen and (max-width:1124px) {
  section {
    padding: 3rem 2rem;
  }

  .section__background {
    padding: 0;
  }

  .section__inner {
    padding: 3rem 2rem;
  }
}

@media screen and (max-width:991px) {
  .detail__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .detail__flex {
    flex-direction: column;
  }
}

@media screen and (max-width:767px) {
  section {
    padding: 1.5rem;
  }


  .section__inner {
    padding: 1.5rem;
  }
}

/*--  works ---*/
.worksWrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;

  .worksItem {
    padding: 3rem;
    background-color: #fff;

    .worksText {
      margin-top: 2rem;
      display: flex;
      gap: 2rem;

      .worksMinute {
        width: 30%;
        padding: 1rem;
        background-color: #EAF1FF;
      }
    }
  }
}

@media screen and (max-width:767px) {

  /*--  works ---*/
  .worksWrap {
    .worksItem {
      padding: 1rem;

      .worksText {
        margin-top: 1rem;
        gap: 1rem;
        flex-direction: column;

        .worksMinute {
          width: 100% !important;
          padding: 0.5rem;
        }
      }
    }
  }
}


/*----------------------------------------------
front
----------------------------------------------*/
/*--  top ---*/
/*mv*/
.toppage {
  .mv {
    position: relative;
  }

  .swiper-wrapper {
    width: 100% !important;

    .swiper-slide {
      width: 100%;
      height: 100%;
      text-align: center;

      img {
        aspect-ratio: 1/1;
        object-fit: cover;
      }
    }
  }

  .catchCopy {
    z-index: 999;
    position: absolute;
    top: 6rem;
    left: 18%;
  }

  @media screen and (max-width:1199px) {
    .catchCopy {
      left: 3%;
    }
  }

  /*service*/
  .serviceList {
    margin-bottom: 2rem;
    justify-content: center;
  }

  .serviceList__item {
    text-align: center;

    a {
      margin-top: 0.5rem;
      display: block;

      img {
        max-width: 120px;
      }
    }
  }

  .serviceDetail {}

  .serviceDetail__item {
    background-color: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
  }
}

@media screen and (max-width:991px) {
  .serviceList {
    flex-direction: row;
    gap: 1rem;

    .serviceList__item {
      h5 {
        font-size: 1rem;
      }
    }
  }
}

@media screen and (max-width:767px) {
  .serviceList {

    .serviceList__item {
      h5 {
        font-size: 0.75rem;
        display: none ;
      }
      a{
        img{
          max-width: 60px;
        }
      }
    }
  }
}

/*merchandise*/
.merchandiseList {
  justify-content: center;

  .merchandiseItem {
    width: 33%;
    text-align: center;

    img {
      aspect-ratio: 3/2;
      object-fit: cover;
    }

    h4 {
      margin-bottom: 1rem;
    }
  }
}

/*info*/
.infoList {
  list-style: none;
  max-width: 800px;
  margin: 0 auto;

  .infoItem {

    border-bottom: 1px solid #0a2557;

    a {
      padding: 0.5rem 1rem;
      display: flex;
      align-items: center;
      gap: 2rem;
      color: #0a2557;

      span {
        display: block;
      }

      .infoDate {
        width: 75px;
      }

      .infoCat {
        background-color: #0a2557;
        color: #fff;
        font-size: 12px;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        line-height: 1.0;
      }
    }

    a:hover {
      background-color: #fff;
    }
  }

  .infoItem:first-child {
    border-top: 1px solid #0a2557;
  }
}

/*works*/
.worksITem {
  img {
    width: 60%;
  }

  .worksText {
    p {
      margin-bottom: 0.5rem;

      span {
        display: inline-block;
        background-color: #0a2557;
        color: #fff;
        padding: 0.5rem 1rem;
        line-height: 1.0;
        border-radius: 1rem;
      }
    }

    h4 {
      margin-bottom: 0.5rem;
    }
  }
}

/*about*/
.aboutItem {
  margin-bottom: 3rem;

  .detail__flex {

    .aboutTable {
      width: 50%;
    }

    .aboutImg {
      width: 50%;

      img {
        aspect-ratio: 4/3;
        object-fit: cover;
      }
    }
  }
}


@media screen and (max-width:991px) {

  /*merchandise*/
  .merchandiseList {

    .merchandiseItem {
      width: 100% !important;
    }
  }

  .worksITem {
    img {
      width: 100% !important;
    }
  }

  /*about*/
  .aboutItem {

    .detail__flex {

      .aboutTable {
        width: 100% !important;
      }

      .aboutImg {
        width: 100% !important;

      }
    }
  }
}

@media screen and (max-width:767px) {
  .catchCopy {
    top: 4.5rem !important;

    img {
      width: 80vw;
    }
  }

  /*service*/
  .serviceDetail__item {
    padding: 1rem !important;
  }

}

/*----------------------------------------------
page works
----------------------------------------------*/
.worksTtl {
  display: block;
  margin-bottom: 1rem;
  background-color: #0a2557;
  padding: 0.5rem;
  color: #fff;
}

.worksInner {
  img {
    width: 100%;
  }
}

/*----------------------------------------------
page contact
----------------------------------------------*/
.page.contact {
  section {
    .contactTel {
      padding: 3rem;
      background-color: #2B6CE5;
      color: #fff;
      text-align: center;
    }

    .contactForm {
      padding: 3rem;
      background-color: #EAF1FF;

      .formItem {
        margin-bottom: 2rem;

        .formTtl {
          margin-bottom: 0.5rem;
          font-weight: bold;

          span {
            display: inline-block;
            margin-left: 1rem;
            color: #fff;
            background-color: #2B6CE5;
            line-height: 1.0;
            padding: 0.25rem 1rem;
            border-radius: 1.5rem;
          }
        }

        p {
          width: 100%;

          span {
            display: block;

            input,
            textarea {
              width: 100%;
              padding: 0.5rem;
              border-radius: 0.25rem;
              color: #0a2557;
              border: 1px solid #0a2557;
            }

            .wpcf7-radio {
              display: flex;

              .wpcf7-list-item {
                label {
                  display: flex;

                  .wpcf7-list-item-label {
                    font-weight: normal;
                  }

                  input {
                    width: 1rem;
                    padding: 0;
                  }
                }
              }
            }
          }
        }
      }

      .contactBtn--wrap {
        display: flex;
        justify-content: center;
        gap: 1rem;

        .btn--blue.btn--contact {
          p {

            input {
              width: 360px;
              text-align: center;
              margin: 0 auto;
              display: block;
              background-color: #2B6CE5;
              color: #fff;
              border: 1px solid #2B6CE5;
              border-radius: 2rem;
              padding: 1rem;
              font-weight: bold;
              text-decoration: none;
              transition: all 0.8s ease 0s;
            }

            input:hover {
              background-color: #fff;
              color: #2B6CE5;
              text-decoration: none;
              transition: all 0.8s ease 0s;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width:991px) {
  .wpcf7-form-control {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .wpcf7-list-item {
      label {
        input {
          margin-right: 0.5rem;
        }
      }
    }
  }
}

@media screen and (max-width:767px) {
  .page.contact {
    section {
      .contactTel {
        padding: 2rem;
      }

      .contactForm {
        padding: 1rem;

        .contactBtn--wrap {
          display: flex;
          justify-content: center;
          gap: 1rem;

          .btn--blue.btn--contact {
            p {

              input {
                width: 180px;
                max-width: 100%;
              }


            }
          }
        }
      }
    }
  }
}


/*----------------------------------------------
archives
----------------------------------------------*/
/*info*/
.infoList {
  list-style: none;
  max-width: 800px;
  margin: 0 auto;

  .infoItem {

    border-bottom: 1px solid #0a2557;

    a {
      padding: 0.5rem 1rem;
      display: flex;
      align-items: center;
      gap: 2rem;
      color: #0a2557;

      span {
        display: block;
      }

      .infoDate {
        width: 75px;
      }

      .infoCat {
        background-color: #0a2557;
        color: #fff;
        font-size: 12px;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        line-height: 1.0;
      }
    }

    a:hover {
      background-color: #fff;
    }
  }

  .infoItem:first-child {
    border-top: 1px solid #0a2557;
  }
}

.pagenation {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;

  span {
    display: block;
    width: 32px;
    height: 32px;
    text-align: center;
    border: 1px solid #0a2557;
    border-radius: 2rem;
  }

  a {
    display: block;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: #0a2557;
    color: #fff;
    border: 1px solid #0a2557;
    border-radius: 2rem;
  }

  a:hover {
    background-color: #2B6CE5;
    color: #fff;
  }
}

@media screen and (max-width:767px) {
  .infoList {

    .infoItem {

      a {
        gap: 0.5rem !important;
        flex-wrap: wrap;
      }
    }
  }
}

/*----------------------------------------------
single
----------------------------------------------*/
.singleSection {
  padding-bottom: 3rem;
}

.categoryWrap {
  display: inline-block;
  background-color: #2B6CE5;
  color: #fff;
  padding: 0.5rem;
  line-height: 1.0;
  border-radius: 0.25rem;
}

@media screen and (max-width:767px) {
  .singleTtl {
    font-weight: bold;
    font-size: 1.5rem;
  }
}


@media screen and (max-width:1264px) {}

@media screen and (max-width:991px) {}

@media screen and (max-width:767px) {}