@charset "UTF-8";
.item_wrap {
  margin: 0 auto;
  width: 100%;
  max-width: 750px;
  height: auto;
  min-height: 400px;
  color: #444;
}
/*=== 商品詳細画像 ===*/
.item_wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%; /* ←追加これ重要 */
}

/*=== タイトル／テキスト ===*/
.item_h1 {
  margin: 10px 0;
  text-align: center;
}

.item_h2 {
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: -1.5rem;
}

.item_h3 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

.small-text {
  font-size: 0.85rem;
  line-height: 1.5;
}
		
.right-text {
  margin-left: 1.2rem;
  line-height: 1.5;
}

.center-text {
  text-align: center;
}

/*=== アイテム・フレーム + 生地画像 ===*/
.item_frame {
  margin: -10px 0;
  border: 1px solid #CCC;
  min-height: 100px;
}
.fab-box {
  position: relative;
  width: 98%;
  max-width: 500px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 4 / 2.8; /* = 70%表示（2.8 = 4 × 0.7） */
}

.fab-box img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: bottom;
  display: block;
}

/*=== サイズ・フレーム ===*/
.size_frame {
  margin: 10px 0;
  padding: 0 15px 0 15px;
  border: 0px solid #CCC;
  min-height: 100px;
}
/*=== キャプションエリア ===*/
.item_caption {
  text-align: center;
  margin: 0;
  padding: 10px 0;
  font-size: 1.25rem;
  font-weight: 700;
  background-color: #AAA;
  color: #FFF;
}

/*=== サイズスペック ===*/
.item_spec {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}

.spec-row {
  flex-wrap: wrap;
  border-bottom: 1px solid #CCC;
  padding: 10px 0;
}

.spec-label {
  margin: 5px 0 5px;
  line-height: 1.5;
  white-space: normal;
}

.spec-full {
  flex: 1;
  margin: 5px 0 5px;
  line-height: 1.5;
  white-space: normal;
}

.spec-values {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.spec-values div {
  min-width: 50px;
}
		
/*===== アンダーバー =====*/
.item_u-bar {
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1.75px solid #CCC
}

/*=== .item_wrap 内だけのリンク設定 ===*/
.item_wrap a {
  color: #0000EE;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.item_wrap a:visited {
  color: #551A8B;
}

.item_wrap a:hover,
.item_wrap a:active {
  color: #0000EE; /* 変えないことでCLSを完全回避 */
  will-change: color;
}

/*=== アコーディオン ===*/
.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
}
.accordion.open .accordion-content {
  /* max-height は JS 側で制御するので、ここでは不要 */
}

.accordion-header {
  cursor: pointer;
  position: relative;
  color: inherit; /* ← これで .item_caption の色をそのまま使える！ */
}

.accordion-header.item_caption {
  color: #FFF;
  background-color: #AAA;
}

.accordion-header::after {
  content: '＋';
  position: absolute;
  right: 1rem;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.accordion.open .accordion-header::after {
  content: '－';
}


/*===== PC/タブレット・マージン =====*/
.mb-10 {
  margin-bottom: 10px}

.mb-20 {
  margin-bottom: 20px}

.mb-30 {
  margin-bottom: 30px}

.mb-40 {
  margin-bottom: 40px}

.mb-50 {
  margin-bottom: 50px}

.mb-75 {
  margin-bottom: 75px}

.mb-100 {
  margin-bottom: 100px}

.mb-125 {
  margin-bottom: 125px}

.mb-150 {
  margin-bottom: 150px}

.mb-200 {
  margin-bottom: 200px}
/*===== =====*/

/*===== マイナス・マージン =====*/
.mb-n10 {
  margin-bottom: -10px}

.mb-n20 {
  margin-bottom: -20px}

.mb-n30 {
  margin-bottom: -30px}

.mb-n40 {
  margin-bottom: -40px}

.mb-n50 {
  margin-bottom: -50px}
/*===== =====*/

/*===== レスポンシブ対応 =====*/
@media (max-width: 767px) {

/*===== スマホ マージン =====*/
.mb-10 {
  margin-bottom: 0.625rem}

.mb-20 {
  margin-bottom: 1.25rem}

.mb-30 {
  margin-bottom: 1.875rem}

.mb-40 {
  margin-bottom: 2.5rem}

.mb-50 {
  margin-bottom: 3.125rem}

.mb-75 {
  margin-bottom: 4.6875rem}

.mb-100 {
  margin-bottom: 6.25rem}

.mb-125 {
  margin-bottom: 7.8125rem}

.mb-150 {
  margin-bottom: 9.375rem}

.mb-200 {
  margin-bottom: 12.5rem}
}
/*===== =====*/