/* シャツカスタマイズ画面 */

.customize{
  display: flex;
}

/* タブ部分 */
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.tab-container {
  flex: 1;
  padding: 10px;
  border-right: 1px solid #ccc;
  overflow-y: auto;
  background-color: #f9f9f9;
}

.tab-container a {
  display: block;
  padding: 10px 15px;
  margin-bottom: 5px;
  background-color: #f0f0f0;
  text-decoration: none;
  color: #333;
  border: 1px solid #ccc;
}

.tab-container a:hover {
  background-color: #ddd;
}

.tab-content {
  flex: 1;
  padding: 20px;
  display: none;
  border: 1px solid #ccc;
  border-left: none;
}

.tab-content.active {
  display: block;
}

.tab-container a.active {
  background-color: #ddd;
}

/* タブ2のリンクを非表示にするが、余白は保持 */
.hidden-tab {
  visibility: hidden; /* 非表示にするが、レイアウト上のスペースは残す */
}

/* タブ2のコンテンツも非表示にするが、余白を保持 */
.hidden-content {
  display: none; /* コンテンツ自体は非表示 */
}

/* レスポンシブ: 画面幅が768px以下（モバイル用）で横並びに変更 */
@media (max-width: 768px) {
  .customize{
    display: block;
  }

  .tab-container {
    flex: 1;
    padding: 10px;
    border-bottom: 1px solid #ccc; /* 横並びにした場合、右ではなく下にボーダーをつける */
    overflow-x: auto; /* 横方向にスクロール */
    background-color: #f9f9f9;
    
    /* 横並びに設定 */
    display: flex;
    flex-direction: row; /* 横並び */
    justify-content: space-between; /* タブ間の間隔を均等に */
    gap: 10px; /* タブの間隔を10pxに設定 */
    white-space: nowrap; /* タブの折り返しを防止 */
  }

  /* タブリンクのスタイル（横並びでもきれいに表示） */
  .tab-container a {
    flex: 1 1 30%; /* 1行に3つのタブを表示 */
    text-align: center;
    padding: 15px 5px; /* 余白を調整 */
  }

  .hidden-tab {
    display: none !important; /* スマホではスペースごと消える */
  }
}


/* タブコンテンツ */
.tab-customize-content {
  flex: 7;
  padding: 10px;
  overflow-y: auto;
}

/* タブコンテンツの表示切替 */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}


/* タブコンテンツの内容 */
.tab-content-title{
  text-align: center;
}


/* デザイン一覧 */
.customize-title-list{
  padding: 20px;
}

.customize-select-list dt {
  width: 100%;
  display: flex;
  line-height: 54px;
  border-bottom: 1px solid;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}

