@charset "utf-8";


/* --------------------------------------------------------------------------------
タグ
-------------------------------------------------------------------------------- */
html {
	
}
body {
	margin: 0;
	padding: 0 0 50px;
	min-width: 1200px;
	line-height: 1.5;
	text-size-adjust: 100%;
	
	font-size: 16px;
	font-feature-settings: "palt";
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	background: url("../images/common-2025/bg.jpg") repeat 0 0;
}

img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

address{
	font-style: normal;
}


/* --------------------------------------------------------------------------------
	共通
-------------------------------------------------------------------------------- */
.common {
	text-align: left;
	font-size: 16px;
}

.common * {
	margin: 0;
	padding: 0;
	
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.common h1,
.common h2,
.common h3,
.common h4,
.common h5,
.common h6 {
	font-size: 1em;
}
.common ol,
.common ul {
	list-style: none;
}
.common table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 1em;
}
.common a,
.common a:link,
.common a:visited {
	text-decoration: none;
	color: #000;
	-webkit-tap-highlight-color: rgba(0,0,0,0.1);
	tap-highlight-color: rgba(0,0,0,0.8);
}
.common a:hover,
.common a:active {
	text-decoration: underline;
}

input,
select,
textarea {
	outline: none !important;
	box-shadow: none !important;
}


/* --------------------------------------------------------------------------------
共通クラス
-------------------------------------------------------------------------------- */
.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;
	/**/
}

.font-mincho,
.font-mincho * {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


/* --------------------------------------------------------------------------------
デバイスごとの表示・非表示
-------------------------------------------------------------------------------- */
.device-sp{
	display: none;
}
.device-sp-inline {
	display: none;
}
.device-pc {
	display: block;
}
.device-pc-inline {
	display: inline;
}

.main-contents-inner {
	width: 1200px;
	margin: 0 auto;
}


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



/* ----------------------------------------
customer表示切り替え
---------------------------------------- */
/********** ログイン・ログアウトの表示切り替え：ログアウト時 **********/
.my-false .logout {
	display: block !important;
}
.my-false .login {
	display: none !important;
}
/********** ログイン・ログアウトの表示切り替え：ログイン時 **********/
.my-true .logout {
	display: none !important;
}
.my-true .login {
	display: block !important;
}


/* --------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------- */
#header {
	padding: 0 0 15px;
}


/* --------------------------------------------------------------------------------
	PC：ヘッダー固定
-------------------------------------------------------------------------------- */
#header .h-fix {
	width: 100%;
	box-sizing: border-box;

	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	background: url("../images/common-2025/bg.jpg") repeat 0 0;
}

/* ----------------------------------------
header-inner
---------------------------------------- */
#header .header-inner {
	display: flex;
	justify-content: space-between;
	
	width: 100%;
	min-width: 1200px;
	padding: 15px 20px 20px 20px;
}

/* ----------------------------------------
キャッチ & ロゴ
---------------------------------------- */
#header .catch-logo {
	width: 500px;
}

/* ----------------------------------------
キャッチ
---------------------------------------- */
#header .catch-logo .h-catch {
	padding: 0 0 30px;
}
#header .catch-logo .h-catch h1 {
	font-weight: normal;
}

/* ----------------------------------------
ロゴ
---------------------------------------- */
#header .h-logo {
	width: 300px;
}

/* ----------------------------------------
help-search
---------------------------------------- */
#header .help-search {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	
	max-width: 1050px;
}


/* ----------------------------------------
help
---------------------------------------- */
#header .h-help {
	max-width: 1050px;
	padding: 0 0 2px;
}
#header .h-help ul {
	display: flex;
	flex-wrap: wrap;
	
	width: 100%;
	margin: 0;
	padding: 0;
}

#header .h-help ul li {
	margin: 0 30px 10px 0;
}
#header .h-help ul li:last-child {
	margin-right: 0;
}

