@charset "utf-8";
/*
PC： 小川屋 2025
*/

/* --------------------------------------------------------------------------------
	html tag
-------------------------------------------------------------------------------- */
body {
	min-width: 1300px;
	margin: 0;
	padding: 0 0 50px;
	line-height: 1.5;
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	font-weight: 500;
	color: #000;
	font-family: "Noto Serif", serif;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}


* {
	box-sizing: border-box;
	font-family: "Noto Serif", serif;
}


/* --------------------------------------------------------------------------------
	common
-------------------------------------------------------------------------------- */
.common * {
	margin: 0;
	padding: 0;
}
.common ul, .common ul li .common ol, .common ol li {
	list-style: none;
}
.common h1, .common h2, .common h3, .common h4, .common h5, .common h6, .common input, .common textarea {
	font-weight: normal;
	font-size: 1em;
}
.common table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 1em;
}
.common a {
	text-decoration: none;
	color: #000;
}
.common a:link, .common a:visited {
	text-decoration: none;
	color: #000;
}
.common a:hover, .common a:active {
	text-decoration: underline;
	color: #000;
}

/* --------------------------------------------------------------------------------
	class
-------------------------------------------------------------------------------- */
.clear {
	clear: both;
}
br.clear {
	display: block;
	margin: 0;
	padding: 0;
	clear: both;
	height: 0;
	border: none;
	visibility: hidden;
	font-size: 0;
}
.clearfix::after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1%;
}
* html .clearfix {
	height: 1%;
	/*\*/ /*/
	height: auto;
	overflow: hidden;
	/**/
}
.inner {
	width: 1200px;
	margin: 0 auto;
}
/********** プレースホルダー **********/
::-webkit-input-placeholder {
	color: #000;
}


/* --------------------------------------------------------------------------------
	device
-------------------------------------------------------------------------------- */
.device-sp {
	display: none;
}
.device-sp-inline {
	display: none;
}
.device-pc {
	display: block;
}
.device-pc-inline {
	display: inline;
}


/* --------------------------------------------------------------------------------
	container
-------------------------------------------------------------------------------- */
#container {
	
}


/* --------------------------------------------------------------------------------
	header
-------------------------------------------------------------------------------- */
#header {
	position: absolute;
	z-index: 20;
	width: 100%;
}



/* ----------------------------------------
ロゴ（absolute）
---------------------------------------- */
#header .h-logo {
	top: 30px;
	left: 34px;
	width: 252px;
	
	transition: opacity 1s .5s ease-out;
	position: absolute;
	z-index: 1000;
}
#header .h-logo a {
	display: block;
}




/* ----------------------------------------
head-inner-wrap
---------------------------------------- */
#header .head-inner-wrap {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	transition: all 0.2s 0s ease-out;
	will-change: animate;
	opacity: 0;
	visibility: hidden;
}
#header .head-inner-wrap::before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #d6d6d6;
	position: absolute;
	top: calc(100% - 1px);
	z-index: 10;
	pointer-events: none;
}

/********** 開いているとき **********/
#header.nav-open .head-inner-wrap {
	position: relative;
	
	opacity: 1;
	visibility: inherit;
	transform: translateY(0);
	z-index: 1000;
}
#header .head-inner {
	display: flex;
	flex-wrap: wrap;
	
	max-width: 1290px;
	min-width: 1100px;
	padding: 0 20px 14px;
	margin: 0 auto;
}

/* ----------------------------------------
fixed：固定ロゴ
---------------------------------------- */
/* ヘッダー内の固定ロゴ */
#header .head-logo {
	/*
	width: 13.2vw;
	max-width: 252px;
	min-width: 120px;
	*/
	width: 252px;
	margin: 0 86px 0 0;
	padding: 20px 0 0;
	transition: padding 0.2s 0s, width 0.2s 0s;
}
#header .head-logo a {
	display: block;
}
#header .head-logo img {
	display: block;
	width: 100%;
}

/* ----------------------------------------
グローバルナビ
---------------------------------------- */
#g-nav {
	display: flex;
	width: calc(100% - 375px);
}
#g-nav {
	margin: 0 37px 0 0;
}

/* ----------------------------------------
グローバルナビ内：メニューリスト
---------------------------------------- */
#g-nav ul.g-nav-list {
	display: flex;
	width: 393px;
	padding: 40px 0 0;
}

/* ul.g-nav-list li */
#header #g-nav ul.g-nav-list li {
	margin-right: 30px;
}

/* 最後の li */
#header #g-nav ul.g-nav-list li:last-child {
	margin-right: 0;
}

/* ----------------------------------------
グローバルナビ内：
お問い合わせ・オンラインショップ
---------------------------------------- */
/* --- ul.btn-list --- */
#header #g-nav ul.btn-list {
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 33px 0 0;
	margin: 0;
	width: 460px;
}

