@charset "utf-8";

/* ----- 1. 全体リセットと全体設定（元の設定を維持） ----- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	line-height: 2;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-size: 95%;
	color: #333333;
	background-color: #ffffff;
}

ol, ul {
	list-style: none;
}

a {
	color: #0000FF;
	text-decoration: none;
}

a:hover {
	color: #C74B15;
	text-decoration: underline;
}

.color1 {
	color: #FF0033; /*文字色指定*/
}

/* ----- 2. ヘッダー（ロゴの隣にメニューを配置） ----- */
#header {
    background-color: #003300;
    width: 100%;
    padding: 10px 0;
}

#header h1 {
    font-size: 0.8em;
    color: #ffffff !important;
    font-weight: normal;
    margin: 0 100px 0 0; /* ★h1のすぐ右に30pxの隙間を開けてボタンを置く */
    padding: 0;
    white-space: nowrap;
}


/* ヘッダー全体を縦に並べる設定 */
#header_inner {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}


/* 1行目：h1を左寄せ */
#header_top_row {
    width: 100%;
    text-align: left;
}

/* --- 下段：ロゴとナビの並び --- */
#header_main_row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* 右側：上段と下段を分ける構造 */
/* 右側：ボタンとメニューを右寄せで上下に並べる */
#header_right_content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
}

/* 上段：h1とボタンを横一行に並べる */
#header_upper {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

/* --- 上段：h1とボタンを「左寄せ」で並べる --- */
#header_upper_row {
    display: flex;
    align-items: center; 
    justify-content: flex-start; /* ★右端へ飛ばさず、左に寄せます */
 /*   margin-bottom: 15px;　*/
    width: 100%;
}


/* ボタンエリアの設定 */
#header_buttons {
    display: flex;
    gap: 12px;
    /* margin-left: auto; は削除してください */
}

#logo {
	position: static;
	margin-right: 20px;
}

#logo img {

	width: auto;
	display: block;
}

/* ----- 3. ナビゲーション（元の画像を適用・白線なし） ----- */
/* 下段：メニュー（ナビゲーション）を右寄せにしたい場合は flex-end に */
.nav {
    width: 100%;
}

/* 下段メニューの横並び設定 */
.nav ul {
    display: flex;
    /*gap: 20px;*/
}

.nav li {
	position: relative;
}

.nav li a {
	display: block;
	padding: 5px 25px;
	color: #ffffff;
	font-size: 0.95em;
	font-weight: bold;
	text-decoration: none;
	background-color: #003300;
	background-image: none !important; 
    white-space: nowrap;
    /* ★念のため、枠線をすべてゼロにリセット */
    border: none !important;
    outline: none !important;}

.nav li a:hover {
	color: orange;
	background-color: #003300;  
    background-image: none !important;
  }  
    
/* 子メニュー制御 */
.nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 160px;
	z-index: 1000;
	background-color: #ffffff;
	border: 0px solid #003300;
	flex-direction: column;
}

.nav li:hover > ul {
	display: block;
}

/* 子メニューのリンクのホバー設定 */
.nav li ul li a:hover {
    background-color: #ffffff !important; /* 背景を薄いグレーに（お好みで） */
    color: #008000 !important;           /* ★文字色を緑（#008000）に変更 */
    text-decoration: none;
}

.nav li ul li a {
	color: #333 !important;
	background-image: none !important;
	background-color: #ffffff !important;
	padding: 8px 10px;
	font-weight: bold;
	font-size: 0.95em;
	border: none !important;
	outline: none;
	text-align: left;
}

/* PCではスマホ用ボタンを隠す */
.sp-only { display: none; }


/* ボタンのデザイン：楕円・黄色み・半透明 */
.btn_order, .btn_contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 36px;
    border-radius: 20px;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 0.85em;
    text-decoration: bold;
}

