.layout-content *{
  padding: 0; 
  margin: 0; 
  letter-spacing: 0.03em; 
  line-height: 1.5; 
  color: #121212; 
  box-sizing: border-box;
}

.layout-content {
  width: 100%;
  margin: 30px auto;
  padding: 0;
}

/* margin class */
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

/* font-weight */
.layout-content .text-bold { font-weight:700; }
.layout-content .text-semibold { font-weight:600; }
.layout-content .text-normal { font-weight:400; }
.layout-content .text-light { font-weight:300; }

/* text-align */
.layout-content .text-left { text-align:left; }
.layout-content .text-center { text-align:center; }
.layout-content .text-right { text-align:right; }

/* font-size */
.layout-content .text-10 { font-size:10px; }
.layout-content .text-12 { font-size:12px; }
.layout-content .text-14 { font-size:14px; }
.layout-content .text-16 { font-size:16px; }
.layout-content .text-18 { font-size:18px; }
.layout-content .text-20 { font-size:20px; }
.layout-content .text-24 { font-size:24px; }
.layout-content .text-28 { font-size:28px; }
.layout-content .text-32 { font-size:32px; }

/* text-color */
.layout-content .text-black { color:#121212; }
.layout-content .text-gray { color:#4D4D4D; }
.layout-content .text-lightgray { color:#767676; }
.layout-content .text-red { color:#DE2F2F; }
.layout-content .text-blue { color:#003DA6; }
.layout-content .text-lightblue { color:#3F97C6; }
.layout-content .text-white { color:#FFFFFF; }

/* utility classes */
.layout-content .u-hidden { visibility: hidden; }
.layout-content .u-placeholder { opacity: 0.5; }
.layout-content .btn-placeholder { opacity: 0.6; }
.layout-content .heading-link { color: inherit; text-decoration: none; display: block; }
.layout-content .text-link { color: inherit; text-decoration: underline; }

/* underline */
.layout-content .text-underline {
  border-bottom: 3px solid currentColor;
  padding-bottom: 2px;
}


/* 商品陳列スタイル */
.product-detail4-area *{padding:0; margin:0; letter-spacing:0.03em; line-height:1.5; color:#121212; box-sizing:border-box;}
.product-detail4-area li{list-style:none;}
.product-detail4-area a{text-decoration:none;}
.product-detail4-area a:visited{color:#121212;}
.product-detail4-area span{display:inline-block; padding:2px 4px; margin-right:6px; margin-bottom:6px; border-radius:5px; font-color:#4d4d4d; border:solid 1px #4d4d4d;}

.product-detail4-area{
width:100%;
padding:0;
}
   
.product-detail4-area .product-detail4-title{
font-size:18px;
font-weight:bolder;
line-height:1.5;
margin-bottom:10px;
}

.product-detail4-area .wearing-list{
list-style:none;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.product-detail4-area .wearing-list li{
width:calc(50% - 5px);
margin-top:10px;
}

.product-detail4-area .wearing-list div{
width:100%;
margin-bottom:10px;
overflow:hidden;
}

.product-detail4-area .wearing-list .image{margin-bottom:15px;}
.product-detail4-area .wearing-list .image img{width:100%; height:auto;}
.product-detail4-area .wearing-list .gender{font-size:10px; margin-bottom:4px;}
.product-detail4-area .wearing-list .brand{font-size:12px; text-overflow:ellipsis; white-space: nowrap;}
.product-detail4-area .wearing-list .product-name{font-size:14px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;}


/* 商品説明スタイル */
.product-description-area {
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.product-description-area .description-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-description-area .description-image {
  width: 100%;
  text-align: center;
}

.product-description-area .description-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.product-description-area .description-text {
  width: 100%;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.product-description-area .description-text p {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.product-description-area .description-text p:last-child {
  margin-bottom: 0;
}

/*@media (max-width: 768px) {
  .product-description-area {
    grid-template-columns: 1fr;
  }
}*/

/* button components */
/* solid btns */
.btn-black {
  background-color:#121212!important;
  color:#fff;
  border:2px solid #121212;
}

.btn-gray {
  background-color:#767676!important;
  color:#fff;
  border:2px solid #767676;
}

.btn-red {
  background-color:#DE2F2F!important;
  color:#fff;
  border:2px solid #DE2F2F;
}

.btn-blue {
  background-color:#003DA6!important;
  color:#fff;
  border:2px solid #003DA6;
}

.btn-lightblue {
  background-color:#3F97C6!important;
  color:#fff;
  border:2px solid #3F97C6;
}


/* outline btns */
.btn-outline-black {
  background-color:transparent!important;
  color:#121212;
  border:2px solid #121212;
}

.btn-outline-gray {
  background-color:transparent!important;
  color:#4D4D4D;
  border:2px solid #4D4D4D;
}

.btn-outline-red {
  background-color:transparent!important;
  color:#DE2F2F;
  border:2px solid #DE2F2F;
}

.btn-outline-blue {
  background-color:transparent!important;
  color:#003DA6;
  border:2px solid #003DA6;
}

.btn-outline-lightblue {
  background-color:transparent!important;
  color:#3F97C6;
  border:2px solid #3F97C6;
}

/* ボタンスタイル */
.button-container {
  width: 100%;
}

.button-container .layout-button {
  display: block;
  width: 100%;
  padding: 15px 20px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button-container .layout-button:hover {
  background-color: #0056b3;
}

.button-container .layout-button:last-child {
  margin-bottom: 0;
}

.button-empty {
  padding: 40px;
  text-align: center;
  color: #999;
}

/* ボタン大 - 1カラム（全幅） */
.button-large .layout-button {
  width: 100%;
}

/* ボタン中 - PC2カラム、スマホ1カラム */
.button-medium {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-medium .layout-button {
  width: calc(50% - 5px);
  margin-bottom: 0;
}

/*@media (max-width: 768px) {
  .button-medium .layout-button {
    width: 100%;
  }
}*/


/* 2カラム画像スタイル */
.layout-image-2column {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  align-items: stretch;
}

.layout-image-2column .image-column {
  flex: 1;
  min-width: calc(50% - 5px);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.layout-image-2column .image-column.text-above .image-text {
  flex-shrink: 0;
}

.layout-image-2column .image-column.text-above img {
  margin-top: auto;
}

.layout-image-2column .image-column.text-below img {
  margin-bottom: 0;
}

.layout-image-2column .image-column.text-below .image-text {
  margin-top: auto;
}

.layout-image-2column .image-column img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.layout-image-2column .image-text {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
}

.layout-image-2column .image-column.with-text {
display: flex;
flex-direction: column;
}

.layout-image-2column .image-column.with-text .image-text {
flex-grow: 1;
}

.layout-image-with-text .image-container img{    
width: 100%;
height: auto;
border-radius: 8px;

}

/*@media (max-width: 768px) {
  .layout-image-2column .image-column {
    min-width: 100%;
  }
}*/


/* 動画スタイル */
.layout-video {
  width: 100%;
}

.layout-video video {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.layout-video .video-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.layout-video .video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.layout-video .video-placeholder {
  background: #f0f0f0;
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  color: #999;
}



/* 見出しレイアウト */
.layout-heading {
}

.layout-heading .heading-text {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 8px;
  margin-bottom: 15px;
  width: 100%;
  display: block;
}

.layout-heading .heading-text span {
  display: inline-block;
}

/* リッチテキスト見出しスタイル */
.layout-heading.heading-rich-text {
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.layout-heading.heading-rich-text p {
  margin: 0;
  line-height: 1.4;
}

.layout-heading .heading-rich-text a {
  color: inherit;
  text-decoration: underline;
}

.layout-heading.heading-rich-text strong,
.layout-heading.heading-rich-text b {
  font-weight: 700 !important;
}

.layout-heading.heading-rich-text span[style] {
  /* インラインスタイルを優先 */
}

/* テキスト要素のリッチテキスト */
.layout-text strong,
.layout-text b {
  font-weight: 700 !important;
}

/* 画像のみレイアウト */
.layout-image-only {
}

.layout-image-only .image-container {
  text-align: center;
}

.layout-image-only .image-container img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* テキストのみレイアウト */
.layout-text-only {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

.layout-text-only .text-content {
  display: contents !important;
  padding: 0;
  margin: 0;
}

.layout-text-only .text-content p {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
}

.layout-text-only .text-content p:last-child {
  margin-bottom: 0;
}

/* テキスト＋画像レイアウト */
.layout-text-image {
}

.layout-text-image .text-content {
  padding: 15px;
  background-color: #f8f9fa;
  border-left: 4px solid #007bff;
  border-radius: 4px;
  margin-bottom: 15px;
}

.layout-text-image .text-content p {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.layout-text-image .text-content p:last-child {
  margin-bottom: 0;
}

.layout-text-image .image-container {
  text-align: center;
}

.layout-text-image .image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 画像＋テキストレイアウト */
.layout-image-text {
}

.layout-image-text .image-container {
  text-align: center;
  margin-bottom: 15px;
}

.layout-image-text .image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.layout-image-text .text-content {
  padding: 15px;
  background-color: #f8f9fa;
  border-left: 4px solid #007bff;
  border-radius: 4px;
}

.layout-image-text .text-content p {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.layout-image-text .text-content p:last-child {
  margin-bottom: 0;
}

/* デフォルトレイアウト */
.layout-default {
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  color: #6c757d;
}

/* 画像クリックで拡大するポップアップ（CSSのみ / チェックボックス方式・URLを変更しない） */
.layout-content .zoom-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.layout-content .zoom-trigger { display: block; cursor: zoom-in; }
.layout-content .zoom-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  cursor: zoom-out;
}
.layout-content .zoom-toggle:checked ~ .zoom-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.layout-content .zoom-overlay img {
  max-width: 95%;
  max-height: 95%;
  width: auto;
  height: auto;
  object-fit: contain;
}