#header .h-help ul li a {
	display: flex;
	align-items: center;
	min-height: 25px;
	
	background-repeat: no-repeat;
	background-position: left center;
	
	padding-left: 25px;
	
	font-size: 16px;
	color: #333;
	text-decoration: none;
	
	white-space: nowrap;
}
#header .h-help ul li a:hover {
	text-decoration: underline;
}

#header .h-help ul li.h-help-register a {
	background-image: url(../images/common-2025/h-help-register.png);
}

#header .h-help ul li.h-help-my a {
	background-image: url(../images/common-2025/h-help-my.png);
}

#header .h-help ul li.h-help-guide a {
	background-image: url(../images/common-2025/h-help-guide.png);
}

/* カート */
#header .h-help ul li.h-help-cart a {
	position: relative;
	padding-left: 38px;
	background-image: url(../images/common-2025/h-help-cart.png);
}
#header .h-help ul li.h-help-cart a .fs-client-cart-count{
	position: absolute;
	top: -2px;
	left: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	border-radius: 20px;
	font-size: 12px;
	color: #fff;
	background: #db4c1e;
	line-height: 1;
	z-index: 1;
}

#header .h-help ul li.h-help-shop a {
	background-image: url(../images/common-2025/h-help-shop.png);
}



/* ----------------------------------------
search
---------------------------------------- */
#header .search {
	width: 250px;
}

#header .search-box {
	position: relative;
	display: flex;
	align-items: center;
}

#header .search-box input[type="text"] {
	box-sizing: border-box;
	height: 30px;
	width: 100%;
	
	border: 1px solid #cccccc;
	border-radius: 5px;
	
	padding: 0 40px 0 10px;
	
	font-size: 13px;
	color: #333;
}

#header .search-box input[type="image"] {
	position: absolute;
	right: 9px;
	
	top: 50%;
	transform: translateY(-50%);
	
	cursor: pointer;
	border: none;
	
	width: 16px;
	height: 16px;
}



/* ----------------------------------------
ナビゲーション共通
---------------------------------------- */
#header .h-nav {
	/* ドロップダウンの配置基準とする */
	position: relative; 
	background-color: #e5e3d9;
}

/* ul（直下）の設定 */
#header .h-nav-box > ul {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;

	position: relative;
}

/* li（直下）の共通設定と縦棒（区切り線） */
#header .h-nav-box > ul > li {
}

/* li::before (左側の縦棒) の設定 */
#header .h-nav-box > ul > li .h-nav-list-item {
	position: relative;
}
#header .h-nav-box > ul > li .h-nav-list-item::before {
	content: "";
	display: block;
	position: absolute;

	/* liの左端に配置 */
	left: 0;

	/* 上下中央に配置 */
	top: 50%;
	transform: translateY(-50%);

	/* 縦棒のスタイル */
	background-color: #000;
	width: 1px;
	height: 14px;
}

/* 右側の縦棒の設定 */
#header .h-nav-box > ul > li:last-child .h-nav-list-item::after {
	content: "";
	display: block;
	position: absolute;

	/* liの右端に配置 */
	right: 0;

	/* 上下中央に配置 */
	top: 50%;
	transform: translateY(-50%);

	/* 縦棒のスタイル */
	background-color: #000;
	width: 1px;
	height: 14px;
}

/* ----------------------------------------
グローバルナビゲーションボタン（直下）
---------------------------------------- */
/* btn-open の共通設定 */
#header .h-nav .h-nav-box .btn-open {
	height: 50px;
	line-height: 50px; /* 垂直中央寄せ */

	display: flex;
	align-items: center;
	padding: 0 40px;
	cursor: pointer;
}

/* btn-open直下の aタグと span（.nav-label）の基本設定 */
#header .h-nav .h-nav-box .btn-open > a,
#header .h-nav .h-nav-box .btn-open > .nav-label {
	display: block;

	/* テキストの設定 */
	color: #000;
	text-decoration: none;
	white-space: nowrap;
}

/* ホバー中の文字色（.is-openの代わりにホバーを使用） */
/* ドロップダウンを持つli(contents-openを持つli)にホバーされたときのスタイル */
#header .h-nav .h-nav-box li:has(.contents-open):hover .btn-open > a,
#header .h-nav .h-nav-box li:has(.contents-open):hover .btn-open > .nav-label {
	color: #db4c1e;
}

