@charset "utf-8";
/* CSS Document */

/* ── 基本：固定幅/floatを解除し、安全に全幅化 ── */
#leftContents {
	display: none;
}
.mainContents, #list-page, #list-page .rightContents, #list-page .category-page1, #list-page #category {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: 0 0px;
	box-sizing: border-box;
}
/* ── パンくず・並び替え（共通のインナー幅＆整列） ── */
#list-page .pankuzu, #list-page #r_resultInfo {
	margin: 12px auto;
	padding: 0 8px;
	max-width: 1100px;
	box-sizing: border-box;
	font-size: 13pt;
}
#list-page .pankuzu {
	white-space: normal;
	overflow: visible;
}
#list-page #r_resultInfo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
}
#list-page #r_resultInfo .total, #list-page #r_resultInfo .listSort {
	float: none !important;
}
#list-page #r_resultInfo .listSort {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* ── 商品グリッド（モバイル1列→タブレット2列） ── */
#list-page .card-grid {
	display: grid;
	grid-template-columns: 1fr;         /* ←スマホは1列で大きく */
	gap: 14px;
	max-width: 1100px;
	margin: 0 auto 16px;
	padding: 0;
}
	.name{
		font-size: 20px;
	}

	.price{
		font-size: 25px;
		font-weight: bold;
		
	}
	
		.contact-card{
		font-size: 20px;
		
	}
/* ≥768px のみ2列に（※以前の「モバイルで2列」を完全撤廃） */
@media (min-width:768px) {
#list-page .card-grid {
	grid-template-columns: repeat(2, 1fr);
}
}
/* ── カード（白枠＋影／高さ揃え／wishlistを最下部） ── */
#list-page .card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
	overflow: hidden;
	transition: transform .2s, box-shadow .2s;
}
#list-page .card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
#list-page .innerBox, #list-page .gs-cardWrap, #list-page .card-content1 {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
/* ── 画像：正方形で最大表示（CLS対策） ── */
#list-page .card-image1.gs-imgbox {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	overflow: hidden;
	padding: 8px 0;
		margin-top: 16px;  /* ←好みで調整（例：16px） */
}
#list-page .card-image1.gs-imgbox img {
	align-content: center;
	display: block;
	width: 230px;
	object-fit: contain;

}
/* ── テキストとwishlist ── */
#list-page .card-content1 {
	font-size: 16pt;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 12px 14px 30px;
}
#list-page .card-content1 .gs-wishlist {
	  margin-top: 20px;     /* 画像やテキストからの間隔 */
  margin-bottom: 30px;  /* 下側の余白（カード枠と離す） */
}
#list-page .gs-wishlist a {
	display: inline-block;
}
#list-page .gs-wishlist img {
	width: 200px;
	max-width: 600px;
	height: auto;
}
/* ── 余白微調整 ── */
#list-page .space_small {
	padding: 12px 0;
}
#list-page section {
	margin-bottom: 12px;
}

	#r_resultInfo{
		font-size: 13pt;
		
	}
/* ── スマホ時：外側ラッパも確実に全幅化（右側余白の保険） ── */
@media (max-width:768px) {
.mainContents, #list-page, #list-page .rightContents, #list-page .category-page1, #list-page #category {
	padding-left: 12px;
	padding-right: 12px;
	max-width: none;
}
#list-page .pankuzu, #list-page #r_resultInfo {
	max-width: 100%;
	padding: 0 0px;
	margin: 0px 0;
}
}

@media (max-width:768px) {
#list-page .card-grid {
	justify-items: center;
}
#list-page .card {
	width: 100%;
}
/* ── wishlistボタンをスマホ時に拡大 ── */
#list-page .gs-wishlist img {
	width: 400px;   /* デフォルト160pxから拡大 */
	max-width: 90%; /* 画面に収まるよう安全策 */
}
	
	#list-page .card-image1.gs-imgbox img {
	align-content: center;
	display: block;
	object-fit: contain;

}
}

/* ===== サブカテゴリ：2列タイル（見出し以外） ===== */
#list-page .contact-card .category-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  list-style: none;
  margin: 8px auto 0;
  padding: 0;
  text-align: center;
}
#list-page .contact-card .category-list li{ margin: 0; padding: 0; }
#list-page .contact-card .category-list a{
  display: inline-block;
  text-decoration: none;
}

