@charset "utf-8";

ul,ol,li
{
	margin: 0;
	padding: 0;
}

body
{
	min-width:480px;
	background:#a29869;
	color:#503700;
	font-family : "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size:14px;
	line-height:1.42857143;
}

li
{
	list-style-type:none;
}

img,textarea
{
	vertical-align:bottom;
}

a, a:hover, a:focus {
	text-decoration: none;
}

a img:hover, a:hover img
{
	opacity: 0.7;
}

a {
	color: #5588ff;
}
a:hover, a:focus {
	color: #00cccc;
}

div#btnPageTop
{
	position: fixed;
	bottom: 5px;
	left: 5px;
	z-index: 1000;
}

#full
{
	background-color:#fff;
}

ul.disc
{
	margin-top:2px;
	padding-left:25px;
}
ul.disc li
{
	list-style-type:disc;
}

ol.decimal
{
	padding-left:20px;
}
ol.decimal li
{
	list-style-type:decimal;
}

/* Bootstrapの配色と余白を調整する。 */

.list-group-head, .card-default > .card-header
{
	font-weight:bold;
	background:#ffedbc;
}
.card-default, .card-default > .card-header, a.list-group-item , .list-group-head
{
	border-color:#e9ce85;
	color:#503700
}
.card-header, .card-body
{
	padding:7px 10px;
}

.list-group-item
{
	padding:7px 10px;
	color:#503700;
	border-color:#e9ce85;
}

.list-group, .card
{
	margin-bottom:15px;
}

a.list-group-item:hover,
button.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:focus {
	background-color: #fff5db;
	color:#7b3d00;
}

.card-blue .list-group-head, .card-blue > .card-header
{
	background:#bcd7ff;
}
.card-blue, .card-blue > .card-header, .card-blue > a.list-group-item 
{
	border-color:#859fe9;
	color:#002450
}

.card-gold .list-group-head, .card-gold > .card-header
{
	background:#e1d59e;
}
.card-gold, .card-gold > .card-header, .card-gold > a.list-group-item 
{
	border-color:#a29869;
	color:#503700
}

/* ヘッダー */

div#header
{
	padding:15px 0px;
	font-size:12px;
	background:#a29869;
	color:#b5972c;
}

div#header div#menu .btn
{
	padding-top:12px;
	padding-bottom:12px;
}

div#header div#menu span.bi
{
	font-size:150%;
}
div#header div#menu .btn-light
{
	color: #5d4f30;
	background-color: #fdfdfd;
	border-color: #888;
}
div#header div#menu .btn-light:hover
{
	color:#ababab;
	background-color: #fff5db;
}
@media (max-width: 767px) {
	div#header div#logo
	{
		margin-bottom:15px;
	}
}

/* フッター */

div#footer div.header
{
	background:#a29869;
	color:#fff;
	padding:5px 5px;
	font-weight:bold;
}

div#footer
{
	border-top:solid 1px #dcdbd4;
	padding-top:15px;
	font-size:12px;
	color:#503700;
	background:#fffefa;
}

div#footer ul
{
	padding:5px 0;
	margin:0;
	line-height: 1.9em;
}

div#footer ul a,
div#footer ul a:link,
div#footer ul a:visited {
	color:#503700;
	text-decoration: none;
}
div#footer ul a:hover,
div#footer ul a:active {
	color:#5588ff;
}

div#footer ul li {
	padding-left:5px;
}

div#footer div.box
{
	margin-bottom:15px;
}

div#copyright
{
	padding:10px 10px;
	font-size:11px;
	color:#fff;
	font-weight:bold;
	background:#a29869;
	text-align:center;
}

/* パンくずリスト */

.breadcrumb
{
    --bs-breadcrumb-divider: ">";
    --bs-breadcrumb-item-padding-x: 5px;
    --bs-breadcrumb-divider-color: #aba082;
    --bs-breadcrumb-item-active-color: #503700;
	border-radius: 0px 0px 3px 3px;
	background:#fff3f0;
	font-size:small;
	margin-bottom:0px;
	padding:8px 15px;
}
.breadcrumb a {
	color: #7b3d00;
}
.breadcrumb a:hover,
.breadcrumb a:focus {
	color: #503700;
}

#main_without_breadcrumb
{
	margin-top:15px;
	margin-bottom:15px;
}

/* サイドバー */

.sub
{
	font-size:small;
}
/* 商品一覧 */

.content .card-body
{
	padding:7px;
}

.slot
{
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #b99797;
	border-radius: 1px;
}

