@charset "UTF-8";

/* ------------------------------
 * カラーパレット（ovaldream新配色）
 * ------------------------------ */
:root {
  --color-main: 51,51,51;          /* 本文文字 */
  --color-main-c: 46,139,87;       /* コーポレートカラー（セージグリーン系） */
  --color-orange: 255,159,71;      /* オレンジ */
  --color-sepiadark: 139,69,19;    /* セピア濃いめ */
  --color-sepia: 205,133,63;       /* セピア */
  --color-red: 177,6,58;           /* 赤ワイン系 */
  --color-blue: 30,144,255;        /* 明るめの青 */
  --color-gray: 128,128,128;       /* 標準グレー */
  --color-cyan: 102,153,255;       /* 淡い青 */
  --color-white: 255,255,255;      /* 白 */
  --color-green: 0,122,71;         /* 深緑 */
  --color-link: 177,6,58;          /* リンク色 */
  --color-link-hover: 177,6,58;    /* リンク hover */
}

/* ::::: メインの幅を変更するよ::::: */
.site-main{
  width: 100% !important;
  margin:0 auto!important;
  padding:0!important;
}
.site-content{
  width: 100% !important;
  max-width:1280px !important;
  margin:1rem auto 0 auto!important;
}

/* 1) ベースの文字まわり */
html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.75; }

/* 2) ヘッダー・ナビ */
.site-header { padding: 12px 0; border-bottom: 1px solid rgba(var(--color-white),1.0); }
.site-nav a { padding: .75rem 1rem; text-decoration: none; }
.site-nav a:hover { opacity: .75; }

/* 3) 商品一覧（例：カード3→2→1 列） */
.products-grid { 
  display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .products-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .products-grid { grid-template-columns: 1fr; } }

.product-card { padding: 12px; border: 1px solid #eee; border-radius: 8px; }
.product-card .price { font-weight: 700; }
.product-card .button, .usc-e-shop .button { 
  display: inline-block; padding: .6rem 1rem; border-radius: 6px;
}

/* :::::: 2カラムのレイアウト（固定ページに適用）:::::: */
#main {
  width:100%; max-width:1280px; margin:0 auto;
  display: flex;
  align-items: flex-start;
  gap: 24px;               /* カラム間の余白 */
  margin-top:1rem;
}
/* 左カラムは可変幅 */
#left-section {
  flex: 1 1 auto;
  min-width: 0;            /* 画像や長い語でのはみ出し対策 */
}
/* 右カラムは固定幅（必要に応じて調整） */
#right-section {
  flex: 0 0 250px;         /* 右カラム幅 */
  padding-left:10px;
}
/* モバイルで縦積み */
@media (max-width: 960px) {
  #main { flex-direction: column; }
  #right-section { flex: 0 0 auto; }
}
/* レスポンシブ対応 */
@media (max-width: 640px) {
#right-section {
  display:none;
}
}
/* ---- 右側のwidgetの設定 ---- */
/*:::::WIDGET:::::*/
#widget{}

/* ::::: WIDGETのコンテンツの所 ::::: */
#widget .widget-inner {
  display: table;
  width: 100%;
}
#widget .widget-inner .column {
	margin-bottom:1rem;
}
#widget .widget-inner .column h4 {
  background-color: rgba(var(--color-main-c),1.0);
  color: rgba(var(--color-white),1.0);
  padding: 0.5rem;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
