@charset "utf-8";

/* sp.css */

/* スマホサイズ（768px以下）の時だけ適用 */
@media screen and (max-width: 767px) {
/* サイト全体がスマホ画面にはみ出さないようにする処置 */
body, #wrapper, #container, #contents {
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box;
	overflow-x: hidden;
}
img {
	max-width: 100% !important;
	height: auto !important;
}
/* 既存のPC用メニューをスマホでは非表示にする */
nav ul.c_menu {
	display: none !important;
}

/* --- 改修版ハンバーガーメニュー --- */
.hamburger {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	width: 50px !important;
	height: 50px !important;
	background-color: #E2EDF4 !important;
	border-left: 1px solid #ddd !important;
	border-bottom: 1px solid #ddd !important;
	cursor: pointer !important;
	z-index: 9999 !important;
}

/* MENUという文字 */
.menu-label {
	font-size: 9px !important;
	color: #333 !important;
	display: block !important;
	margin-top: -2px !important;
	margin-bottom: 4px;
}

/* 3本線のコンテナ */
.hamburger-lines {
  position: relative;
  width: 25px;
  height: 15px;
}

.hamburger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger-lines span:nth-child(1) { top: 0; }
.hamburger-lines span:nth-child(2) { top: 6px; }
.hamburger-lines span:nth-child(3) { top: 12px; }

/* クリック時（開いている時）の動作 */
.hamburger.active .hamburger-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.active .hamburger-lines span:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* スライドしてくるメニュー本体 */
.sp-side-menu {
	display: block;
	position: fixed;
	top: 0;
	right: -280px;
	width: 280px;
	height: 100vh;
	background-color: rgba(255,255,255,1.00);
	z-index: 9998;
	transition: right 0.3s ease;
	overflow-y: auto;
}
.sp-side-menu.active {
	right: 0;
}
/* スライドメニューの中身のデザイン */
.sp-menu-inner {
	padding-top: 60px;
}
.sp-menu-inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sp-menu-inner ul li a {
	display: block;
	padding: 15px 20px;
	font-size: 16px;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #B8B8B8;
}
.sp-menu-inner ul li a:hover {
	background-color: #f9f9f9;
}
/* 黒い幕（オーバーレイ） */
.sp-menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9997;
}
.sp-menu-overlay.active {
	display: block;
}
 
}
/* ========================================================
   ここから：既存PCサイトのレスポンシブ（スマホ化）上書きコード
======================================================== */

@media screen and (max-width: 768px) {
  /* 1. 大枠の固定幅を100%にして、はみ出しを防ぐ */
  #wrapper, #container, #contents, #header, #footer .footer950, #c_footer {
	width: 100% !important;
	box-sizing: border-box;
	margin-right: auto;
	margin-left: auto;
}

  /* 2. 画像は画面サイズに合わせて縮小させる */
  img {
 max-width: 100% !important;
 height: auto !important;
}

  /* 3. トップのメイン画像（背景画像）をスマホに合わせる */
  #mainImg {
 width: 100% !important;
 background-size: cover; /* 画像を枠いっぱいに合わせる */
 background-position: center center;
 height: 200px; /* スマホ用の高さ（お好みで調整してください） */
}

  /* 4. 横並び（左右分割）を解除して「縦1列」にする */
  .left, .right, #subnav, #header h2.logo {
 float: none !important;
 width: 100% !important;
 height: auto !important;
 margin-top: 10px;
 text-align: center; /* 必要に応じて左寄せ(left)に */
}

  /* 5. .right の中にある見出しなどの幅も100%にする */
  .right .title, .right .all, .right ul li {
 width: 100% !important;
 box-sizing: border-box;
 float: none !important;
}

  /* 6. テーブル（表）がはみ出さないようにする */
  table.schedule, table.calender {
 width: 100% !important;
 display: block;        /* 表をブロック要素に変換 */
 overflow-x: auto;      /* はみ出した場合は横スクロールさせる */
 white-space: nowrap;   /* 文字の意図しない改行を防ぐ */
}

  /* 7. ご挨拶やトピックス、ニュースなどの幅を100%に */
  #greeting .title, #greeting dl dd, #linksp {
 width: 100% !important;
 box-sizing: border-box;
}
 dl.topic, dl.news {
 width: 100% !important;
 box-sizing: border-box;
}

  /* 8. フッター周りの幅調整 */
  #footer_nav {
 width: 100% !important;
 line-height: 2.0; /* リンクを指で押しやすいように行間をあける */
}
 #sitemap .title, #sitemap dl dd, #sitemap dl dt {
 width: 100% !important;
 box-sizing: border-box;
}
 #footer ul.logo li {
 width: 100% !important;
 float: none !important;
 text-align: center;
}
}


/* PCサイズ（769px以上）の時はスマホメニュー要素を完全に隠す */
@media screen and (min-width: 768px) {
.hamburger, .sp-side-menu, .sp-menu-overlay {
	display: none !important;
}
}