/* 商品リンクに重なったときだけ、従来のホバー背景色を適用する。 */
.slot:has(.slot_link:hover)
{
	background-color: #fff5db;
}
a.slot_link
{
	padding:8px;
	padding-bottom:58px
}

a:hover .cr-thumb img {
	opacity:1;
}

.slot .title {
	color: #503700;
}

.slot .prace {
	position: absolute;
	bottom:40px;
	left:8px;
	right:8px;

	color:#ff0000;
}
.slot .cr-action
{
	position: absolute;
	left:8px;
	right:8px;
	bottom:8px;
	height:30px;
	width: auto;
}

/* ボタンの構造と状態表示はBootstrapを使い、CR固有の色・高さだけを指定する。 */
.btn.cr-action {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: inherit;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: inherit;
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-border-color);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    height: var(--cr-action-height, 30px);
}
.cr-action-md { --cr-action-height: 40px; }
.cr-action-lg { --cr-action-height: 50px; }
.cr-action:not(a) { cursor: default; }
.cr-action-blue {
    --bs-btn-color: #245269;
    --bs-btn-bg: #d9edf7;
    --bs-btn-border-color: #bce8f1;
    --bs-btn-hover-bg: #a6e1ec;
}
.cr-action-green {
    --bs-btn-color: #3c763d;
    --bs-btn-bg: #dff0d8;
    --bs-btn-border-color: #d6e9c6;
    --bs-btn-hover-bg: #c9e2b3;
}
.cr-action-gray {
    --bs-btn-color: #464646;
    --bs-btn-bg: #e8e8e8;
    --bs-btn-border-color: #c1c1c1;
    --bs-btn-hover-bg: #f1f1f1;
}
.cr-price {
    height: 50px;
    color: #ff0000;
    font-size: 20px;
}

.tag
{
	margin:5px 0px;
	border:1px solid #d9edf7;
	padding:5px;
	border-radius: 1px;
	font-size : 12px;
}

/* 検索欄を開いたら、従来どおり表示リンクを隠す。 */
.show-search:has([aria-expanded="true"]) { display: none; }

/* Bootstrap 5でも既存の文字サイズ・列間隔・表示幅を維持する。 */
.container, .row { --bs-gutter-x: 30px; }
.container { max-width: none; }
@media (min-width: 768px) { .container { max-width: 750px; } }
@media (min-width: 992px) { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }
.row > * { min-width: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; }
h1, h3 { margin-top: 20px; margin-bottom: 10px; }
h1 { font-size: 36px; }
h2 {
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 9px;
    padding: 4px 8px 2px;
    border-bottom: 1px solid #e9ce85;
    border-left: 10px solid #e9ce85;
}
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
.btn { --bs-btn-font-size: 14px; --bs-btn-padding-x: 12px; --bs-btn-padding-y: 6px; --bs-btn-border-radius: 4px; }
.card { --bs-card-border-radius: 4px; --bs-card-inner-border-radius: 3px; --bs-card-color: inherit; box-shadow: 0 1px 1px rgb(0 0 0 / 5%); }
.card-danger { border-color: #ebccd1; }
.card-default > .card-header { border-bottom: 1px solid #e9ce85; }
.card-blue > .card-header { border-bottom-color: #859fe9; }
.card-gold > .card-header { border-bottom-color: #a29869; }
.list-group { --bs-list-group-border-radius: 4px; }
.table { --bs-table-color: #503700; --bs-table-border-color: #ddd; }
.table > :not(caption) > * > * { padding: 8px; }

/* 一覧の画像は従来の縦横比を保ち、中央配置はBootstrapに任せる。 */
.cr-thumb-ratio { --bs-aspect-ratio: 85%; }
.cr-thumb { margin-bottom: 5px; }
.cr-thumb img { width: auto; height: auto; }

/* 一覧の4px間隔を、各列の余白指定ではなくBootstrapのガターで揃える。 */
.row.cr-product-grid { --bs-gutter-x: 4px; --bs-gutter-y: 4px; }

/* 通常のショップ画面を小画面に対応させる。試着連携画面の幅は維持する。 */
.cr-page { min-width: 0; overflow-wrap: anywhere; }
.cr-page #logo img, .cr-page #main img { max-width: 100%; height: auto; }
.cr-page .btn.cr-action { min-height: var(--cr-action-height, 30px); height: auto; }

/* Bootstrapにない寸法と、ページ先頭ボタンの初期非表示。 */
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.du-none { display: none; }
.cr-header-logo { max-height: 48px; }