@charset "UTF-8";

/* ==========================================================================
   のら猫レスキューかしわ / rs.css（レスポンシブ）
   ========================================================================== */

/* ---------- タブレット ---------- */
@media screen and (max-width: 1000px) {
  ul#gNav li a { font-size: 0.85rem; padding: 0.6rem 0.6rem; }
  ul#gNav li a.cta { padding: 0.6rem 1rem; }

  .policy_grid .tile { flex: 1 1 100%; }
}

/* ---------- モバイル（770px以下） ---------- */
@media screen and (max-width: 770px) {

  .pc { display: none; }
  .sp { display: inline; }

  section { padding: 3.4rem 0; }
  main h2, section h2 { font-size: 1.4rem; margin-bottom: 1.8rem; }

  /* ---- ヘッダー / ハンバーガー ---- */
  #header { height: 60px; }
  #header .block { height: 60px; padding: 0 1rem; }
  #header .logotext { font-size: 1rem; }
  #header .logotext img.logoimg { width: 2.2rem; height: 2.2rem; }

  #wrapper { padding-top: 60px; }

  #navToggle {
    display: block;
    position: fixed;
    right: 0; top: 0;
    width: 60px; height: 60px;
    z-index: 600;
    text-align: center;
    font-size: 0.6rem;
    padding-top: 2.4rem;
    color: var(--text);
  }
  #navToggle div { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 24px; height: 16px; }
  #navToggle span {
    position: absolute;
    left: 0;
    width: 24px; height: 2px;
    background: var(--text);
    transition: all 0.3s;
  }
  #navToggle span:nth-child(1) { top: 0; }
  #navToggle span:nth-child(2) { top: 7px; }
  #navToggle span:nth-child(3) { top: 14px; }

  #header.openNav #navToggle span:nth-child(1) { top: 7px; transform: rotate(-45deg); }
  #header.openNav #navToggle span:nth-child(2) { opacity: 0; }
  #header.openNav #navToggle span:nth-child(3) { top: 7px; transform: rotate(45deg); }

  #header nav {
    display: block;
    position: fixed;
    top: 60px; left: 0;
    width: 100%;
    height: calc(100% - 60px);
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: opacity 0.3s, transform 0.3s;
    overflow-y: auto;
    z-index: 550;
  }
  #header.openNav nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  ul#gNav { flex-direction: column; align-items: stretch; padding: 1rem 1.4rem 3rem; gap: 0; }
  ul#gNav li { border-bottom: 1px solid var(--gray); }
  ul#gNav li a { padding: 1.1rem 0.4rem; font-size: 1rem; }
  ul#gNav li a.cta { background: none; color: var(--main); border-radius: 0; padding: 1.1rem 0.4rem; margin: 0; }

  /* ---- ヒーロー ---- */
  #mainvisual { padding: 3.4rem 0; }
  .catchwrap h1 { font-size: 1.7rem; }
  .catchwrap .lead { font-size: 0.9rem; padding: 0 1rem; }
  .hero_btn { flex-direction: column; align-items: center; gap: 0.8rem; }
  .btn a, .btn button { min-width: 84%; }

  /* ---- about ---- */
  #about .list { flex-direction: column; }
  #about .list > li { width: 100%; }

  /* ---- policy ---- */
  .policy_grid { flex-direction: column; gap: 0; }

  table:not(.noblock) th,
  table:not(.noblock) td {
    display: block;
    width: 100%;
  }

  /* ---- footer ---- */
  #footer { padding: 2.6rem 1.2rem 5rem; }
  #footer > div { width: 100%; }
  #footer > div#fInfo{display: flex; flex-direction: column; align-items: center;}
  #fNav ul { margin-bottom: 1.4rem; }

  .backtotop a { bottom: 0.8rem; right: 0.8rem; }
  .backtotop a i { font-size: 2.6rem !important; }
}

@media screen and (max-width: 480px) {
  html { font-size: 15px; }
  .catchwrap h1 { font-size: 1.5rem; }
}