@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;
    top: auto;
}
img {
    max-width: 100% !important;
    height: auto !important;
}

 /* 1. ヘッダーを横並びに変更 */
    #header .inner-header {
        display: flex;
        flex-direction: row;        /* 縦積みから横並びに変更 */
        align-items: center;        /* 垂直方向の中央揃え */
        justify-content: space-between; /* ロゴとメニューを両端に配置 */
        padding: 10px 20px;
    }

    /* 2. ロゴを小さく調整 */
    .logo {
    width: 100%;              /* スマホ用に横幅を固定して縮小 */
    margin: 0;
    max-width: 280px;
    position: absolute;
    top: -30px;
    }
    .logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* 3. ハンバーガーボタンの位置を調整 
    .hamburger {
        position: static;          
        margin: 0;
        transform: scale(0.8);     
    }
    */
    
    /* Gナビ（メニュー）の表示位置調整 
    .gnav {
        display: none; 
    }
*/



/* --- 改修版ハンバーガーメニュー --- */
.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: #FFFFFF !important;
	border-left: 1px solid #ddd !important;
	border-bottom: 1px solid #ddd !important;
	cursor: pointer !important;
	z-index: 9999 !important;
	padding-top: 2px;
}

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

/* 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: -100vh; /* 初期位置：画面外の上へ */
    left: 0;
    width: 90%; /* 横幅はフルに */    
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 0;        /* 左右に5%ずつの余白 */
    height: 70vh!important;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 9998;
    /* プルダウン用のイージング設定 */
    transition: top 1.4s cubic-bezier(0.24, 1, 0.30, 1);
    overflow-y: auto;    /* 長いリストの場合はスクロール可能に */
    border-radius: 0 0 10px 10px; /* 下側の角を丸くしてフローティング感を出す */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 影をつけて浮かす */
}
.sp-side-menu.active {
	 top: 0px; 
}
/* スライドメニューの中身のデザイン */
.sp-menu-inner {
	padding-top: 20px;
}
.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 i {
    margin-right: 10px;
}

.sp-menu-inner ul li a:hover {
	background-color: #f9f9f9;
}

.sp-menu-inner ul li:last-child a {
    border-bottom: none;
 }    
    
/* 黒い幕（オーバーレイ） */
.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サイズ（769px以上）の時はスマホメニュー要素を完全に隠す */
@media screen and (min-width: 768px) {
.hamburger, .sp-side-menu, .sp-menu-overlay {
	display: none !important;
	position: relative;
}

}