@charset "UTF-8";
.ham {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.ham span {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  transition: 0.3s;
}
.ham span:first-child {
  top: 0;
}
.ham span:nth-child(2) {
  top: calc(50% - 3px / 2);
}
.ham span:nth-child(3) {
  bottom: 0;
}

.ham.open span:first-child {
  top: 40%;
  transform: rotate(-45deg);
}
.ham.open span:nth-child(2) {
  opacity: 0;
}
.ham.open span:nth-child(3) {
  top: 40%;
  bottom: auto;
  transform: rotate(45deg);
}

@media screen and (max-width: 1200px) {
  /* common */
  .di-m {
    display: block;
  }
  .ta-l-m {
    text-align: left;
  }
  .ta-r-m {
    text-align: right;
  }
  .ta-c-m {
    text-align: center;
  }
  .flex-wr {
    display: block;
  }
  .flex-wr .flex-c {
    width: 100%;
  }
  .wm100 {
    width: 100%;
  }
  .backtop {
    right: 15px;
    bottom: 20px;
    width: 50px;
  }
  /* header */
  .g-nav-wr {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: -10;
    opacity: 0;
    background-color: #46d0d3;
    transition: 0.2s;
  }
  .g-nav-wr.open {
    display: block;
    height: auto;
    z-index: 6000;
    opacity: 1;
  }
  .g-nav {
    opacity: 0;
    transition: 0.5s;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateY(-45%) translateX(-50%);
    display: block;
  }
  .g-nav li {
    margin-bottom: 30px;
    margin-right: 0;
  }
  .g-nav li:last-child {
    margin-bottom: 0;
  }
  .g-nav li a {
    color: #fff;
    font-size: 2rem;
  }
  .g-nav.open {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%);
  }
  .h-l {
    width: 135px;
  }
  .h-r {
    width: calc(100% - 140px);
    padding-right: 20px;
  }
  .g-nav li {
    margin-right: auto;
  }
  /* footer */
  .aboutbox-r {
    transform: none;
  }
  /* $br-p以下で表示する要素 */
  .res-on {
    display: block;
  }
  /* $br-p以下で非表示 */
  .res-off {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
  .di-s {
    display: block;
  }
  .ta-l-s {
    text-align: left;
  }
  .ta-r-s {
    text-align: right;
  }
  .ta-c-s {
    text-align: center;
  }
  .ws100 {
    width: 100%;
  }
  /* $br-p2以下で表示する要素 */
  .phone-on {
    display: block !important;
  }
  .ham-wr {
    top: 35px;
  }
  .header {
    padding-top: 25px;
  }
  .h-title {
    font-size: 2.6rem;
  }
  .h-r {
    padding-right: 30px;
  }
  .btn-contact {
    font-size: 1.4rem;
    max-width: 225px !important;
  }
  .c2-list {
    display: block;
  }
  .c2-list li {
    max-width: 100%;
    width: 100%;
    margin-bottom: 30px;
  }
  .c3-list {
    display: block;
  }
  .c3-list li {
    width: 100%;
    margin-bottom: 30px;
  }
  .sectitle {
    text-align: center;
    margin-bottom: 60px;
  }
  .mb-no {
    margin-bottom: 0;
  }
  .kv-wr {
    padding: 120px 0 110px;
  }
  .kv-text {
    margin: 30px auto 0;
  }
  .kv-r {
    margin: 60px auto 0;
    width: 80%;
  }
  .kv-list-sec {
    margin-top: -60px;
  }
  .kv-list {
    display: block;
  }
  .kv-list li {
    width: 100%;
    margin-bottom: 30px;
  }
  .kv-list li .l {
    width: 70px;
    align-content: center;
  }
  .kv-list li .r {
    width: calc(100% - 70px);
    padding: 15px;
  }
  .logo-list {
    display: flex;
  }
  .logo-list li img {
    height: 56px;
  }
  .feature-list li {
    border: 4px solid #46d0d3;
    border-radius: 40px;
    padding: 20px;
    margin-bottom: 40px;
  }
  .feature-point {
    width: 100px;
    margin: 0 auto;
  }
  .featurebox-img {
    margin: 40px auto 0;
    max-width: 140px;
  }
  .c4-list li {
    width: 48%;
    margin-bottom: 60px;
  }
  .funkbox {
    padding: 50px 30px;
  }
  .funk-list li {
    padding: 50px 30px;
  }
  .product-list li {
    margin: 0 auto 40px;
    max-width: 360px;
  }
  .con-case {
    max-width: calc(100% + 20px);
  }
  .caselist {
    border-radius: 35px;
  }
  .caselist li {
    flex-direction: column-reverse;
    margin: auto 10px;
  }
  .caselist li .fs-20 {
    font-size: 1.6rem !important;
  }
  .caselist li .fs-26 {
    font-size: 1.8rem !important;
  }
  .caselist li .l {
    height: auto !important;
    width: 100%;
    padding: 40px 30px;
    border-radius: 0 0 35px 35px;
  }
  .caselist li .r {
    width: 100%;
    border-radius: 35px 35px 0 0;
  }
  .caselist li .r img {
    border-radius: 35px 35px 0 0;
  }
  .case-img {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .case-img::before {
    content: "";
    display: block;
    padding-top: 65%;
  }
  .case-img img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .case-title {
    margin-top: 20px;
    font-size: 1.8rem !important;
  }
  .case-company {
    font-size: 1.6rem !important;
  }
  .arrow-case {
    transform: translateX(-50%);
    top: calc(100% + 40px);
  }
  .arrow-case-l {
    left: calc(50% - 80px);
  }
  .arrow-case-r {
    right: auto;
    left: calc(50% + 80px);
  }
  .flow-r {
    padding-left: 30px;
  }
  .flowbox {
    position: relative;
    margin-bottom: 40px;
  }
  .flowbox::before {
    top: 5px;
    left: -40px;
  }
  .flowbox-last::after {
    content: "";
    position: absolute;
    background-color: #ddf6f7;
    width: 24px;
    height: 50px;
    top: 29px;
    left: -40px;
  }
  .flowline {
    height: 80%;
    width: 2px;
    top: 5px;
    left: 1px;
  }
  .flowtext {
    min-height: auto;
  }
  .flow-img {
    margin: 60px auto 0;
    position: static;
    bottom: auto;
    left: auto;
    width: 65%;
  }
  .question-list li {
    background-color: #f4f4f4;
    border-radius: 20px;
    padding: 40px 30px;
  }
  .question-title {
    padding-top: 0px;
    width: calc(100% - 35px);
  }
  .question-text {
    margin-top: 20px;
    padding-left: 35px;
  }
  .question {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    transform: translateX(-10px);
  }
  .voice-list li {
    position: relative;
    max-width: 300px;
    background-color: #eefbfb;
    border-radius: 38px;
    padding: 50px 25px;
    margin: 30px 10px;
  }
  .voice-company {
    margin-top: 35px;
  }
  .voice-name {
    margin-top: 10px;
  }
  .voice-text {
    min-height: 240px;
  }
  .dot {
    width: 50px;
    position: absolute;
  }
  .dot1 {
    left: 20px;
    top: -20px;
  }
  .dot2 {
    right: 20px;
    bottom: -20px;
  }
  .companybox {
    padding: 50px 30px;
  }
  .list-flex li .l {
    width: 85px;
  }
  .list-flex li .r {
    width: calc(100% - 85px);
  }
  .company-line {
    margin: 40px auto;
    position: static;
    transform: none;
    height: 2px;
    width: 100%;
  }
  .form-con {
    padding: 80px 30px 70px;
  }
  .form-wr {
    text-align: left;
  }
  .form-wr br {
    display: none;
  }
  .form-row {
    margin-bottom: 30px;
  }
  .form-date {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
  }
  .form-desire {
    padding-top: 4px;
  }
  .form-cal {
    width: 100%;
    display: block;
    margin-right: 0;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .form-time {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .form-checkbox {
    margin-bottom: 40px;
  }
  .form-checkbox label span {
    margin-right: 30px;
  }
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border-radius: 3px;
  }
  .fadein,
  .fadein-wr,
  .fadein-n,
  .textyle,
  .kv-anime,
  .kv-list,
  .order,
  .order2,
  .opa0,
  .sectitle,
  .feature-line {
    opacity: 1 !important;
    visibility: visible !important;
    transition: 0s !important;
    transform: none !important;
  }
  .fadein li,
  .fadein-wr li,
  .fadein-n li,
  .textyle li,
  .kv-anime li,
  .kv-list li,
  .order li,
  .order2 li,
  .opa0 li,
  .sectitle li,
  .feature-line li {
    opacity: 1 !important;
    visibility: visible !important;
    transition: 0s !important;
    transform: none !important;
  }
  .fadein span,
  .fadein-wr span,
  .fadein-n span,
  .textyle span,
  .kv-anime span,
  .kv-list span,
  .order span,
  .order2 span,
  .opa0 span,
  .sectitle span,
  .feature-line span {
    opacity: 1 !important;
    visibility: visible !important;
    transition: 0s !important;
    transform: none !important;
  }
  /* $br-p2以下で非表示 */
  .phone-off {
    display: none !important;
  }
}/*# sourceMappingURL=mobile.css.map */