/* リンク要素のみのliにホバーされたときの文字色（任意）*/
#header .h-nav .h-nav-box li:not(:has(.contents-open)):hover .btn-open > a {
	color: #db4c1e; /* リンクのみの項目もホバーで色が変わるように */
}


/* ----------------------------------------
ドロップダウンコンテナ
---------------------------------------- */
/* contents-open (サブメニュー全体) */
#header .h-nav .contents-open {
	/* ドロップダウン背景自体を1200pxにし、中央に配置 */
	position: absolute;
	width: 1200px;
	margin: 0 auto;
	left: 0; /* max-widthとmargin: autoと併せて、親要素内で中央配置される */
	right: 0; /* max-widthとmargin: autoと併せて、親要素内で中央配置される */
	
	/* .h-navのtopから50px下に配置 */
	top: 50px;
	
	background: #e5e3d9;

	/* ホバー開閉のための設定 */
	opacity: 0;
	visibility: hidden;

	/* 他のコンテンツより手前に表示 */
	z-index: 100;

	/* 0秒のフェードイン/アウト */
	transition: opacity 0s, visibility 0s;
}

/* liにホバーしたときに contents-open を表示 */
#header .h-nav .h-nav-box > ul > li:hover .contents-open {
	opacity: 1;
	visibility: visible;
}

#header .h-nav .contents-open .contents-open-box {
	padding: 15px 25px 0 25px;
	background: #e5e3d9;
}


/********** ドロップダウンのラベル **********/
#header .h-nav .h-nav-box li .btn-open > .nav-label {
	position: relative;
	padding-right: 20px;
}
#header .h-nav .h-nav-box li .btn-open > .nav-label::before {
	position: absolute;
	z-index: 1;
	right: 0;
	top: 22px;
	content: '';
	display: block;
	width: 10px;
	height: 5px;
	background-image: url("../images/common-2025/h-icon-arr-down.svg");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}
#header .h-nav .h-nav-box li:hover .btn-open > .nav-label::before {
	background-image: url("../images/common-2025/h-icon-arr-up.svg");
}



/* ----------------------------------------
サブリスト（ドロップダウン内）
---------------------------------------- */
#header .h-nav .contents-open .contents-open-box {
	display: flex;
	flex-wrap: wrap; 
}

#header .h-nav .contents-open .h-nav-list {
	margin: 0 0 26px;
	padding-bottom: 0; 
}

#header .h-nav .contents-open .h-nav-list ul {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	width: 100%;
}

#header .h-nav .contents-open .h-nav-list ul li {
	margin: 0 50px 10px 0;
	width: 190px;
	border-bottom: none;
}
#header .h-nav .contents-open .h-nav-list ul li:nth-of-type(5n) {
	margin: 0 0 10px 0;
}

#header .h-nav .contents-open .h-nav-list ul li a {
	display: block;
	padding: 7px 20px 7px 0;
	border-bottom: 1px solid #fff;
	background-image: url("../images/common-2025/h-icon-arr.svg");
	background-repeat: no-repeat;
	background-position: 100% 12px;
	background-size: 6px 9px;
	color: #000;
	text-decoration: none;
}

#header .h-nav .contents-open .h-nav-list ul li a:hover {
	color: #db4c1e;
}




/* --------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------- */
#footer {
	padding: 100px 0 0;
}

/********** footer-outer **********/
#footer .footer-outer {
}

/********** footer-inner **********/
#footer .footer-inner {
}

/********** フッターコンテンツ **********/
#footer .f-contents {
}




/* ----------------------------------------
ショッピングガイド（アコーディオン）
---------------------------------------- */
#footer .f-shopping-guide-unit {
	padding: 16px 0 12px;
	background: #eee5df;
}
#footer .f-shopping-guide-unit .f-shopping-guide-unit-wrapper {
	width: 1200px;
	margin: 0 auto;
	padding: 0 0 5px;
}

