@charset "utf-8";
/* CSS Document */
/* ====== レスポンシブ：840px以下 ====== */

/* スマホでだけ使う */
@media screen and (max-width: 840px) {
  /* PCナビは隠す（header直下のナビだけ対象に） */
  header > .container > nav { display: none; }

  /* スマホメニュー表示 */
  header .sphone { display: block;}

  /* トグルを右上に固定 */
  .sphone .hamburger {
    position: fixed; right: 16px; top: clamp(1.25rem, 0.288rem + 4.81vw, 2.813rem); z-index: 1001;
    width: 48px; height: 48px;
    display: inline-block;
    background: #fff; border: 1px solid #ccc; border-radius: 10px;
    padding: 0; cursor: pointer;
  }
  /* 3本線：絶対配置で中央基準に */
  .sphone .hamburger span {
    position: absolute; left: 50%;
    width: 26px; height: 2px; background:#333; border-radius: 1px;
    transform: translateX(-50%);
    transform-origin: 50% 50%;
    transition: top .2s ease, transform .2s ease, opacity .2s ease;
    margin: 0;
  }
  /* 上中下の位置 */
  .sphone .hamburger span:nth-child(1){ top: 14px; }
  .sphone .hamburger span:nth-child(2){ top: 23px; }
  .sphone .hamburger span:nth-child(3){ top: 32px; }

  /* 開いた時は“×”に変形（上下を中央へ寄せて回転） */
  .sphone .hamburger[aria-expanded="true"] span:nth-child(1){
    top: 23px; transform: translateX(-50%) rotate(45deg);
  }
  .sphone .hamburger[aria-expanded="true"] span:nth-child(2){
    opacity: 0;
  }
  .sphone .hamburger[aria-expanded="true"] span:nth-child(3){
    top: 23px; transform: translateX(-50%) rotate(-45deg);
  }

  /* ドロワー（右→左のスライド） */
  .sp-drawer {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(255,255,255,.98);
    padding: 72px 20px 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;background-image: url("../common/bg_image.jpg");background-size: auto;
  }
  .sp-drawer .contents {max-width: 400px;width: 90%;margin: auto;}

  .sp-drawer.is-open { transform: translateX(0); }

  /* ドロワー内の nav は確実に表示 */
  .sp-drawer nav {
	  display:block !important;
	  max-width: 400px;
	  width: 90%;
	  margin: auto;
}
  .sp-drawer nav ul { padding:0; margin:0 0 2em; flex-direction: column;}
  .sp-drawer nav ul li { list-style:none; border-bottom:1px dashed #aaa;}
  .sp-drawer nav ul li a {display:block; padding:14px 6px; color:#333; text-decoration:none;font-size: 1.1rem;}
  .sp-drawer nav ul li a::before {content: '\f35a';  font-family: "Font Awesome 6 Free";  font-weight: 400;  color: transparent;margin-right: .3em;}
  .sp-drawer nav ul li a:hover {color:#107C00; }
  .sp-drawer nav ul li a:hover::before{color: #107C00;}

  .sp-drawer .disc {max-width: 400px;width: 90%;margin: auto;}
  .sp-drawer .disc dl { display:block;gap:.75em; margin:1em 0; line-height:1.4; }
  .sp-drawer .disc dt { width: fit-content; padding:.3em .6em; background:#6DAB6B; color:#fff; border-radius:5px; font-size:1rem;  }
  .sp-drawer .disc dd { padding: .5em 0;margin: auto; font-size:1rem;line-height:1.4;}

  .sp-drawer .contact { text-align:center; font-size:.9rem; margin-top:16px;max-width: 400px;width: 90%;margin: auto;background-color: #fff;padding: 1em;border: 1px solid #ccc;border-radius: 10px;}
  .sp-drawer .contact span {display:block; font-size:1.8rem; color:#6DAB6B; margin:.25em 0;}
  .sp-drawer .contact .btn a {display:inline-block; margin-top:6px; padding:.5em 1em; background:#6DAB6B; color:#fff; border-radius:5px;}
  .sp-drawer .contact .btn a:hover { background: rgba(109,171,107,.7); }

  /* 開いている間は背面スクロール止める */
  body.menu-open { overflow:hidden; }
}

/* モーション苦手な設定の人向け（任意） */
@media (prefers-reduced-motion: reduce) {
  .sphone .hamburger span, .sp-drawer { transition: none !important; }
}