#widget .widget-inner .column ul {
	margin:0;
  padding: 0 0 0 0.5rem !important;
}
#widget .widget-inner .column ul li {
  color: rgba(var(--color-main),1.0);
  width: 100%;
  display: block!important;
  padding: 0.25rem 0;
  text-decoration: none;
}
#widget .widget-inner .column ul li a{
	color:rgba(var(--color-main),1.0);
	text-decoration: none;
}
#widget .widget-inner .column>ul li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;          /* solid は 900 必須 */
  content: "\f0da";          /* caret-right（?っぽい三角） */
  display: inline-block;
  margin-right: 0.5em;
	color:rgba(var(--color-red),1.0);
}
#widget .widget-inner .column>ul li:hover {
	font-weight:bold;
}
/*住所*/
#widget .address{
	border: 1px solid rgba(var(--color-main-c),1.00);
	padding:0 0 0.5rem 0;
}
#widget .address h5{
	margin-top:0;
	text-align:center;
	padding:0.5rem;
	font-size:0.875rem;
	background-color:rgba(var(--color-main-c),1.00);
	color:rgba(var(--color-white),1.00);
}
#widget .address p{
	text-align:center;
	padding:0 0.25rem;;
	line-height:1.2rem;
	font-size:0.875rem;
	margin:0;
}
.address .note {
	display:block;
  font-size: 0.875rem;
  color: rgba(var(--color-main), 1.0);
  margin-top: 0.25rem;
	margin:0 1rem 0 2rem;
	text-indent:-1rem;
}
/* バナー買物へ */

#widget a.banner-widget{
}
#widget a.banner-widget img{
	width: 100%;
	border-radius: 8px;
	border: 1px solid rgba(var(--color-main-c),1.0);
	margin-bottom:1rem;
}
/* ==== フッター末尾：検索フォーム（ボタン固定＋calc調整） ==== */
#widget .footer-search {
  max-width: 1280px;
  margin: 1rem 0 0 auto;
  padding: 0 .5rem;
  text-align: right;
}

#widget .footer-search .search-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  width: 100%;
  max-width: 420px; /* 全体幅の上限（お好みで） */
}

/* 入力欄：ボタンの幅を除いた残りを自動計算 */
#widget .footer-search .search-field {
  flex: 1 1 auto;
  width: calc(100% - 90px);  /* ボタンの幅＋隙間を引いた残りを使う */
  padding: 0.4em 0.6em;
  border: 1px solid rgba(var(--color-gray), 0.4);
  border-radius: 4px;
  background: rgba(var(--color-white),1.0);
  font-size: 0.95em;
  box-sizing: border-box;
}

/* ボタン固定幅 */
#widget .footer-search .search-submit {
  flex: 0 0 45px;           /* 固定幅80px */
  padding: 0.4em 0;
  border: 0;
  border-radius: 4px;
  background: rgba(var(--color-gray), 1);
  color: rgba(var(--color-white), 1);
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.2s ease;
}

#widget .footer-search .search-submit:hover {
  background: rgba(var(--color-gray), 0.8);
}

/* スマホで中央寄せ＋全幅対応 */
@media (max-width: 600px) {
  #widget .footer-search {
    text-align: center;
  }

  #widget .footer-search .search-form {
    max-width: 90%;
  }

  #widget .footer-search .search-field {
    width: calc(100% - 80px);
  }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
}
@media (max-width: 600px) {
}

/* ----- パンくずリスト ----- */
.breadcrumb {
  width:100%;
  margin:0 auto;
  font-size: .875rem;
  color: rgba(var(--color-gray), 1.0);
  padding: .5rem 0;
  background-color:rgba(var(--color-gray),0.2);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 .4em; opacity: .7; }