/* ul.btn-list li */
#header #g-nav ul.btn-list li {
	width: 220px;
}

/* aタグ全体（ボタンのベース） */
#header #g-nav ul.btn-list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	position: relative;
	padding-right: 38px;
	text-align: center;
	text-decoration: none;
}

/* --- お問い合わせボタン --- */
#header #g-nav ul.btn-list li.btn-list-contact a {
	background-color: #fff;
	border: 1px solid #999;
	color: #333;
}

/* --- オンラインショップボタン --- */
#header #g-nav ul.btn-list li.btn-list-online a {
	background-color: #be3e11;
	border: 1px solid #be3e11;
	color: #fff;
}

/* 矢印アイコン */
#header #g-nav ul.btn-list li a i {
	position: absolute;
	right: 19px;
	top: 14px;
	width: 8px;
	height: 16px;
}

/* お問い合わせ */
#header #g-nav ul.btn-list li.btn-list-contact a i {
	background: url("../images/common-2025/h-icon-arr-contact.png") no-repeat 0 0;
	background-size: 100% 100%;
}

/* オンラインショップ */
#header #g-nav ul.btn-list li.btn-list-online a i {
	background: url("../images/common-2025/h-icon-arr-online.png") no-repeat 0 0;
	background-size: 100% 100%;
}


/* ----------------------------------------
h-btns
---------------------------------------- */
#header .h-btns {
	position: absolute; /* ヘッダー内の任意の位置に配置するため */
	top: 0;
	right: 0;
	
	width: 194px;
}

/* ボタンリスト (横並び設定) */
#header .h-btns ul {
	display: flex; /* 子要素を横並びに */
	margin: 0;
	padding: 0;
	list-style: none;
	
	width: 100%;
}

/* 各リストアイテム */
#header .h-btns ul li {
	margin: 0;
	padding: 0;
}

/* オンラインショップ */
#header .h-btns ul li .nav-btn-online {
	position: relative;
	z-index: 1000;
}
#header .h-btns ul li .nav-btn-online a {
	width: 97px;
	height: 97px;
	padding: 22px;
	background-color: #be3e11; /* 背景色を設定 */
	display: flex;
	justify-content: center;
	align-items: center;
}

/********** ハンバーガーメニューを開いたらオンラインのz-indexを変更 **********/
#header.nav-open .h-btns ul li .nav-btn-online {
	z-index: 1;
}



/* ======================================================= */
/* 1. 通常時（ボタンコンテナと要素の配置） */
/* ======================================================= */

/* メニュー */
#header .btn-open-close {
	display: block;
	position: absolute;
	width: 97px;
	height: 97px;
	top: 0;
	right: 0;
	z-index: 1000;
	background-color: #fff;
	cursor: pointer;
}

#header .btn-open-close .btn-open-close-box {
	overflow: hidden; 
	width: 55px;
	height: 97px;
	position: absolute;
	left: 21px;
}

/* 各線 */
#header .btn-open-close .btn-open-close-box i {
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 1px;
	background-color: #000;
	transition: transform 0.2s ease-out, opacity 0.2s ease-out, top 0.2s ease-out;
}

/* 1本目の線 */
#header .btn-open-close .btn-open-close-box i:nth-of-type(1) {
	top: 31px;
}

/* 2本目の線（クロス中心点） */
#header .btn-open-close .btn-open-close-box i:nth-of-type(2) {
	top: 38px;
}

/* 3本目の線 */
#header .btn-open-close .btn-open-close-box i:nth-of-type(3) {
	top: 45px;
}

/* MENU文字画像コンテナ */
#header .btn-open-close .btn-open-close-box .h-btn-txt-menu {
	position: absolute;
	top: 45px; 
	left: 50%;
	transform: translateX(-50%);
	transition: opacity 0.2s ease-out;
	width: 50px;
	height: auto;
}


/* ======================================================= */
/* 2. 開いているとき（#headerに.nav-openが付与） */
/* ======================================================= */

/* 1本目の線: 中央 (38px) へ移動しながら45度回転 */
#header.nav-open .btn-open-close .btn-open-close-box i:nth-of-type(1) {
	transform: translateX(-50%) translateY(7px) rotate(45deg);
}

/* 2本目の線: 中央 (38px) に留まり、右に移動しながらフェードアウト */
#header.nav-open .btn-open-close .btn-open-close-box i:nth-of-type(2) {
	opacity: 0;
	transform: translateX(100%); 
}

/* 3本目の線: 中央 (38px) へ移動しながら-45度回転 */
#header.nav-open .btn-open-close .btn-open-close-box i:nth-of-type(3) {
	transform: translateX(-50%) translateY(-7px) rotate(-45deg);
}

