@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/


/* =========================================================
   01. SITE BASE
========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
iframe,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

.entry-content {
  overflow-wrap: anywhere;
}


/* =========================================================
   02. 目次
   Cocoon目次 + TOP独自目次
========================================================= */

.entry-content > .toc,
.entry-content .toc,
.article .toc,
body.home .its-top .its-manual-toc {
  display: none !important;
}


/* =========================================================
   03. 汎用レスポンシブクラス
   投稿・固定ページでも使用可能
========================================================= */

.its-mobile-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.its-mobile-3 > * {
  min-width: 0;
}

.its-mobile-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.its-mobile-2 > * {
  min-width: 0;
}

.its-responsive-box {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* =========================================================
   04. 関東ITS 共通ヘッダー
========================================================= */

.its-global-header,
.its-global-header * {
  box-sizing: border-box;
}

.its-global-header {
  position: relative;
  z-index: 9999;

  width: 100%;

  background: rgba(255, 255, 255, 0.97);

  border-bottom: 1px solid #e6ebef;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  box-shadow:
    0 3px 18px
    rgba(20, 40, 60, 0.035);
}

.its-global-header-inner {
  width: min(
    1380px,
    calc(100% - 40px)
  );

  min-height: 94px;

  margin: 0 auto;

  display: flex;
  align-items: center;

  gap: 28px;
}


/* =========================================================
   05. LOGO
========================================================= */

.its-global-logo {
  display: flex;
  align-items: center;

  gap: 12px;

  flex: 0 0 auto;

  color: #17212b !important;

  text-decoration: none !important;
}

.its-global-logo-mark {
  width: 52px;
  height: 52px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #16324f;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 0.07em;

  border: 5px solid #2878a5;

  box-shadow:
    inset 0 0 0 4px
    #f0a22e;

  background: #fff;
}

.its-global-logo-text {
  display: block;

  line-height: 1.15;
}

.its-global-logo-text strong {
  display: block;

  font-size: 18px;
  font-weight: 900;

  letter-spacing: -0.02em;
}

.its-global-logo-text small {
  display: block;

  margin-top: 5px;

  color: #7b8892;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.12em;
}


/* =========================================================
   06. NAV
========================================================= */

.its-global-nav {
  display: flex;
  align-items: center;

  gap: 24px;

  margin-left: auto;
}

.its-global-nav a {
  position: relative;

  color: #17212b !important;

  text-decoration: none !important;

  font-size: 13px;
  font-weight: 800;

  white-space: nowrap;

  transition:
    color 0.25s ease;
}

.its-global-nav a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -10px;

  width: 0;
  height: 2px;

  transform:
    translateX(-50%);

  background: #2878a5;

  transition:
    width 0.25s ease;
}

.its-global-nav a:hover {
  color: #2878a5 !important;
}

.its-global-nav a:hover::after {
  width: 100%;
}


/* =========================================================
   07. HEADER CTA
========================================================= */

.its-global-cta {
  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding: 0 23px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #f0a22e,
      #f5b33e
    );

  color: #fff !important;

  text-decoration: none !important;

  font-size: 12px;
  font-weight: 900;

  white-space: nowrap;

  box-shadow:
    0 8px 20px
    rgba(240, 162, 46, 0.20);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.its-global-cta:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 28px
    rgba(240, 162, 46, 0.28);
}


/* =========================================================
   08. HEADER COLOR LINE
========================================================= */

.its-global-line {
  display: grid;

  grid-template-columns:
    1.2fr
    1fr
    0.7fr;

  width: 100%;
  height: 6px;

  overflow: hidden;
}

.its-global-line span:nth-child(1) {
  background: #2878a5;
}

.its-global-line span:nth-child(2) {
  background: #57a900;
}

.its-global-line span:nth-child(3) {
  background: #f0a22e;
}


/* =========================================================
   09. MOBILE MENU BUTTON
========================================================= */

.its-menu-button {
  display: none;

  flex: 0 0 auto;

  width: 44px;
  height: 44px;

  padding: 10px;

  border: 0;

  border-radius: 10px;

  background: #f3f6f7;

  cursor: pointer;
}

