/* 20260601 mod szk ==================== */
/* mod for issue of background cut in PC layout */
    .kowa-ns {
        width: 1366px;
    }
/* copied from style-mobile.css and mod */
@media (max-width: 767px) {
  .header {
    padding: 16px;
    grid-template-areas:
    "logo buttons";
  }
/*  .drawer{
    width: 375px;
  }*/
  .drawer__inner {
    padding: 16px;
  }
  .drawer.is-open {
    transform: translate(-50%, 0);
  }
  .site-header__inner {
    height: 63px;
  }

  .site-header__logo {
    max-width: 197px;
    height: auto;
  }

  .site-header__nav {
    display: none;
  }
  .btn-contact,
  .drawer .button-contact {
    display: none;
  }
  .section-title {
    padding-left: 24px;
    gap: 0;
  }

  .kowa-logo{
    width: 197px;
    height: auto;
  }

  .drawer .two-col{
    grid-template-columns: 1fr;
    row-gap: 16px;
    grid-template-areas:
      "right"
      "left";
  }
  .drawer .two-col::before{
    display: none;
  }

  .service-menu-list ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }
}
/* mod szk ==================== */
@media screen and (max-width: 767px) {
    .kowa-ns {
        max-width: 100%;
    }
    .site-header__inner {
        height: 63px;
        padding: 0 16px;
    }
    .kowa-logo, 
    .site-header__logo {
        max-width: 197px;
        height: 31px;
        background-size: contain;
    }
    .two-col {
        display: block;
    }
    .section-title {
        width: auto;
        padding: 0;
    }
    .drawer {
        position: fixed;
        max-width: 100%;
        width: calc(100% - 20px);
        height: min(calc(100dvh - 16px));
    }
    .drawer.is-open {
        transform: translate(-50%, 0);
    }
    .drawer__inner {
        padding: 16px;
        box-shadow: none;
    }
    .drawer__close {
        margin-right: -8px;
    }
    .drawer__inner .kowa-logo {
        position: absolute;
        top: -48px;
        left: -8px;
        max-width: 197px;
        height: 31px;
        background-size: contain;
        margin: 0;
    }
    .drawer__inner .two-col {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 16px;
        grid-template-areas: "right" "left";
    }
    .drawer__inner .two-col .col:nth-child(1) {
        order: 2;
    }
    .drawer__inner .two-col .col:nth-child(2) {
        order: 1;
    }
    .drawer__inner .two-col#service-menu .col:nth-child(1) {
        order: 1;
    }
    .drawer__inner .two-col#service-menu .col:nth-child(2) {
        order: 2;
        transform: translateY(0px) !important;
        gap: 32px !important;
    }
    /* Drawer内 お問い合わせボタン */
    .drawer__inner .contact-button a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        padding: 12px;
        margin: 0 0 30px;
        background-color: var(--blue);
        border-radius: 10px;
        text-align: center;
        font-size: 21px;
        font-family: var(--menu-h2-font-family);
    }
    .drawer__inner .contact-button a::before {
        content: "";
        width: 75px;
        height: 36px;
        margin-left: -36px;
        background-image: url(/header/img/contact.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
    .wrapper-contact {
        margin: 0;
    }
    .p-mark-image {
        margin: 0;
    }
    .service-menu-list {
        padding: 32px 0 0 0;
    }
    .footer {
        max-width: 100%;
        width: 100%;
        height: auto;
        margin: -99px 0 0;
        padding: 120px 16px 16px;
        background-repeat: no-repeat;
    }
    .footer-two-col {
        flex-direction: column-reverse;
        gap: 30px;
        position: relative;
    }
    .footer .kowa-logo-white {
        width: 197px;
        height: 31px;
        background-size: contain; 
        margin: 0 0 18px;
    }
    .footer .footer-guide-area {
        width: auto;
        padding: 18px 0 0;
        gap: 12px;
    }
    .footer .footer-guide-area::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 1px;
        margin: 0 -16px;
        background-color: rgba(255, 255, 255, .3);
    }
    .footer .p-mark-white {
        width: 50px;
        height: 50px;
        margin: 0;
        background-size: contain;
    }
    .footer .footer-menu-area {
        justify-content: center;
    }
    .footer .pagetop {
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
    }
    .footer .line {
        display: none;
    }
    /* Top page -------------------- */
    .d-top {
        height: auto;
    }
    .d-top .section-FV {
        display: block;
        padding: 30px 16px;
    }
    .d-top .section-FV .FV-img {
        width: 70%;
        height: auto;
        margin: auto;
    }
    .d-top .section-FV .FV-img img {
        width: 100%;
    }
    .d-top .FV-message {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        transform: translateX(0);
    }
    .d-top .FV-text {
        display: block;
        width: auto;
        height: auto;
        font-size: min(10vw, 64px);
        text-align: center;
    }
    .d-top .text-wrapper-19 {
        display: block;
        width: auto;
        height: auto;
        margin: 10px 0 0;
        font-size: 12px;
        text-align: center;
    }
    .d-top .section-FV .join-us {
        position: relative;
        top: 0;
        left: 0;
        transform: scale(80%);
        margin: 0 auto;
    }
    .bg-bleed#top-1::before {
        display: none;
    }
    .d-top .section-service {
        padding: 30px 16px;
        background-color: #fbfdff;
        box-shadow: 0 0 10px 10px rgba(60, 120, 190, .1);
    }
    .d-top .section-title {
        margin: 0 0 30px;
        padding: 0;
    }
    .d-top .section-title.service {
        width: auto;
    }
    .d-top .title-text {
        font-size: 32px;
    }
    .d-top .link-button {
        margin: 20px auto 30px;
        transform: initial;
    }
    .two-col#service-cards {
        width: auto;
    }
    .d-top .card-service {
        width: auto;
        margin: 20px 0 0;
        border-radius: 24px;
    }
    .d-top .service-menu-card {
        display: block;
        width: auto;
        height: auto;
        padding: 12px 18px;
        border-radius: 20px;
    }
    .d-top .service-menu-card.kitting ul {
        left: 0;
    }
    .d-top .PC {
        width: auto;
        margin: 10px 0 0;
    }
    .d-top .service-submenu {
        flex-direction: column;
        width: auto;
        height: auto;
        border-radius: 24px
    }
    .d-top .submenu-item {
        height: auto;
        left: 0;
        border-radius: 16px;
    }
    .d-top .submenu-item.camp,
    .d-top .submenu-item.itagency,
    .d-top .submenu-item.delete {
        width: auto;
    }
    .d-top .section-company {
        padding: 30px 16px;
    }
    .d-top .section-title.company {
        margin: 0 0 30px;
    }
    .d-top .section-company .vison-message {
        width: auto;
        height: auto;
        margin: 0 0 20px;
        font-size: 24px;
    }
    .d-top .section-company .key-message {
        width: auto;
        height: auto;
    }
    .two-col.company-info_linkbutton {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        margin: 30px 0 0;
    }
    .two-col.company-info_linkbutton .link-button {
        margin: 0;
    }
    .d-top .section-company .footer-kowa {
        width: auto;
        height: 80px;
        background-size: contain;
        background-position: left 0 bottom 0;
        margin: 0 0 -30px;
    }
    .bg-bleed {
        display: none;
    }
    .d-top .section-recruit {
        position: relative;
        display: block;
        padding: 30px 16px 99px;
        background-color: #ffffff;
        box-shadow: 0 -10px 10px 0 rgba(60, 120, 190, .1);
    }
    .d-top .section-title.recruit {
        margin: 0 0 30px;
    }
    .d-top .section-recruit .vison-message {
        width: auto;
        height: auto;
        margin: 0 0 20px;
        font-size: 24px;
    }
    .recruit-buttons {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        transform: translateY(0) scale(80%);
    }
    /* Service -------------------- */
    .service-page .service-hero-bg-top {
        display: none;
    }
    .service-page .service-hero-bg-top#kitting {
        display: none;
    }
    .service-page .service-breadcrumb {
        padding: 0 16px;
    }
    .service-page #section-first-view {
        position: relative;
        top: 0px;
        width: 100%;
        padding: 30px 16px;
    }
    .service-page #section-first-view .service-hero-title-block {
        margin: 0 0 70px;
        position: relative;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .service-page .service-section-title-ja {
        height: 1em;
        font-size: 32px;
        line-height: 100%;
    }
    .service-page .service-hero-visual {
        position: absolute;
        top: 94px;
        right: 16px;
        width: 110px;
        height: 78px;
        background-image: url(/img/FV.svg);
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 0;
        margin-right: 0;
        z-index: 1;
    }
    .service-page .service-hero-lead {
        width: auto;
        margin: 30px -16px 0;
        padding: 40px 16px 10px;
        background-color: #fbfdff;
        font-size: 21px;
        box-shadow: 0 -10px 10px 0 rgba(60, 120, 190, .1);
    }
    .service-page .service-hero-description {
        width: auto;
        margin: 0 -16px;
        padding: 10px 16px 50px;
        background-color: #fbfdff;
        box-shadow: 0 10px 10px 0 rgba(60, 120, 190, .1);
    }
    #section-solution {
        height: auto;
        margin: 0;
        padding: 30px 16px;
    }
    .service-page .service-anchor-nav {
        display: block;
        width: auto;
        height: auto;
        margin: 30px 0 80px;
    }
    .service-page .service-anchor-nav#kitting-nav {
        width: auto;
    }
    .service-page .service-anchor-list {
        flex-wrap: wrap;
    }
    .service-page .service-anchor-container {
        width: auto;
        height: auto;
    }
    .service-page .service-anchor-item {
        gap: 0;
    }
   .service-page #section-service-value {
        padding: 30px 16px;
    }
    .service-page .value-card-wrap {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 30px 0;
        padding: 0;
    }
    .service-page .value-card-lg,
    .service-page .value-card-md {
        width: 100%;
        height: auto;
    }
    .service-page .value-card .description {
        width: auto;
    }
    .service-page .value-card.one-stop .image {
        top: 10px;
        left: initial;
        right: 15px;
        width: 120px;
        height: 110px;
        background-size: contain;
    }
    .service-page .value-card.flexible-tech .image {
        top: 10px;
        left: initial;
        right: 10px;
        width: 118px;
        height: 120px;
        background-size: contain;
    }
    .service-page .value-card.high-quality-support .image {
        top: 10px;
        left: initial;
        right: 40px;
        width: 85px;
        height: 108px;
        background-size: contain;
    }
    .service-page .value-card.onsite-support .image {
        top: 10px;
        left: initial;
        right: 10px;
        width: 196px;
        height: 88px;
        background-size: contain;
    }
    .service-page .value-card.high-security .image {
        top: 16px;
        left: initial;
        right: 30px;
        width: 115px;
        height: 107px;
        background-size: contain;
    }
    .section-header {
        width: auto;
        height: auto;
        left: 0;
        margin: 30px 0;
    }
    .section-header#charm {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .section-header#infra {
        width: auto;
        height: auto;
    }
    .service-page .service-section-heading {
        gap: 16px;
        width: auto;
        height: auto;
        left: 0;
    }
    .service-page .service-hero-bg-word {
        width: auto;
        height: auto;
        margin: 0 0 -10px;
        font-size: 10vw;
        line-height: normal;
        letter-spacing: 0.05em;
        overflow: hidden;
        transform: translateY(.8em);
    }
    #section-infra {
        padding: 4px 16px 30px;
        background: #fbfdff;
        box-shadow: 0 -10px 10px 0 rgba(60, 120, 190, .1);
    }
    .service-page .service-infra-intro {
        width: auto;
    }
    .service-page .card-list {
        flex-direction: column;
        margin: 0;
    }
    .service-page .service-card {
        width: auto;
        height: auto;
        padding: 24px;
    }
    .service-page .service-card-inner {
        width: 100%;
    }
    .service-page .service-card-title-row {
        gap: 8px;
    }
    .service-page .service-inline-row {
        flex-wrap: wrap;
    }
    .service-page .service-card-tag-list {
        width: auto;
    }
    #section-kitting {
        padding: 30px 16px;
        background: #fbfdff;
        box-shadow: 0 10px 10px 0 rgba(60, 120, 190, .1);
    }
    .service-page .service-kitting-intro {
        width: auto;
        margin: 0;
    }
    .service-page .service-section-heading#kitting {
        width: auto;
        height: auto;  
        top: 0;
    }
    .service-page .service-section-heading .service-section-heading-icon {
        position: relative;
    }
    .service-page .service-section-heading .service-section-heading-text {
        position: relative;
        
    }
    .service-page .service-card.kitting {
        height: auto;
    }
    .service-page #section-other {
        padding: 30px 16px 99px;
    }
    .service-page .other-card-wrap {
        flex-direction: column;
        padding: 0;
    }
    .service-page .service-card.camp,
    .service-page .service-card.itagency,
    .service-page .service-card.delete {
        width: auto;
        height: auto;
    }
    .service-page .service-card-feature-text {
        position: static;
        width: auto;
        height: auto;
    }
    .service-page .service-card-footer-tags {
        position: static;
        width: auto;
        height: auto;
    }

    /* Network -------------------- */
    .section-header#solution {
        width: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .section-header .header-icon {
        top: 0;
    }
    .section-header .header-text {
        font-size: 24px;
        line-height: 100%;
        white-space: normal;
    }
    .service-page .problems-block {
        left: 0;
        margin: 30px 0
    }
    #section-charm {
        margin: 0;
        padding: 30px 16px;
        background-color: #fbfdff;
        box-shadow: 0 0 10px 10px rgba(60, 120, 190, .1);
    }
    .charm-area {
        margin: 0;
    }
    .feature-card, .feature-card__inner {
        width: auto;
        height: auto;
    }
    .feature-card__media-card {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background-color: transparent;
    }
    .feature-card__media {
        transform: scale(67%);
        margin: 0 auto;
    }
    .feature-card__body {
        display: block;
        width: auto;
        position: relative;
        top: 0;
        left: 0;
    }
    .feature-card__title {
        font-size: 21px;
        line-height: 150%;
    }
    #section-content {
        padding: 30px 16px 99px;
        background-color: #fbfdff;
        box-shadow: 0 10px 10px 0 rgba(60, 120, 190, .1);
    }
    .service-page .service-section-heading {
        width: auto;
        height: auto;
        left: 0;
        margin: 30px 0;
    }
    .service-page .service-section-heading .service-section-heading-icon {
        position: relative;
        top: 0;
        left:  0;
    }
    .service-page .service-section-heading .service-section-heading-text {
        position: relative;
        top: 0;
        left:  0;
        font-size: 24px;
        line-height: 100%;
        white-space: normal;
    }
    .content-list {
        margin: 0;
    }
    .content-card {
        align-items: stretch;
        gap: 20px;
        width: auto;
    }
    .content-card-label {
        width: auto;
        height: auto;
    }
    .content-card-label-text {
        font-size: 11px;
    }
    .content-card-body {
        gap: 8px;
        width: auto;
        padding: 8px 0;
    }
    .content-card-title {
        font-size: 18px;
    }
    .content-card-divider {
        width: 100%;
        margin: 8px 0;
    }
    .content-card-description {
        width: auto;
    }
    #section-device {
        padding: 30px 16px 99px;
    }
    .service-section-heading#process {
        margin: 30px 0;
    }
    .process-wrap {
        display: block;
        width: auto;
    }
    .process-step {
        gap: 16px;
        align-items: flex-start;
        width: auto;
        height: auto;
        margin: 30px 0;
    }
    .process-step__content {
        width: 100%;
        height: auto;
        margin: 0;
    }
    .process-step__content-inner {
        width: 100%;
        height: auto;
    }
    .process-step__title {
        position: relative;
        width: 100%;
        height: auto;  
        font-size: 18px
    }
    .process-step__description {
        position: relative;
        top: 0;
        width: 100%;
        height: auto;    
    }
    /* server -------------------- */
    #section-process {
        padding: 30px 16px 99px;
    }
    .service-page .service-anchor-nav#server-nav {
        width: auto;
    }
    /* display -------------------- */
    .service-page .service-anchor-nav#display-nav {
        width: auto;
        height: auto;
        margin: 30px 0 0;
    }
    #section-cases {
        padding: 30px 16px 99px;
    }
    .service-page .other-card-wrap#pos-cases {
        padding: 0;
    }
    .cases-card {
        width: 100%;
        height: auto;
        border-radius: 24px;
    }
    .cases-card__badge {
        top: -56px;
        right: -56px;
        width: 106px;
        height: 106px;
        background: var(--blue);
        border-radius: 48px;
    }
    .cases-card__badge-no {
        font-size: 18px;
        line-height: 1.5;
        transform: translate(-24px, 24px);
    }
    .cases-card__inner {
        padding: 24px 24px 16px;
    }
    .cases-card__title {
        padding: 0 24px 0 0;
        font-size: 18px;
        line-height: 1.5;
    }
    /* kitting -------------------- */
    #section-charm + #section-content {
        box-shadow: 0 10px 10px 0 rgba(60, 120, 190, .1);
    }
    .device-list {
        flex-direction: column;
        width: auto;
        height: auto;
        margin: 0;
        padding: 24px;
        border-radius: 24px;
    }
    .service-page .service-anchor-nav#pos-nav {
        width: auto;
    }
    /* campaign -------------------- */
    .service-page .service-anchor-nav#camp-nav {
        width: auto;
    }
    /* itagency -------------------- */
    .service-page .service-anchor-nav#itagency-nav {
        width: auto;
    }
    #section-support {
        padding: 30px 16px;
    }
    #section-price {
        padding: 30px 16px;
    }
    #section-area {
        padding: 30px 16px;
    }
    .service-page .dev-card-wrap {
        flex-direction: column;
        padding: 0;
    }
    /* datawiping -------------------- */
    .service-page .service-anchor-nav#delete-nav {
        width: auto;
    }
    /* policy -------------------- */
    #policy-nav {
        width: auto;
        height: auto;
        margin: 30px 0 0;
    }
    #privacy,
    #guidelines,
    #handling,
    #request {
        width: auto;
    }
    #section-privacy,
    #section-guidelines,
    #section-handling {
        padding: 30px 16px 33px;
    }
    #section-request {
        padding: 30px 16px 99px;
    }
    .contents-frame {
        width: auto;
        padding: 0;
    }
    /* company -------------------- */
    #section-company {
        padding: 30px 16px;
    }
    #section-access {
        padding: 0 16px 149px;
    }
    .section-header#company {
        margin: 0 0 30px 0;
    }
    .company-info {
        padding: 0;
    }
    .company-info .info-row {
        flex-direction: column;
        gap: 16px;
    }
    .info-row .info-row__label,
    .info-row .info-row__text {
        width: auto;
    }
    /* Google Map wrapper */
    .accessinfo {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        padding-top: 75%;
    }
    /* Google Map iframe */
    .accessinfo iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .accesstext {
        position: absolute;
        left: 0;
        bottom: calc(-1em - 10px);
        margin: 0;
    }
    /* recruit -------------------- */
    .toggle-block {
        margin: 0;
    }
    .toggle-input {
        margin: 0;
    }
    .toggle-ui {
        width: auto;
        height: auto;
        border-radius: 12px;
    }
    .toggle-ui .select-item {
        padding: 16px 0;
        border-radius: 12px;
        font-size: 14px;
        line-height: 1;
    }
    .toggle-input:checked + .toggle-ui .on {
        border-radius: 12px;
    }
    #section-recruit {
        padding: 30px 16px;
    }
    #recruit {
        width: auto;
    }

    #section-requirements {
        padding: 30px 16px 99px;
    }
    .apply-box,
    .apply-box.parttime-box {
        width: auto;
        height: auto;
        margin: 80px 0 0;
        padding: 20px;
    }
    .apply-box .text-title {
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 1.5;
        white-space: normal;
    }
    .apply-box .line {
        width: auto;
    }
    .apply-box .text-description {
        margin: 1em 0;
        padding: 0;
        font-size: 16px;
        line-height: 1.5;
        white-space: normal;
    }
    .apply-box .telmail-wrap#parttime {
        margin: 1em 0;        
    }
    .apply-box .telmail-text {
        font-size: 24px;
        line-height: 1.5;
        white-space: normal;
    }
    .parttime-button {
        width: auto;
        height: auto;
        padding: 14px;
    }
    .parttime-button .text-wrapper {
        font-size: 21px;
    }
    /* Contact -------------------- */
    #section-contact {
        padding-top: 0;
        padding-bottom: 99px;
    }
    .contact-form {
        border-radius: 20px;
        padding: 24px;
        margin: 16px;
    }
    .contact-form h2 {
        font-size: 24px;
    }
    .contact-form label {
        margin: 0 0 6px;
        font-size: 18px;
    }
    .contact-form input, .contact-form textarea, .contact-form select {
        height: auto;
        font-size: 18px;
    }
    .contact-form button {
        width: 160px;
        padding: 12px;
        border-radius: 10px;
        font-size: 18px;
    }
    .contact-form select#pref{
        max-width: 380px;
        width: 100%;
    }
    /* Contact confirm ----------*/
    table.confirm-table {
        display: block;
        margin-top: 32px;
        padding: 0;
        font-size: 18px;
    }
    table.confirm-table tr,
    table.confirm-table th,
    table.confirm-table td {
        display: block;
    }
    table.confirm-table tr {
        margin: 16px 0;
    }
    table.confirm-table th {
        padding: 6px 0;
        font-size: 15px;
        color: #747474;
    }
    table.confirm-table td {
        padding: 6px 0;
    }
    .contact-form .confirm-buttons {
        display: block;
        gap: initial;
        margin-top: 32px;
    }
    .contact-form button#back-button {
        width: auto;
        padding: 6px 12px;
        margin: 0 0 16px;
        padding: auto;
    }
}