/* MENU文字画像: 非表示 */
#header.nav-open .btn-open-close .btn-open-close-box .h-btn-txt-menu {
	opacity: 0;
}


/* オープン時： バツの位置・サイズ調整 */
#header.nav-open .btn-open-close .btn-open-close-box i {
	width: 58px;
}
#header.nav-open.nav-open .btn-open-close .btn-open-close-box i:nth-of-type(1) {
	top: 40px;
}
#header.nav-open .btn-open-close .btn-open-close-box i:nth-of-type(2) {
	/* 2番目は消えている */
}
#header.nav-open .btn-open-close .btn-open-close-box i:nth-of-type(3) {
	top: 53px;
}


/* -----------------------------------------------------------------------------------
追従型ヘッダー
head-inner-wrapの親要素を固定する
----------------------------------------------------------------------------------- */
/* --- スクロール追従ヘッダー (.h-fix) --- */

/* 1. 親要素：固定化前の初期状態（透明 ＆ スライド位置をリセット） */
#header > .h-fix {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 900;
	
	/* フェードイン/アウトの制御 */
	opacity: 0;
	transition: opacity 0.2s ease-out; /* フェードのみ0.2s */
	
	/* 中身を隠すためと、高さが確定するため */
	overflow: hidden; 
}

/* 2. 親要素：固定された状態 */
#header > .h-fix.fixed {
	opacity: 1; /* フェードイン */
}


/* --- クローンされた中身 (.head-inner-wrap) --- */
#header > .h-fix .head-inner-wrap {
	/* スライドのための初期位置とアニメーション設定 */
	/* opacity: 0; を削除 */
	transform: translateY(-100%); /* 画面外の上へ移動 */
	
	/* 【修正】transform (スライド) のみ 0.1s に */
	transition: transform 0.1s ease-out; 
}

/* 親要素が固定された時の、中身の表示状態 */
#header > .h-fix.fixed .head-inner-wrap {
	/* opacity: 1; を削除 */
	transform: translateY(0); /* スライドダウン */
}






/* --------------------------------------------------------------------------------
	wrapper
-------------------------------------------------------------------------------- */
#wrapper {
	padding: 0 0 150px;
}


/* --------------------------------------------------------------------------------
	main
-------------------------------------------------------------------------------- */
#main {
}


/********** wp-pagenavi **********/
#main .wp-pagenavi {
	word-break: break-all;
	
	text-align: center;
	padding: 40px 0 0;
	font-size: 16px;
}
#main .wp-pagenavi .pages {
	padding: 10px;
	border: none;
	color: #000;
	background: #fff;
}
#main .wp-pagenavi .current {
	padding: 2px 6px;
	border: none;
	color: #fff;
	font-weight: normal;
	background: #be3e11;
}
#main .wp-pagenavi .extend {
	padding: 2px 6px;
	border: none;
	color: #000;
	background: #fff;
}
#main .wp-pagenavi a {
	padding: 2px 6px;
	border: none;
	color: #000;
	background: #fff;
}