.its-menu-button span {
  display: block;

  width: 100%;
  height: 2px;

  margin: 5px 0;

  background: #16324f;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}


/* =========================================================
   10. MOBILE NAV
========================================================= */

.its-global-mobile-nav {
  display: none;

  width: min(
    calc(100% - 28px),
    720px
  );

  margin: 0 auto;

  padding: 5px 0 20px;
}

.its-global-mobile-nav a {
  display: block;

  padding: 14px 5px;

  border-bottom:
    1px solid
    #edf1f3;

  color: #17212b !important;

  text-decoration: none !important;

  font-size: 14px;
  font-weight: 800;
}

.its-global-mobile-cta {
  margin-top: 12px;

  padding:
    15px 18px
    !important;

  border: 0 !important;

  border-radius: 12px;

  text-align: center;

  color: #fff !important;

  background: #f0a22e;
}


/* =========================================================
   11. MOBILE NAV OPEN
========================================================= */

.its-global-header.menu-open
.its-global-mobile-nav {
  display: block;
}

.its-global-header.menu-open
.its-menu-button span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}

.its-global-header.menu-open
.its-menu-button span:nth-child(2) {
  opacity: 0;
}

.its-global-header.menu-open
.its-menu-button span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}


/* =========================================================
   12. HEADER TABLET
========================================================= */

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

  .its-global-nav {
    gap: 15px;
  }

  .its-global-nav a {
    font-size: 11px;
  }

  .its-global-cta {
    padding: 0 16px;

    font-size: 11px;
  }

}


/* =========================================================
   13. HEADER MOBILE
========================================================= */

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

  .its-global-header-inner {
    width: calc(100% - 28px);

    min-height: 74px;
  }

  .its-global-nav,
  .its-global-cta {
    display: none;
  }

  .its-menu-button {
    display: block;

    margin-left: auto;
  }

  .its-global-logo-mark {
    width: 43px;
    height: 43px;

    border-width: 4px;

    box-shadow:
      inset 0 0 0 3px
      #f0a22e;
  }

  .its-global-logo-text strong {
    font-size: 15px;
  }

  .its-global-logo-text small {
    font-size: 8px;
  }

}


/* =========================================================
   14. TOP PAGE
   Cocoon標準レイアウト解除
========================================================= */

.home .header-container,
.home #header-container,
.home .header-container-in,
.home #header {
  display: none !important;
}

.home .article-header,
.home .entry-title,
.home .date-tags,
.home .post-date,
.home .post-update,
.home .entry-date {
  display: none !important;
}

.home .sns-share,
.home .sns-follow {
  display: none !important;
}

.home .breadcrumb {
  display: none !important;
}

