@charset "utf-8";

/* ------------------------------------------
header
------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 805px)  {
    header .global {
        width: calc(100% - 120px);
    }
    header .global .main {
        flex-wrap: wrap;
        height: 50%;
        gap: 0;
        margin-right: 1em;
    }
    header .global .main li a {
          padding: 0 10px;
    }
}
@media screen and (min-width: 806px) and (max-width: 1210px)  {
    header .global {
        width: calc(100% - 165px);
    }
    header .global .main {
        flex-wrap: wrap;
        height: 50%;
        gap: 0;
        margin-right: 1em;
    }
    header .global .main li a {
          padding: 0 10px;
    }
}
@media screen and (min-width: 1211px) and (max-width: 1360px)  {
    header .global {
        width: calc(100% - 200px);
    }
    header .global .main {
        flex-wrap: wrap;
        height: 50%;
        gap: 0;
        margin-right: 1em;
    }
    header .global .main li a {
          padding: 0 10px;
    }
}
@media screen and (min-width: 1361px)  {
    header .global {
        width: calc(100% - 200px);
    }
    header .global .main {
        flex-wrap: wrap;
        gap: 0;
        margin-right: 1em;
    }
    header .global .main li a {
          padding: 0 10px;
    }
}

.header-sns {
    margin-top: 1.5rem;
    display: flex; /* 左揃えを確実にする */
    align-items: center; /* 必要なら垂直方向の中央揃え */
    justify-content: center;
  }
  
  .header-sns a {
    width: 40px!important;
    display: block; /* 余計な余白を削除 */
}

.button-sns img {
    transition: transform 0.3s ease; /* スムーズな変化 */
}

.button-sns:hover img {
    transform: scale(1.2); /* ホバー時に1.2倍に拡大 */
}

@media screen and (max-width: 767px) {
    .footer-sns {
        margin: 0.5rem 0 0.8rem!important;
    }
}


/* ------------------------------------------
footer
------------------------------------------ */
.footer-sns {
    margin-top: 1.5rem;
    display: flex; /* 左揃えを確実にする */
    align-items: center; /* 必要なら垂直方向の中央揃え */
  }
  
  .footer-sns a {
    width: 30px!important;
    display: block; /* 余計な余白を削除 */
}

.button-sns img {
    transition: transform 0.3s ease; /* スムーズな変化 */
}

.button-sns:hover img {
    transform: scale(1.2); /* ホバー時に1.2倍に拡大 */
}

@media screen and (max-width: 767px) {
    .footer-sns {
        margin: 0.8 rem 0;
    }
}



/* ------------------------------------------
recaptcha
------------------------------------------ */

.grecaptcha-badge { visibility: hidden; }

/* ------------------------------------------
example.php
------------------------------------------ */
#example .example-pref tbody th {
    vertical-align: top !important;
}

#example .desc-map{
    margin-bottom: 1em;
}

#example .title-type-02{
    position: static !important;
}

@media screen and (min-width: 768px)  {
    #example .example-map li.label-tohoku {
        top: 34% !important;
    }

    #example .example-map li.label-kanto {
        top: 56% !important;
    }

    #example .example-map li.label-chubu {
        bottom: 15% !important;
    }

    #example .example-map li.label-kyushu {
        top: 70% !important;
    }

    #example .example-map li.label-chugoku {
        top: 45% !important;
    }

    #example .example-map li.label-kansai {
        top: 36% !important;
    }

    #example .example-map li.label-hokuriku {
        top: 32% !important;
    }
}

@media screen and (max-width: 768px)  {
    #example .example-map li.label-chubu {
        bottom: 18% !important;
    }

    #example .example-map li.label-shikoku {
        bottom: 13% !important;
    }

    #example .example-map li.label-kyushu {
        bottom: 3% !important;
    }
}

/* ------------------------------------------
example.php
------------------------------------------ */
#company .local-nav-wrap{
    margin-bottom: 6em;
}


/* ------------------------------------------
sidebar sns
------------------------------------------ */
.sns-follow {
  position: fixed;
  bottom: 5%;
  right: 10px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-align: center;
  z-index: 1000;
}

.sns-follow a:not([class*="button-"])[target^="_"]::after{
  content: none;
}

.sns-follow a span{
    display: inline-block;
    margin: 0 0 10px 8px;
}


.sns-link {
  text-decoration: none;
  color: #191847;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.follow-text {
  font-size: 14px;
  font-weight: bold;
  color: #191847;
}

.instagram-icon {
  width: 40px;
  height: 40px;
  transition: opacity 0.3s ease;
}

.instagram-icon:hover {
  opacity: 0.6;
}

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