.breadcrumb .breadcrumb-inner{
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

/* ===============================
 * 商品カテゴリ一覧（今のマークアップ対応版）
 * =============================== */

/* ① タイトルバー（このページ特有：.card-grid.card-grid-items を持つアーカイブに限定） */
body.archive:has(.card-grid.card-grid-items) .page-header {
  background-color: rgba(var(--color-main-c), 1.0);
  color: rgba(var(--color-white), 1.0);
  padding: 0.5rem 0;
  text-align: center;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}
body.archive:has(.card-grid.card-grid-items) .page-header .page-title {
  color: rgba(var(--color-white), 1.0);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0;
}

/* ② 商品画像の枠線（カード内の画像） */
.card-grid.card-grid-items .card-item .card-image img {
  border: 1px solid rgba(var(--color-main-c), 1.0);
  border-radius: 6px;
  box-sizing: border-box;
}

/* ③ 商品名を太字 */
.card-grid.card-grid-items .card-item .card-title,
.card-grid.card-grid-items .card-item .item-name {
  font-weight: 700;
  color: rgba(var(--color-main), 1.0);
}

/* ===============================
 * 商品詳細ページ：サムネ等の最終調整（5列 & 幅合わせ）
 * =============================== */

/* 大画像（そのまま） */
.item-detail-gallery .carousel-inner img {
  border: 1px solid rgba(var(--color-main-c), 1.0);
  border-radius: 4px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---- サムネイル行 ---- */
/* Bootstrapの d-md-flex / row-cols-md-6 を無効化してグリッド化 */
.items-carousel-indicators {
  display: grid !important;                 /* ← flexを上書き */
  grid-template-columns: repeat(5, 1fr);    /* ← ① 5列固定 */
  gap: 15px;                                /* ← 間隔 */
  width: 100%;                              /* 親（大画像と同じコンテナ幅）にフィット */
  max-width: 100%;
  padding: 0;                               /* 余白を消して左端を合わせる */
  margin: 12px 0 0;                         /* 上だけ少し余白 */
  justify-content: stretch !important;      /* Bootstrapの center を無効化 */
  align-items: stretch;
}

/* Bootstrapが子要素に付けるマージン・幅指定も無効化 */
.items-carousel-indicators > div {
  margin: 0 !important;
  width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* サムネ画像の見た目 */
.items-carousel-indicators img {
  border: 1px solid rgba(var(--color-gray), 1.0);
  border-radius: 4px;
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  transition: opacity .2s ease-in-out, border-color .2s ease-in-out;
}
.items-carousel-indicators img:hover {
  opacity: 0.85;
  border-color: rgba(var(--color-main-c), 1.0);
}

/* レビュー非表示（前回のまま） */
#reviews.item-reviews { display: none; }

/* 上画像ブロックとサムネ行の左右余白を完全に揃える */
.item-detail-gallery { padding-inline: 0 !important; }

.item-detail-gallery .single-item-carousel {
  margin: 0 !important;
  padding-inline: 0 !important;
  width: 100%;
}

.item-detail-gallery .items-carousel-indicators {
  padding-inline: 0 !important;  /* ← 左右パディングをゼロに */
  margin-inline: 0 !important;   /* ← 左右マージンもゼロに */
  width: 100%;
}

/* ===== 1) 親のSVG矢印を無効化（最重要） ===== */
.control-arrows .carousel-control-prev-icon,
.control-arrows .carousel-control-next-icon {
  background-image: none !important; /* 親のSVGを消す */
}

/* ===== 2) 基本形：普段は透明、丸い器だけ用意 ===== */
.control-arrows .carousel-control-prev-icon,
.control-arrows .carousel-control-next-icon {
  background-color: transparent;
  border-radius: 50%;
  width: 40px;   /* お好みで */
  height: 40px;  /* お好みで */
  position: relative;
  display: inline-block;
  transition: background-color .25s ease, opacity .25s ease;
}

/* ===== 3) hover時だけ main-c を出す（ラッパに乗ったら発色） ===== */
#single-item-carousel:hover .control-arrows .carousel-control-prev-icon,
#single-item-carousel:hover .control-arrows .carousel-control-next-icon {
  background-color: rgba(var(--color-main-c), 1.0);
}

/* 親のopacity:.5 をhover時は見やすく（必要なら） */
#single-item-carousel:hover .carousel-control-prev,
#single-item-carousel:hover .carousel-control-next {
  opacity: 1;
}

/* ===== 4) 白い矢印（CSSで描く） ===== */
.control-arrows .carousel-control-prev-icon::after,
.control-arrows .carousel-control-next-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform-origin: center;
}

/* ← 左矢印 */
.control-arrows .carousel-control-prev-icon::after {
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* → 右矢印 */
.control-arrows .carousel-control-next-icon::after {
  transform: translate(-50%, -50%) rotate(45deg);
}