/* ご注文（黄色みの強いオレンジ） */
.btn_order {
    background-color: rgba(255, 194, 71, 0.9); /* 暖色系のイエローオレンジ */
	 
}

/* お問い合わせ（少し明るいグリーン） */
.btn_contact {
    background-color: rgba(60, 180, 40, 0.9); 
}

/* アイコンの間隔調整 */
.icon {
    margin-right: 6px;
}

/* ホバー時：透明度をなくしてハッキリさせる */
.btn_order:hover, .btn_contact:hover {
    opacity: 1;
    background-color: rgba(255, 183, 0, 1); /* ホバーで不透明に */
    text-decoration: bold;
	box-shadow: inset 80px 2px 55px 8px rgba(132, 216, 138, 0.4);
}
.btn_contact:hover {
	background-color: rgba(46, 163, 96, 1); 
	    box-shadow: inset 80px 2px 55px 8px rgba(93, 159, 48, 1);
}

/* ----- 4. メインレイアウト（元の構造を完全復元） ----- */
#container {
	clear: both;
	width: 100%;
	background-color: #ffffff;
}

#container a:hover img { /*画像にマウスをのせた時半透明にする*/
    filter: Alpha(opacity=70); /*要素の透明度*/
}


#main {
	width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
	float: left;  /*要素を左か右に寄せて配置(rightは右に寄せる)*/
	margin-right: -210px; /* サイドバーの幅分マイナス */
}

#content {
	margin-right: 150px; /* サイドバーのスペースを確保 */
}

#content_inner {
	padding: 20px 5%;
}

.post h2 {
	padding: 5px 10px;
	margin-top: 10px; /*ボックス外側下の余白*/
	font-size: 1.5em;
	color: #ffffff;
	background-color: #00a877;
	border-radius: 5px;
}

.post a {
   color: dimgray;    /* リンクの色を設定 */
   
}


.post ul {
	/*margin-bottom: 3px; /*ボックス外側下の余白*/
}

.post ul li {
	margin-left: 10px; /*ボックス外側左の余白*/
	background-position: 0px 3px; /*背景画像の表示開始位置(値2つは左からと上からの距離)*/
	padding-left: 30px; /*ボックス内側左の余白*/
	background-image: url("../images/point.jpg");  /*背景画像指定　url(画像ファイルを指定)*/
	background-repeat: no-repeat; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
}

.post img {
  vertical-align: middle;      /* 行の中央に配置 */
}

.newlist {
	/*margin-bottom: 5px; /*ボックス外側下の余白*/
}

.newlist dl {
	width: auto; /*幅指定(autoは初期値に戻す)*/
/*	height: 50px; /*領域の高さ指定*/
/*	overflow: auto; /*領域に入りきらない内容の処理(autoはブラウザに依存(通常はみ出す場合はスクロール表示))*/
	padding-left: 5px; /*ボックス内側左の余白*/
	text-align: left; /*行の水平方向の揃え方(leftは左寄せ)*/
}

.newlist dt {
	font-weight: bold; /*フォントの太さ指定(boldは太字)*/
	color: #4F4F4F; /*文字色指定*/
}

.newlist dd {
	border-bottom: 1px solid #cccccc; /*下境界線の一括指定(solidは1本線,線の太さ,線の色)*/
	margin: 0px 10px 0px 5px; /*ボックス外側の余白(値4つは左から上,右,下,左の値)*/
}

/* ---- 画像リストの設定 ----- */

.imglist {
	width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
}

.imglistbox {
	float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
	height: 180px; /*領域の高さを指定*/
	width: 204px; /*幅指定*/
	padding: 2px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
	margin: 0 1%; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
	margin-bottom: 20px; /*ボックス外側下の余白*/
	overflow: hidden; /*領域に入りきらない内容の処理(hiddenははみ出た部分を表示しない)*/
	font-size: 1em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
	text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
	border: 1px solid #cccccc; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
}

.imglistbox img {
	margin: 2px 0; /*ボックス外側の余白(値2つは左から上下,左右の値)*/
}