.home .content,
.home .content-in,
.home #main,
.home .main,
.home .article,
.home .entry-content {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.home #main,
.home .main {
  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.home .main-scroll,
.home .main-scroll-in {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home {
  background: #fff !important;
}


/* =========================================================
   15. TOP TOC OFF
========================================================= */

body.home
.its-top
.its-manual-toc {
  display: none !important;
}

body.home
.its-top
.its-guide-map-layout {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    !important;

  justify-items: center !important;

  gap: 0 !important;
}

body.home
.its-top
.its-engine-card {
  width: min(
    100%,
    430px
  ) !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   16. MOBILE TOP
========================================================= */

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

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: clip !important;
  }

  body.home .its-top,
  body.home .its-top * {
    box-sizing: border-box !important;
  }

  body.home .its-top {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    overflow-x: clip !important;
  }


  /* =======================================================
     HERO
     スマホでもPCに近い左右レイアウト
  ======================================================= */

  body.home
  .its-top
  .its-hero {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 56%)
      minmax(0, 44%)
      !important;

    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 500px !important;

    padding: 0 !important;

    overflow: hidden !important;
  }


  body.home
  .its-top
  .its-hero-content {
    position: relative !important;

    z-index: 20 !important;

    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
      42px
      4px
      42px
      16px
      !important;
  }


  body.home
  .its-top
  .its-kicker {
    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    margin:
      0
      0
      17px
      !important;

    padding:
      6px
      8px
      !important;

    font-size: 9px !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;
  }


  body.home
  .its-top
  .its-kicker::before {
    width: 6px !important;
    height: 6px !important;
  }


  body.home
  .its-top
  .its-kicker::after {
    margin-left: 0 !important;

    padding-left: 6px !important;

    font-size: 6px !important;
  }


  body.home
  .its-top
  .its-hero h1 {
    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    font-size:
      clamp(
        29px,
        7.7vw,
        35px
      ) !important;

    line-height: 1.18 !important;

    letter-spacing:
      -0.045em !important;
  }


  body.home
  .its-top
  .its-hero h1 span {
    display: inline !important;
  }


  body.home
  .its-top
  .its-hero-description {
    width: 100% !important;
    max-width: 100% !important;

    margin:
      20px
      0
      0
      !important;

    font-size: 12px !important;

    line-height: 1.85 !important;
  }


  /* =======================================================
     HERO BUTTONS
  ======================================================= */

  body.home
  .its-top
  .its-hero-actions {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      )
      !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 6px !important;

    margin-top: 22px !important;
  }


  body.home
  .its-top
  .its-hero-actions
  .its-button {
    width: 100% !important;

    min-width: 0 !important;
    min-height: 42px !important;

    margin: 0 !important;

    padding:
      0
      4px
      !important;

    font-size: 9px !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;
  }


  /* =======================================================
     HERO RADAR
     右カラムに配置
  ======================================================= */

  body.home
  .its-top
  .its-home-signature {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 12 !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;

    padding:
      0
      8px
      0
      0
      !important;

    transform: none !important;

    pointer-events: none !important;
  }


  body.home
  .its-top
  .its-home-signature-label {
    width: 100% !important;

    margin:
      0
      0
      6px
      !important;

    text-align: center !important;

    font-size: 5px !important;
  }


  body.home
  .its-top
  .its-home-radar {
    position: relative !important;

    width:
      min(
        175px,
        41vw
      )
      !important;

    height:
      min(
        175px,
        41vw
      )
      !important;

    max-width: 100% !important;

    margin: 0 auto !important;

    transform: none !important;
  }


  body.home
  .its-top
  .its-home-radar::before {
    inset: 12px !important;

    border-width: 10px !important;
  }


  body.home
  .its-top
  .its-home-radar::after {
    inset: 27px !important;
  }


  body.home
  .its-top
  .its-home-radar-ring.ring-a {
    inset: 39px !important;
  }


  body.home
  .its-top
  .its-home-radar-ring.ring-b {
    inset: 52px !important;

    border-width: 5px !important;
  }


  body.home
  .its-top
  .its-home-radar-ring.ring-c {
    inset: 66px !important;
  }


  body.home
  .its-top
  .its-home-radar-core {
    width: 48px !important;
    height: 48px !important;
  }


  body.home
  .its-top
  .its-home-radar-core strong {
    font-size: 13px !important;
  }


  body.home
  .its-top
  .its-home-radar-core small {
    margin-top: 3px !important;

    font-size: 3px !important;
  }


  body.home
  .its-top
  .its-home-node {
    min-width: 39px !important;

    padding:
      3px
      3px
      !important;

    font-size: 4px !important;

    line-height: 1.15 !important;
  }


  body.home
  .its-top
  .its-home-node span {
    font-size: 3px !important;
  }


  body.home
  .its-top
  .its-home-node.node-1 {
    left: -2px !important;
    top: 37px !important;
  }


  body.home
  .its-top
  .its-home-node.node-2 {
    right: -2px !important;
    top: 35px !important;
  }


  body.home
  .its-top
  .its-home-node.node-3 {
    right: -5px !important;
    top: 79px !important;
  }


  body.home
  .its-top
  .its-home-node.node-4 {
    right: 2px !important;
    bottom: 28px !important;
  }


  body.home
  .its-top
  .its-home-node.node-5 {
    left: 2px !important;
    bottom: 27px !important;
  }


  body.home
  .its-top
  .its-home-node.node-6 {
    left: -5px !important;
    top: 83px !important;
  }


  body.home
  .its-top
  .its-home-signature-bottom {
    display: flex !important;

    justify-content: center !important;

    gap: 5px !important;

    margin-top: 6px !important;

    font-size: 3px !important;
  }


  /* =======================================================
     HERO BACKGROUND
  ======================================================= */

  body.home
  .its-top
  .its-hero::before {
    right: -30px !important;
    top: 70px !important;

    font-size: 105px !important;
  }


  body.home
  .its-top
  .its-orbit {
    pointer-events: none !important;
  }


  body.home
  .its-top
  .its-orbit-1 {
    width: 630px !important;
    height: 170px !important;

    right: -405px !important;
    bottom: 122px !important;

    border-width: 12px !important;
  }


  body.home
  .its-top
  .its-orbit-2 {
    width: 670px !important;
    height: 190px !important;

    right: -430px !important;
    bottom: 95px !important;

    border-width: 18px !important;
  }


  body.home
  .its-top
  .its-orbit-3 {
    width: 710px !important;
    height: 215px !important;

    right: -455px !important;
    bottom: 66px !important;

    border-width: 8px !important;
  }


  body.home
  .its-top
  .its-orbit-4 {
    width: 620px !important;
    height: 145px !important;

    left: -450px !important;
    top: 200px !important;

    border-width: 8px !important;
  }


  /* =======================================================
     INTRO
  ======================================================= */

  body.home
  .its-top
  .its-intro {
    padding:
      48px
      0
      14px
      !important;
  }


  body.home
  .its-top
  .its-inner {
    width:
      calc(
        100% - 24px
      )
      !important;

    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  body.home
  .its-top
  .its-section-label {
    margin-bottom: 8px !important;

    font-size: 9px !important;
  }


  body.home
  .its-top
  .its-section-title {
    font-size: 24px !important;

    line-height: 1.4 !important;
  }


  body.home
  .its-top
  .its-section-title-box {
    width: 100% !important;

    min-width: 0 !important;

    padding:
      12px
      13px
      !important;
  }


  body.home
  .its-top
  .its-section-text {
    margin-top: 11px !important;

    font-size: 12px !important;

    line-height: 1.85 !important;
  }


  /* =======================================================
     GUIDE
  ======================================================= */

  body.home
  .its-top
  .its-guide-map {
    padding:
      0
      0
      45px
      !important;
  }


  body.home
  .its-top
  .its-guide-map-layout {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    justify-items: center !important;

    gap: 0 !important;
  }


  body.home
  .its-top
  .its-engine-card {
    width: 100% !important;

    max-width: 315px !important;

    margin: 0 auto !important;
  }


  body.home
  .its-top
  .its-engine-visual {
    width:
      min(
        265px,
        calc(100vw - 56px)
      )
      !important;
  }


  /* =======================================================
     ABOUT
  ======================================================= */

  body.home
  .its-top
  .its-about {
    padding:
      52px
      0
      60px
      !important;
  }


  body.home
  .its-top
  .its-about-layout {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 23px !important;
  }


  /* =======================================================
     6 SERVICES
     3 × 2
  ======================================================= */

  body.home
  .its-top
  .its-about-services {
    display: grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      )
      !important;

    gap: 7px !important;

    width: 100% !important;

    min-width: 0 !important;
  }


  body.home
  .its-top
  .its-about-service {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 108px !important;

    margin: 0 !important;

    padding:
      10px
      8px
      !important;

    border-radius: 12px !important;
  }


  body.home
  .its-top
  .its-about-icon {
    width: 30px !important;
    height: 30px !important;

    margin:
      0
      0
      8px
      !important;

    border-radius: 8px !important;

    font-size: 15px !important;
  }


  body.home
  .its-top
  .its-about-service strong {
    display: block !important;

    margin-bottom: 0 !important;

    font-size: 11px !important;

    line-height: 1.35 !important;

    word-break: keep-all !important;
  }


  /*
   3列でも文字サイズを守るため
   スマホでは説明文を非表示。
   HTMLには残る。
  */

  body.home
  .its-top
  .its-about-service p {
    display: none !important;
  }


  /* =======================================================
     CATEGORY
     3 × 2
  ======================================================= */

  body.home
  .its-top
  .its-category-section {
    padding:
      52px
      0
      60px
      !important;
  }


  body.home
  .its-top
  .its-category-grid {
    display: grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      )
      !important;

    gap: 7px !important;

    width: 100% !important;

    margin-top: 20px !important;
  }


  body.home
  .its-top
  .its-category-card {
    width: 100% !important;

    min-width: 0 !important;

    min-height: 145px !important;

    margin: 0 !important;

    padding:
      10px
      8px
      29px
      !important;

    border-radius: 13px !important;
  }


  body.home
  .its-top
  .its-category-number {
    font-size: 7px !important;
  }


  body.home
  .its-top
  .its-category-icon {
    margin:
      10px
      0
      6px
      !important;

    font-size: 20px !important;
  }


  body.home
  .its-top
  .its-category-title-box {
    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding:
      6px
      5px
      !important;

    border-left-width:
      3px !important;
  }


  body.home
  .its-top
  .its-category-card h3 {
    margin: 0 !important;

    font-size: 11px !important;

    line-height: 1.35 !important;

    word-break: keep-all !important;
  }


  body.home
  .its-top
  .its-category-card p {
    display: none !important;
  }


  body.home
  .its-top
  .its-category-arrow {
    right: 7px !important;
    bottom: 7px !important;

    width: 23px !important;
    height: 23px !important;

    font-size: 11px !important;
  }


  /* =======================================================
     BEGINNER
  ======================================================= */

  body.home
  .its-top
  .its-beginner {
    padding:
      55px
      0
      !important;
  }


  body.home
  .its-top
  .its-beginner-layout {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      !important;

    gap: 22px !important;
  }


  body.home
  .its-top
  .its-beginner-item {
    min-height: 50px !important;

    padding:
      0
      13px
      !important;

    font-size: 11px !important;
  }


  /* =======================================================
     PICK UP
     3列
  ======================================================= */

  body.home
  .its-top
  .its-feature {
    padding:
      55px
      0
      !important;
  }


  body.home
  .its-top
  .its-feature-grid {
    display: grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      )
      !important;

    gap: 7px !important;

    width: 100% !important;

    margin-top: 20px !important;

    overflow: visible !important;
  }


  body.home
  .its-top
  .its-feature-card {
    width: 100% !important;

    min-width: 0 !important;

    min-height: 150px !important;

    margin: 0 !important;

    padding:
      10px
      8px
      !important;

    border-radius: 13px !important;
  }


  body.home
  .its-top
  .its-feature-card small {
    font-size: 7px !important;
  }


  body.home
  .its-top
  .its-feature-card h3 {
    margin:
      7px
      0
      !important;

    font-size: 10px !important;

    line-height: 1.45 !important;
  }


  body.home
  .its-top
  .its-feature-card p {
    display: none !important;
  }


  /* =======================================================
     NEWS / NOTICE
  ======================================================= */

  body.home
  .its-top
  .its-news {
    padding:
      52px
      0
      !important;
  }


  body.home
  .its-top
  .its-news-placeholder {
    margin-top: 18px !important;

    padding:
      18px
      14px
      !important;

    font-size: 11px !important;
  }


  body.home
  .its-top
  .its-notice {
    padding:
      25px
      0
      50px
      !important;
  }


  body.home
  .its-top
  .its-notice-box {
    padding:
      16px
      14px
      !important;

    font-size: 10px !important;

    line-height: 1.8 !important;
  }


  /* =======================================================
     汎用 3列
  ======================================================= */

  .its-mobile-3 {
    display: grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      )
      !important;

    gap: 7px !important;
  }


  .its-mobile-3 > * {
    width: 100% !important;

    min-width: 0 !important;
  }


  /* =======================================================
     汎用 2列
  ======================================================= */

  .its-mobile-2 {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      )
      !important;

    gap: 8px !important;
  }


  .its-mobile-2 > * {
    width: 100% !important;

    min-width: 0 !important;
  }


  /* =======================================================
     投稿・固定ページ はみ出し対策
  ======================================================= */

  .entry-content {
    max-width: 100% !important;

    overflow-wrap: anywhere;
  }


  .entry-content img,
  .entry-content video,
  .entry-content iframe,
  .entry-content svg {
    max-width: 100% !important;

    height: auto;
  }


  .entry-content table {
    max-width: 100% !important;
  }

}


/* =========================================================
   17. SMALL MOBILE
========================================================= */

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

  body.home
  .its-top
  .its-hero {
    grid-template-columns:
      minmax(0, 57%)
      minmax(0, 43%)
      !important;
  }


  body.home
  .its-top
  .its-hero-content {
    padding-left: 12px !important;
  }


  body.home
  .its-top
  .its-hero h1 {
    font-size: 27px !important;
  }


  body.home
  .its-top
  .its-hero-description {
    font-size: 11px !important;
  }


  body.home
  .its-top
  .its-home-radar {
    width:
      min(
        150px,
        40vw
      )
      !important;

    height:
      min(
        150px,
        40vw
      )
      !important;
  }


  body.home
  .its-top
  .its-about-services,

  body.home
  .its-top
  .its-category-grid,

  body.home
  .its-top
  .its-feature-grid,

  .its-mobile-3 {
    gap: 5px !important;
  }


  body.home
  .its-top
  .its-about-service strong,

  body.home
  .its-top
  .its-category-card h3 {
    font-size: 10px !important;
  }

}