/* 各アコーディオンブロックの設定 */
#footer .f-shopping-guide-unit .f-shopping-guide-unit-box {
}

/* 最後の要素ではないブロックにのみ境界線と下部の余白を適用 */
#footer .f-shopping-guide-unit .f-shopping-guide-unit-box:not(:last-child) {
	/* 境界線を表示 */
	border-bottom: 1px solid #000;
	/* 境界線と次のブロックの間の隙間を確保 */
	padding-bottom: 10px;
}

/* headingのスタイル */
#footer .f-shopping-guide-unit .f-shopping-guide-unit-box .heading {
	font-size: 18px;
	font-weight: bold;
	/* 線の上の隙間を10px確保するため、padding-topは維持 */
	padding: 10px 0;
	
	/* open-close-btnのposition: relativeを基準とするため */
	margin-right: 30px; 
}

/* open-close-btn の設定 */
#footer .f-shopping-guide-unit .f-shopping-guide-unit-box .open-close-btn {
	cursor: pointer;
	position: relative;
}

/* open-close-contents はデフォルトで閉じる */
#footer .f-shopping-guide-unit .f-shopping-guide-unit-box .open-close-contents {
	display: none;
}

/* + (プラス) アイコン（デフォルト：閉じているとき） */
#footer .f-shopping-guide-unit .f-shopping-guide-unit-box .open-close-btn::after {
	content: "";
	display: block;
	position: absolute;
	
	/* サイズは画像に合わせて調整してください */
	width: 15px;
	height: 15px; 
	
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	
	/* 閉じる状態のアイコン */
	background-image: url("../images/common-2025/f-icon-toggle-plus.png");
	background-size: contain;
	background-repeat: no-repeat;
}

/* - (マイナス) アイコン（開いているとき） */
/* open-close-btnに .is-open クラスが付与されたとき */
#footer .f-shopping-guide-unit .f-shopping-guide-unit-box .open-close-btn.is-open::after {
	/* 開いている状態のアイコン */
	background-image: url("../images/common-2025/f-icon-toggle-minus.png");
}

/* .txt の内容 */
#footer .f-shopping-guide-unit .f-shopping-guide-unit-box .open-close-contents .txt {
	padding: 0 0 8px;
}



/* ----------------------------------------
f-help
---------------------------------------- */
#footer .f-help {
	margin: 0 0 30px;
	padding: 33px 0;
	line-height: 1;
	color: #fff;
	background-color: #db4c1e;
}

#footer .f-help ul {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .f-help li {
	position: relative;
	padding: 0 10px;
}

#footer .f-help li a {
	display: block;
	padding: 0 15px;
	text-decoration: none;
	color: #fff;
}

/* 項目間のパイプ */
#footer .f-help li:not(:last-child)::after {
	content: "｜";
	position: absolute;
	top: 0;
	right: -2px;
	color: #fff;
}

/* NEW: 最初の項目の前にパイプを追加 */
#footer .f-help li:first-child::before {
	content: "｜";
	position: absolute;
	top: 0;
	left: -2px;
	color: #fff;
}

/* NEW: 最後の項目の後にパイプを追加 */
#footer .f-help li:last-child::after {
	content: "｜";
	position: absolute;
	top: 0;
	right: -2px;
	color: #fff;
}

#footer .f-help li a:hover {
	text-decoration: underline;
}

/* ----------------------------------------
ロゴ・会社情報など
---------------------------------------- */
#footer .f-company-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#footer .f-company-info .f-logo {
	margin-bottom: 10px;
}

#footer .f-company-info .f-logo a,
#footer .f-company-info .f-logo img {
	display: block;
}

#footer .f-company-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}


/********** TEL **********/
#footer .f-company-info .company-tel {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 0;
}

#footer .f-company-info .tel-icon {
	width: 26px;
	height: 17px;
	display: block;
	
	margin-right: 11px;
	
	background-image: url("../images/common-2025/f-icon-dial.png");
	background-size: contain;
	background-repeat: no-repeat;
	
	background-position: center center;
}