/* ----- 5. サイドメニュー（元の設定を復元） ----- */
#rightside {
	float: right;
	width: 200px;
	padding-top: 20px;
}

.sidemenu li a {
	padding-left: 20px;
	color: #333333;
	line-height: 30px;
	display: block;
	background-image: url(../images/sidemenu.gif);
	background-repeat: no-repeat;
}

.sidemenu li a:hover {
	background-position: 0 -40px;
}

/* ----- 6. 表 (table) 本来のデザインを復元（全角スペースを排除） ----- */
table {
  border-collapse: collapse;
  border: solid 2px #00a877;/*表全体を線で囲う*/
　text-align: center;
  width: 80%;
  margin-top: 10px;
  margin: auto;

}


table th, table td {
  border: dashed 1px #00a877; /*破線 1px 深緑*/
  text-align: center; /*中央 */

}


table th a, table td a {
   color: dimgray;    /* リンクの色を設定 */
   text-decoration: none; /*下線を消す */
    font-weight: bold;     /*   太字にする */
}


table th a:visited, 
table td a:visited {
    color: #A6A4A4;
}

.text-right {
	text-align: right;
}

table .annot {
	text-align: left;
	font-size: 0.9em; /* 文字を小さく */
    
	
}

/*余白と文字装飾は省略*/
caption {
font-weight: bold;
text-align: left; /* 左 */
padding: 0.5em; /* 文字周りの余白 */
color: #FFF; /* 文字色 */
background: #00a877; /* 背景色 */	
border-radius: 10px 10px 0 0; /* 半径5pxの丸み */
	
}


/* ----- 7. フッター ----- */
#footer {
	clear: both;
	width: 100%;
	height: 70px;
	background-image: url(../images/foot.gif);
	background-repeat: repeat-x;
}

#footer p {
	font-size: 0.75em;
	text-align: center;
	padding-top: 25px;
	color: #333;
}


/* --- ハンバーガーメニューの基本スタイル --- */
#menu-toggle {
   display: none; /* PCでは非表示 */
    width: 30px;
    height: 25px;
    cursor: pointer;
    position: relative;
    z-index: 1000;
	
}

#menu-toggle span {
 display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    transition: .3s;
}

#menu-toggle span:nth-child(1) { top: 0; }
#menu-toggle span:nth-child(2) { top: 11px; }
#menu-toggle span:nth-child(3) { top: 22px; }

/* ×印への変形設定 */
#menu-toggle.active span:nth-child(1) { transform: translateY(11px) rotate(-45deg); }
#menu-toggle.active span:nth-child(2) { opacity: 0; }
#menu-toggle.active span:nth-child(3) { transform: translateY(-11px) rotate(45deg); }



/* ----- 8. レスポンシブ (修正版) ----- */


/* タブレット・スマホサイズ（1024px以下） */
@media screen and (max-width: 1024px) {
	
	.pc-only { display: none !important;}
	
	/* スマホメニュー内のボタンを表示 */
    .sp-only { 
		display: flex !important;	
        justify-content: center;
        padding: 10px 0;
	}
    .sp-only a {
        margin: 10px; /* ボタンの周りに余白 */
        border-radius: 20px; }
	
/*	.sp-only .btn_order { 
		color: #000000;
		background-color: rgba(255, 193, 7, 0.85) !important; 
	    margin: 0px; 
		padding: 5px 0 0 0; width: 100%;
	}
    .sp-only .btn_contact { 
		background-color: rgba(40, 167, 69, 085) !important; 
		margin: 0px; 
		padding: 5px 0 0 0;
		width: 100%;
		color: #00000;
	}
*/
	/* ご注文・お問い合わせボタン（メニュー内）の設定 */
    .sp-only .btn_order { background-color: #ffc107 !important; color: #fff !important; padding: 5px 0 0 0; margin: 0px; width: 130px; text-align: center;}
    .sp-only .btn_contact { background-color: #28a745 !important; color: #fff !important; padding: 5px 0 0 0; margin: 0px;  width: 130px; text-align: center;}
	
    #header_inner {
        flex-direction: column; /* 全体を縦に並べる */
      	 align-items: flex-start;
		/* PC用のボタンを隠す */
    
    }

    #header_right_content {
        align-items: center;
    }
        
    #header_upper {
        flex-direction: column; /* h1とボタンを縦に並べる */
        align-items: center;
        gap: 10px;
    }
	/* ボタンとh1の並びを縦にする */
    #header_upper_row {
        flex-direction: column;
        align-items: flex-start; 
    }