.customize-select-list dt span {
  width: 30%;
  color: #444;
  font-size: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

.customize-select-list dt p {
  font-weight: bold;
  text-align: right;
  width: 60%;
  padding: 0 45px 0 0;
  box-sizing: border-box;
  color: #444;
  font-size: 15px;
}

.parts-customize-price-display {
  position: absolute;
  right: 5px;
}

/* スマホ用レスポンシブ */
@media (max-width: 480px) {
  .customize-select-list dt {
    display: block;
  }

  .customize-select-list dt p {
    width: 100%;
    padding: 0;
  }

  .parts-customize-price-display {
    position: relative;
    padding-right: 5px;
  }
}

/* カードコンテナの設定 */
.customize-card-container-4 {
  display: grid;
  grid-template-columns: repeat(4, 100fr); /* 横に3列*100に並べる */
  gap: 20px; /* カード間のスペース */
  padding: 20px;
  max-width: 1240px;
  width: 100%; /* 横幅を100% */
  box-sizing: border-box;
  margin: 0 auto; /* 中央寄せ */
  justify-items: center;
  align-items: stretch; /* 高さをそろえるために stretch を指定 */
}

.card {
  background-color: #f0f0f0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 中身も整える場合 */
  border: 1px solid #000;
}

.custom-radio {
  cursor: pointer;
  position: relative;
}

.icon-img-hidden{
  display: none !important;
}

.custom-radio input[type="radio"] {
  display: none; /* ラジオボタン非表示 */
}

.customize-image-wrapper {
  position: relative;
  width: 200px;
  text-align: center;
}

.customize-image-wrapper img {
  width: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid #ccc;
  border-radius: 10px;
  transition: border 0.3s;
}

.parts-customize-title,
.parts-customize-explanation{
  word-break: break-word;   /* ブラウザの幅に合わせて折り返す */
}

.parts-customize-explanation{
  display: none;
}

.card.selected {
  border-color: #007BFF;
  border-width: 4px; /* ← 太さをここで変更 */
}

/* 価格 */
.parts-customize-price{
  display: block;
  background: red;
  color: #fff;
  font-size: 18px;
  padding: 3px 5px;
  border-radius: 3px;
  margin: 0 5px;
}


/* ノートパソコン用レスポンシブ */
@media (max-width: 1600px) {
  .customize-card-container-4 {
    display: grid;
    grid-template-columns: repeat(3, 100fr); /* 横に3列*100に並べる */
    gap: 10px; /* カード間のスペース */
    padding: 20px;
    width: 100%; /* 横幅を100% */
    box-sizing: border-box;
    margin: 0 auto; /* 中央寄せ */
    justify-items: center;
    align-items: stretch; /* 高さをそろえるために stretch を指定 */
  }
}

/* スマホ用レスポンシブ */
@media (max-width: 480px) {
  .tab-content {
    padding: 5px;
  }

  .tab-customize-content {
    padding: 5px;
  }

  .customize-card-container-4 {
    display: grid;
    grid-template-columns: repeat(2, 100fr); /* 横に3列*100に並べる */
    gap: 10px; /* カード間のスペース */
    padding: 0px;
  }

  .customize-image-wrapper{
    width: 150px;
  }

  .customize-image-wrapper img {
    width: 100%;
    object-fit: cover;
    display: block;
    border: none;
    border-radius: 10px;
    transition: border 0.3s;
  }
  .card {
    background-color: #f0f0f0;
    padding: 5px;
  }
}


/* 右：3割 */
/* 商品画像 */


/* 商品画像 */
.product-image {
  flex: 3;
  padding: 10px;
  border-left: 1px solid #ccc;
  text-align: center;
}


.product-image img{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.material-fabric-title{
  font-weight: bold;
  border-bottom: 1px solid #000;
}

.material-fabric-title{
  font-weight: bold;
  border-bottom: 1px solid #000;
}


/* カスタマイズパーツ画像 */
.parts-image {
  flex: 2;
  padding: 10px;
  border-left: 1px solid #ccc;
  text-align: center;
}


.parts-image img{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}


.parts-title{
  font-weight: bold;
  border-bottom: 1px solid #000;
}

.parts-explanation{
  padding: 20px;
  text-align: left;
}

/* 固定 */
.bottom_footer {
  background-color: #222;
  color: white;
  text-align: center;
  padding: 12px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.row{
  display: flex;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.amount{
  width: 50%;
  padding: 1px 5px;
}

.button{
  width: 50%;
  padding: 1px 5px;
}

/* スマホ用レスポンシブ */
@media (max-width: 480px) {
  button {
    width: 100% !important;
  }
}

/* 点滅する画像のコンテナ */
.shirt-image {
  position: relative;
  width: 300px; /* 任意の幅 */
  height: 300px; /* 任意の高さ */
  margin-bottom: 20px; /* 下に少しスペースを追加 */
  margin: 0 auto;
}

/* 画像を重ねる */
.image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1; /* 初期状態で画像を隠す */
  width: 100%;
  height: 100%;
}

.part-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* 初期状態で image1 表示、part-image 非表示 */
#image1 {
  opacity: 1;
  z-index: 1;
}

#part-image {
  opacity: 0;
  z-index: 2;
}