/* ヘッダー共通スタイル */
*{box-sizing:border-box}
body{font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif}
.site-header{border-bottom:4px solid #bfeee6}
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;width:100%;display:flex;flex-direction:column;align-items:center}
.site-header > *{width:100%;display:flex;justify-content:center}
.site-header .header-top{--header-top-height:72px}
.header-top{background:#fff;position:relative;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.container{width:100%;max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:2px 25px}
.logo a{display:inline-block}
.logo img{height:40px;display:block;max-width:240px}

/* さらに小さい画面ではロゴを少し小さくする */
@media (max-width:520px){
	.logo img{height:34px}
}
.search{flex:1;display:flex;justify-content:center}
.search form{width:60%;max-width:600px;display:flex}
.search input[type="text"]{flex:1;padding:10px 12px;border-radius:20px 0 0 20px;border:1px solid #ddd;border-right:0;font-size:14px}
.search button{background:#eee;border:1px solid #ddd;border-left:0;border-radius:0 20px 20px 0;padding:8px 14px;cursor:pointer}
.icons{display:flex;gap:12px;align-items:center}
.icons .icon{font-size:20px;text-decoration:none;color:#333}

.category-nav{background:#e6f9f5;border-top:3px solid #83d6c4}
.category-nav .nav-inner{display:flex;justify-content:center;gap:48px;padding:5px 20px}
.category-nav a{color:#0b8f79;text-decoration:none;font-weight:600}

/* 本文がヘッダーと重ならないよう、JSで動的に padding-top を設定します。
	フォールバックとして小さめの余白を入れておきます。 */
body{padding-top:72px}

/* レスポンシブ */
@media (max-width:800px){
	.container{padding:8px}
	.search form{width:80%}
	.category-nav .nav-inner{gap:20px}
}