/* --------------------------------------------------------------------------------
	sub1
-------------------------------------------------------------------------------- */
#sub1 {
	width: 220px;
}
/********** TOP **********/
#sub1 .s1-btn-top {
	padding: 0 0 20px;
}
#sub1 .s1-btn-top a {
	display: block;
	padding: 10px;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	background: #6e6a2d;
}
/********** サイドバーメニュー **********/
#sub1 .sidebar-menu {
	padding: 0 0 20px;
	font-size: 14px;
}
#sub1 .sidebar-menu .widget_recent_entries .widget-header, #sub1 .sidebar-menu .widget_recent_comments .widget-header, #sub1 .sidebar-menu .widget_categories .widget-header, #sub1 .sidebar-menu .widget_archive .widget-header {
	border-left: solid 5px #45bd14;
}
#sub1 .sidebar-menu .widget_recent_entries .widget-header span, #sub1 .sidebar-menu .widget_recent_comments .widget-header span, #sub1 .sidebar-menu .widget_categories .widget-header span, #sub1 .sidebar-menu .widget_archive .widget-header span {
	display: block;
	padding: 6px 0 6px 16px;
	border-top: solid 1px #a0a0a0;
	border-right: solid 1px #a0a0a0;
	border-bottom: solid 1px #a0a0a0;
	font-weight: bold;
	font-size: 16px;
}
#sub1 h2 {
	margin: 0 0 10px;
	padding: 5px 15px;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	background: #6e6a2d;
}
#sub1 h2 a {
	display: block;
	color: #fff;
}
#sub1 .sidebar-menu ul {
	margin: 0;
	padding: 0 0 15px 15px;
}
#sub1 .sidebar-menu ul li ul {
	padding-bottom: 5px;
}
#sub1 .sidebar-menu ul li {
	display: block;
	padding: 5px 0 5px 0;
}
#sub1 .sidebar-menu ul li a {
	display: block;
}
#sub1 .sidebar-menu ul li:last-child a {
	border-bottom: none;
}
#sub1 .sidebar-menu .widget_archive {
	padding: 0 0 12px;
}
/********** 検索 **********/
#sub1 .sidebar-menu .widget_search {
	padding: 20px 0 0;
	border-top: dotted 1px #a0a0a0;
}
#sub1 .sidebar-menu .widget_search .widget-header {
	padding: 0 0 10px;
	border-bottom: none;
	font-weight: bold;
	font-size: 16px;
}
#sub1 .sidebar-menu .widget_search .wp-block-search__inside-wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#sub1 .sidebar-menu .widget_search .wp-block-search__input {
	flex-grow: unset;
	display: block;
	width: 170px;
	padding: 6px 0;
	border: solid 1px #a0a0a0;
}
#sub1 .sidebar-menu .wp-block-search__button {
	display: block;
	margin: 0 auto;
	padding: 4px 5px;
	border: none;
	color: #fff;
	background: #666;
	white-space: nowrap;
}
/* --------------------------------------------------------------------------------
	sub1
-------------------------------------------------------------------------------- */
#sub1 {
	width: 250px;
}
/********** TOP **********/
#sub1 .s1-btn-top {
	padding: 0 0 20px;
}
#sub1 .s1-btn-top a {
	display: block;
	padding: 0 0 9px 34px;
	border-bottom: solid 1px #45bd14;
	background: url("images/common-2025/s1-icon-top.png") no-repeat 0 0;
}
/********** サイドバーメニュー **********/
#sub1 .sidebar-menu {
	padding: 0 0 20px;
	font-size: 14px;
}
#sub1 .sidebar-menu .widget_recent_entries .widget-header, #sub1 .sidebar-menu .widget_recent_comments .widget-header, #sub1 .sidebar-menu .widget_categories .widget-header, #sub1 .sidebar-menu .widget_archive .widget-header {
	border-left: solid 5px #45bd14;
}
#sub1 .sidebar-menu .widget_recent_entries .widget-header span, #sub1 .sidebar-menu .widget_recent_comments .widget-header span, #sub1 .sidebar-menu .widget_categories .widget-header span, #sub1 .sidebar-menu .widget_archive .widget-header span {
	display: block;
	padding: 6px 0 6px 16px;
	border-top: solid 1px #a0a0a0;
	border-right: solid 1px #a0a0a0;
	border-bottom: solid 1px #a0a0a0;
	font-weight: bold;
	font-size: 16px;
}
#sub1 .sidebar-menu ul li {
	display: block;
	padding: 5px 0 5px 20px;
	background: url("images/common-2025/s1-icon-arr.png") no-repeat 5px 1em;
}
#sub1 .sidebar-menu ul li a {
	display: block;
}
#sub1 .sidebar-menu ul li:last-child a {
	border-bottom: none;
}
#sub1 .sidebar-menu .widget_archive {
	padding: 0 0 12px;
}
/********** 検索 **********/
#sub1 .sidebar-menu .widget_search {
	padding: 20px 0 0;
	border-top: dotted 1px #a0a0a0;
}
#sub1 .sidebar-menu .widget_search .widget-header {
	padding: 0 0 10px;
	border-bottom: none;
	font-weight: bold;
	font-size: 16px;
}
#sub1 .sidebar-menu .widget_search .screen-reader-text {
	display: none;
}
#sub1 .sidebar-menu .widget_search #s {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	padding: 6px 0;
	border: solid 1px #a0a0a0;
	background: url(images/common-2025/s1-icon-search.png) no-repeat 6px 50%;
}
#sub1 .sidebar-menu .widget_search #searchsubmit {
	display: block;
	margin: 0 auto;
	padding: 4px 25px;
	border: none;
	border-radius: 3px;
	color: #fff;
	background: #78ad83;
}


/* --------------------------------------------------------------------------------
	footer
-------------------------------------------------------------------------------- */
#footer {
	
	
}


/********** ページトップボタン **********/
#footer #pagetop {
	position: fixed;
	z-index: 10;
	right: 44px;
	bottom: 38px;
}

/* リンク（aタグ） */
#footer #pagetop a {
	display: inline-block;
}

/* 画像（imgタグ） */
#footer #pagetop img {
	display: block;
}

/********** f-img **********/
#footer .f-img {
	width: 100%;
	height: 478px;
	margin: 0 0 22px;
	
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#footer .f-img img {
	width: 100%;
	height: auto;
	min-width: 100%;
	min-height: 478px;
}

/********** copyright **********/
#footer .copyright {
	text-align: center;
	font-size: 12px;
}
#footer .copyright small {
	font-size: 1em;
}