/* スマートフォン・タブレット対応 */
.nav-toggle { display: none; }
.ig-mobile { display: none !important; }
a, button, .btn { transition: transform .15s, opacity .15s, background .15s, color .15s; }
a:not(.tile), button { display: inline-flex; }
a:hover, button:hover, .btn:hover { transform: scale(1.08); }
.ig-btn:hover { opacity: .9; }
a:active, button:active, .btn:active { transform: scale(1.02); }
/* 部門の大きな枠は隣と重ならないよう控えめに */
a.tile { position: relative; z-index: 0; }
a.tile:hover { transform: scale(1.03); z-index: 2; box-shadow: 0 10px 28px rgba(29,31,32,0.18); }
a.tile:active { transform: scale(1.01); }
.ig-desktop { position: relative; left: 20px; }
.line-desktop { left: 20px; }
.line-mobile { display: none !important; }
.line-qr { display: none !important; }
.line-desktop:hover .line-qr, .line-desktop:focus-visible .line-qr { display: flex !important; }
.line-btn:hover { opacity: .9; }
.line-guide-btn:hover { background: #05a647 !important; }
.ig-btn:focus-visible { outline: 2px solid #e5007e; outline-offset: 2px; }
/* データ入稿ボタン（水色） */
.h8 { background: #74d4f7 !important; color: #1d1f20 !important; }
.h8:hover, .h8:focus-visible { background: #1d1f20 !important; color: #fff !important; }
/* メニューの「データ入稿」「お問い合わせ」を同じ幅に */
.nav-links > a.h6, .nav-links > a.h8 { min-width: 124px; justify-content: center; box-sizing: border-box; }

@media (max-width: 900px) {
  .site-nav {
    position: relative !important;
    z-index: 3;
    padding: 12px 18px !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
  }
  .nav-brand-mark { transform: scale(0.85); transform-origin: left center; }
  .nav-brand-name { font-size: 22px !important; }

  .ig-mobile { display: flex !important; width: 46px !important; height: 46px !important; }
  .nav-links > a.ig-desktop, .nav-links > a.line-desktop { display: none !important; }
  .line-mobile { display: flex !important; width: 46px !important; height: 46px !important; }
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid #1d1f20;
    background: #fff;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1d1f20;
    margin: 0 auto;
    transition: transform .2s, opacity .2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: none !important;
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: #fff;
    border-bottom: 2px solid #1d1f20;
    z-index: 20;
  }
  .nav-links.open { display: flex !important; }
  .nav-links > a {
    padding: 16px 20px !important;
    font-size: 15px !important;
    border-top: 1px solid rgba(29,31,32,0.18);
    border-bottom: none !important;
    text-align: left;
  }
  .nav-links > a.btn { text-align: center; }

  .hero { padding: 64px 22px 72px !important; min-height: 430px !important; }
  .hero h1 { font-size: 42px !important; line-height: 1.24 !important; }
  .hero-kicker { font-size: 11px !important; letter-spacing: 0.18em !important; }
  .hero-actions { flex-wrap: wrap; justify-content: center; }

  .grid-2, .grid-3, .grid-split {
    grid-template-columns: 1fr !important;
  }
  .grid-2 > a, .grid-2 > div, .grid-split > div {
    border-right: none !important;
  }

  .sec-pad { padding-left: 22px !important; padding-right: 22px !important; }
  .sec-head { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .sec-head h2 { font-size: 30px !important; }

  .tile { padding: 30px 22px !important; min-height: 0 !important; }
  .tile h3 { font-size: 25px !important; }

  .page-head { padding: 24px 22px 20px !important; }
  .page-head h1 { font-size: 44px !important; }
  .page-body { padding: 64px 22px !important; }
  .page-body h2 { font-size: 30px !important; }

  .site-footer {
    padding: 20px 22px !important;
    flex-direction: column;
    gap: 6px;
    text-align: left;
  }

  .tel-block span { font-size: 32px !important; }
  .line-guide-qr { display: none !important; }
  .line-guide-btn { font-size: 15px !important; padding: 12px 18px !important; }
}

@media (max-width: 900px) {
  .keep-line { white-space: normal !important; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 34px !important; }
  .page-head h1 { font-size: 36px !important; }
  .tel-block span { font-size: 28px !important; }
}