/*（任意）極端に狭い端末で1列にしたい場合は解除
@media (max-width:360px){
  #list-page .contact-card .category-list{ grid-template-columns: 1fr; }
}
*/

  /* ---------- Theme & Reset (scoped) ---------- */
  #cart-page{
    --c-bg: #f7f8fb;
    --c-card: #ffffff;
    --c-text: #222;
    --c-muted: #6b7280;
    --c-border: #e5e7eb;
    --c-primary: #0d47a1;   /* Songga系の深いブルー */
    --c-accent: #d32f2f;    /* CTA用レッド */
    --radius: 14px;
    --shadow: 0 6px 16px rgba(0,0,0,.08);
    font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color: var(--c-text);
  }
  #cart-page *{ box-sizing: border-box; }
  #cart-page img{ max-width:100%; height:auto; display:block; }
  #cart-page a{ color: var(--c-primary); text-decoration: none; }
  #cart-page .container{ max-width:1100px; margin:0 auto; padding: 0 16px; }

  /* ---------- Header ---------- */
  #cart-page .cart-hero{
    margin: 8px 0 16px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background:#0d47a1;
  }

  /* ---------- Cart shell ---------- */
  #cart-page .cart-shell{ margin: 0 0 28px; }
  #cart-page .cart-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }

  /* ---------- Cart item ---------- */
  #cart-page .cart-item{
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 14px;
    align-items: start;
  }
  #cart-page .ci-img{
    width:100px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--c-border); border-radius:12px; overflow:hidden;
  }
  #cart-page .ci-body{ display:flex; flex-direction:column; gap:8px; }
  #cart-page .ci-name{ margin:0; font-size:18px; line-height:1.5; }
  #cart-page .ci-num{ font-size:12px; color:var(--c-muted); }
  #cart-page .ci-option{ font-size:13px; color:#374151; background:#f3f4f6; border-radius:8px; padding:6px 8px; display:inline-block; }

  #cart-page .ci-controls{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
  #cart-page .ci-qty{ display:flex; align-items:center; gap:8px; }
  #cart-page .ci-qty label{ font-size:12px; color:var(--c-muted); }
  #cart-page .ci-qty .qtybox{ display:flex; align-items:center; gap:6px; }
  #cart-page .ci-qty input,
  #cart-page .ci-qty select{
    width:64px; padding:8px 10px; border:1px solid var(--c-border); border-radius:10px; text-align:center; font-size:14px;
    background:#fff;
  }
  #cart-page .step{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:10px;
    border:1px solid var(--c-border); background:#fff; font-weight:700;
  }
  #cart-page .btn-update{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:8px 12px; border-radius:999px; border:1px solid var(--c-border); background:#fff; font-weight:700;
  }

  #cart-page .ci-side{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; min-width:160px; }
  #cart-page .ci-price{ text-align:right; }
  #cart-page .ci-price span{ display:block; font-size:12px; color:var(--c-muted); }
  #cart-page .ci-price strong{ font-size:20px; letter-spacing:.02em; }
  #cart-page .ci-point{ font-size:12px; color:var(--c-muted); }
  #cart-page .ci-actions{ display:flex; gap:8px; }
  #cart-page .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    padding:10px 14px; border-radius:10px; border:1px solid var(--c-border); background:#fff; font-weight:700;
  }
  #cart-page .btn.ghost{ background:#f3f4f6; }
  #cart-page .btn.link{ border-color:transparent; padding:0; }
  #cart-page .btn.danger{ color:#b91c1c; }

  /* ---------- Summary ---------- */
  #cart-page .cart-summary{
    margin-top: 18px; padding:16px; background: var(--c-card); border:1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: var(--shadow); display:grid; gap:14px;
    grid-template-columns: 1fr auto;
  }
  #cart-page .cs-total{ font-size:18px; display:flex; align-items:center; gap:10px; }
  #cart-page .cs-total strong{ font-size:22px; }
  #cart-page .cs-ship{
    grid-column: 1 / -1;
    font-size:14px; color:#374151; background:#f9fafb; border:1px dashed #d1d5db; border-radius:10px; padding:10px 12px;
  }
  #cart-page .cs-actions{ display:flex; gap:10px; align-items:center; }
  #cart-page .cta{
    display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 20px; border-radius:12px; font-weight:800;
    box-shadow: var(--shadow);
  }
  #cart-page .cta.primary{ background: var(--c-accent); color:#fff; border: none; }
  #cart-page .cta.secondary{ background:#4b5563; color:#fff; border:none; }

  /* ---------- Recent ---------- */
  #cart-page .recent{ margin: 26px 0 10px; }
  #cart-page .recent h3{
    font-size:16px; color:#1f2937; display:flex; align-items:center; gap:8px; margin:0 0 10px;
  }
  #cart-page .recent-grid{
    display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  }
  #cart-page .recent-grid img{ width:100%; height:auto; }

  /* ---------- Utilities ---------- */
  #cart-page .muted{ color: var(--c-muted); }
  #cart-page :is(.btn, .cta):hover{ filter:brightness(.97); }
  #cart-page :is(.btn, .cta):active{ transform: translateY(1px); }

  /* ---------- Responsive ---------- */
  @media (max-width: 768px){
    #cart-page .cart-item{ grid-template-columns: 80px 1fr; }
    #cart-page .ci-side{ align-items: flex-start; }
    #cart-page .cart-summary{ grid-template-columns: 1fr; }
    #cart-page .cs-actions{ justify-content: stretch; }
    #cart-page .cta{ flex:1 1 auto; }
	  
	  
	  
  }
/* ============ ご利用ガイド専用（top_titlegaido.jpg があるページのみ適用） ============ */

/* スコープ変数：最大幅など */
body:has(#list-page img[src*="top_titlegaido"]) #list-page{
  --guide-max: 1240px;      /* 緑の幅：ここまで広げる */
  --guide-radius: 14px;
}