/* 親要素：縦並びを解除して横並び(row)にし、両端に寄せる */
    #header_main_row {
        display: flex !important;
        flex-direction: row !important; /* 横並びに固定 */
        justify-content: space-between !important; /* ロゴを左、三本線を右に */
        align-items: center !important;
        width: 100%;
        position: relative;
    }

	#header h1 {
        white-space: normal; /* 折り返しを許可 */   
		margin: 0 5px 10px 0;
    }
    #header_buttons {
        margin-left: 0;
    }

/* 三本線：右寄せを確定させる */
    #menu-toggle {
        display: block !important;
        margin-left: auto !important; /* 右側に押し出す */
        margin-right: 0 !important;
        position: relative;
        z-index: 1000; 
    }
	
    .nav {
    display: none;
        position: absolute;
        top: 100%;
        right: 0;
        width: 250px; 
        background: #ffffff !important; /* ★背景を白に */
        z-index: 999;
        border: 1px solid #ccc; /* 枠線を少しグレーに */
        padding: 10px 0;
    }
	
	/* メニューが開いた時の設定 */
    .nav.open {
       		
		 display: flex;
    align-items: center;
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    font-weight: 900;
    transition: all 0.3s;
    }
	
	
	.nav li a {
	
	font-size: 0.95em;
	font-weight: none;
	text-decoration: none;
	background: #fff;
		color: #000;
    border: none !important;
    outline: none !important;	
	
	}
		
	.nav li a:hover {
	color: black;
    font-weight: none;
	background-color: #fff;  
    background-image: none !important;
  }  
	
	
/* JavaScriptで 'open' クラスがついた時に表示する */
    .nav.open {
        display: block !important;
    }
    .nav ul {
   	 	display: flex;
        flex-direction: column;
        align-items: center; /* 項目を中央に寄せる */
        padding: 0;
        margin: 0;
        width: 100%;
		
		
    }

	.nav ul li {
        width: auto;
        text-align: left;
        display: block;
        border: none;           /* ボーダーなし */
		
    }
	.nav ul li a {
      display: block;
        padding: 10px 0;
        color: #000000 !important; /* ★文字を黒に */
        text-decoration: none;
        white-space: nowrap;
    }
 
	/* ★子メニュー（製品情報の下など）：最初は隠す */
    .nav ul li ul {
        display: none; 
        width: auto;
        
        padding-left: 20px;
    }
	
	.nav ul li ul li {
        padding-left: 20px;/*親より右に寄せる */
		text-align: center; 
		
    }
	
	/* ★マウスを乗せた時だけ子メニューを表示 */
    .nav ul li:hover > ul {
        display: block !important;
    }
	
	.nav ul li ul li a {
        padding: 10px 0; text-align: center;  width: 80%;
        font-size: 0.9em; 
    }
	
	#content {
	margin: 0px; /* サイドバーのスペースを確保 */
	}


	
}

/* さらに小さい画面（768px以下） */
@media screen and (max-width: 768px) {
    #header h1 {
        font-size: 0.7em; /* 文字をさらに小さく */
    }

    .btn_order, .btn_contact {
        width: 100px; /* ボタンを少し小さく */
        font-size: 0.8em;
    }
}