/* 赤：タイトル画像を大きく＆レスポンシブ */
body:has(#list-page img[src*="top_titlegaido"]) #list-page .section img[src*="top_titlegaido"]{
  display:block;
  width:100%;
  max-width: var(--guide-max);
  height:auto;
  margin: 10px auto 16px;
  border-radius: var(--guide-radius);
}
@media (max-width: 768px){
  body:has(#list-page img[src*="top_titlegaido"]) #list-page .section img[src*="top_titlegaido"]{
    margin: 8px 0 12px;
    border-radius: 12px;
  }
}

/* 緑：コンテンツの最大幅を拡張（パンくず／メニュー／本文カード） */
body:has(#list-page img[src*="top_titlegaido"]) #list-page .pankuzu,
body:has(#list-page img[src*="top_titlegaido"]) #list-page .contact-card,
body:has(#list-page img[src*="top_titlegaido"]) #list-page .card-grid{
  max-width: var(--guide-max);
  margin-left: auto;
  margin-right: auto;
}

/* 水色：本文を左揃え（このページのカードだけ） */
body:has(#list-page img[src*="top_titlegaido"]) #list-page .card-content1{
  align-items: flex-start;      /* 既存の center を上書き */
  text-align: left;             /* 既存の center を上書き */
}
body:has(#list-page img[src*="top_titlegaido"]) #list-page .card-content1 h3{
  align-self: stretch;
  margin: 0 0 8px;
}
body:has(#list-page img[src*="top_titlegaido"]) #list-page .card-content1 ul{
  padding-left: 1.2em;           /* 行頭を揃えやすく */
  margin: 0;
}
body:has(#list-page img[src*="top_titlegaido"]) #list-page .card-content1 li{
  text-align: left;
}

/* タブレット以上：2列カードの読みやすさを微調整（行間・隙間） */
@media (min-width: 768px){
  body:has(#list-page img[src*="top_titlegaido"]) #list-page .card-grid{
    gap: 18px;
  }
}




/* ============ ご利用ガイド（top_titlegaido.jpg があるページのみ）文字サイズ縮小 ============ */
body:has(#list-page img[src*="top_titlegaido"]) #list-page{
  /* 好みでここだけ変えれば一括調整 */
  --guide-fz: 16px;      /* 本文の基準サイズ（PC） */
  --guide-h3: 25px;      /* 見出し */
  --guide-nav: 18px;     /* メニューリンク */
  --guide-bc: 16px;      /* パンくず */
}

/* パンくず・メニュー */
body:has(#list-page img[src*="top_titlegaido"]) #list-page .pankuzu{
  font-size: var(--guide-bc) !important;
}
body:has(#list-page img[src*="top_titlegaido"]) #list-page .contact-card h3{
  font-size: calc(var(--guide-h3) - 1px) !important;
}
body:has(#list-page img[src*="top_titlegaido"]) #list-page .contact-card .category-list a{
  font-size: var(--guide-nav) !important;
}

/* 本文カード（左右のブロック） */
body:has(#list-page img[src*="top_titlegaido"]) #list-page .card-content1{
  font-size: var(--guide-fz) !important;
  line-height: 1.85 !important;
  text-align: left !important;       /* 左揃え維持 */
  align-items: flex-start !important;
}
body:has(#list-page img[src*="top_titlegaido"]) #list-page .card-content1 h3{
  font-size: var(--guide-h3) !important;
  margin: 0 0 6px !important;
}

/* スマホは読みやすさ優先で微調整 */
@media (max-width: 768px){
  body:has(#list-page img[src*="top_titlegaido"]) #list-page{
    --guide-fz: 15px;
    --guide-h3: 17px;
    --guide-nav: 15px;
    --guide-bc: 13.5px;
  }
}
/* ===== タイトル画像（top_titlesirutanosimi.jpg）専用CSS =====
   ※ #list-page 内に当該画像があるページだけに作用
   ※ 既存スタイルへは干渉しないスコープ指定
============================================================= */

/* PC共通（ベース） */
body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page{
  --fun-max: 1240px;   /* タイトル画像の最大横幅（必要に応じて調整） */
}
body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page center{
  display: block;      /* 古い <center> を安全にブロック化 */
}
body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page center .section{
  max-width: var(--fun-max);
  margin: 10px auto 16px;  /* 上下の余白（PC） */
}
body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .section img[src*="top_titlesirutanosimi"]{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;     /* 角丸（任意） */
}

/* SP最適化 */
@media (max-width: 768px){
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page{
    padding-left: 12px;
    padding-right: 12px;
  }
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page center .section{
    margin: 8px 0 12px;  /* 上下の余白（SP） */
  }
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page .section img[src*="top_titlesirutanosimi"]{
    border-radius: 10px;  /* 角丸をやや小さく（SP） */
  }
  /* center直後の余白 <br> を無効化（このブロック直後のみ） */
  body:has(#list-page img[src*="top_titlesirutanosimi"]) #list-page center + br{
    display: none;
  }