:root {
  /* モジュラースケールの考え方 */
  --ratio: 1.5;
  --s8: calc(var(--s7) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s1: calc(var(--s0) * var(--ratio));
  --s0: 1rem;
  --s-1: calc(var(--s0) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));


  /* カラム幅の公理の考え方 */
  --measure: 60ch;


  /* Stackのスペースに利用 */
  --space: var(--s1);


  /* Boxの太さに利用 */
  --border-thin: thin;


  /* Reelの子要素の大きさ 適当な値で良い */
  --item-width: 1rem;


  /* 色 */
  --color-light: #ffffff;
  --color-dark: #121212;
  --color-black: #212121;
  --color-dark-gray: #757575;
  --color-gray: #BDBDBD;
  --color-blue: #0D47A1;
  --color-green: #43A047;
  --color-orange: #FF8C42;
  --color-red: #C0123C;
}

* {
  max-width: var(--measure);
  line-height: var(--ratio);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Serif JP", "Yu Mincho", "BIZ UD明朝", "Hiragino Mincho ProN", serif;

  background-color: var(--color-light);

  color: #30313D;
}

*::before, *::after {
  box-sizing: border-box;
}

/* max-width */
html, body, div, section, header, nav, table, thead, tr, tbody, main, footer, img, video, iframe {
  max-width: none;
}

ul {
  list-style-position: inside;
}

img {
  max-width: 100%;
  vertical-align: top;
}

a.without-underline {
  text-decoration: none;
}

h1 {
  font-size: 2rem;
}

.font-size-lg {
  font-size: 1.125rem !important;
}
.font-size-xl {
  font-size: 1.25rem !important;
}
.font-size-2xl {
  font-size: 1.5rem !important;
}
.font-size-3xl {
  font-size: 1.875rem !important;
}
.font-size-4xl {
  font-size: 2.25rem !important;
}
.font-size-5xl {
  font-size: 3rem !important;
}

.font-bold {
  font-weight: bold;
}

@media screen and (min-width: 599px) {
  .smartphone {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .pc {
    display: none;
  }
}

header {
  position: sticky;
  top: 0;

  background-color: var(--color-light);
  padding: var(--s0);

  border-bottom: 1px solid var(--color-gray);

  z-index: 1;
}
.smartphone-header {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr auto;
  align-content: center;
  align-items: center;
}

.logo {
  width: 80px;
  height: 56px;
}
@media (width < 600px) {
  .logo {
    width: 64px;
    height: 40px;
  }
}

.icon {
  width: 2rem;
  height: 2rem;
}
.big-icon {
  width: 3rem;
  height: 3rem;
}
@media (width < 600px) {
  .icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  .big-icon {
    width: 2rem;
    height: 2rem;
  }
}



/*　ONLINE STOREボタン　*/
.store-button {
  padding: var(--s0) var(--s2) var(--s0) var(--s1);
  border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
  background-color: var(--color-dark);
  color: var(--color-light);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bid-store-button {
  font-size: 1.2rem;
  padding: var(--s0) var(--s2) var(--s0) var(--s1);
  border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
  background-color: var(--color-dark);
  color: var(--color-light);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (width < 600px) {
  .store-button {
    font-size: 0.7rem;
    padding: var(--s-1) var(--s0) var(--s-1) var(--s-1);
    border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
    background-color: var(--color-dark);
    color: var(--color-light);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bid-store-button {
    font-size: 1rem;
    padding: var(--s0) var(--s1) var(--s0) var(--s0);
    border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
    background-color: var(--color-dark);
    color: var(--color-light);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}



/* トップ */
.hero {
  position: relative;
  overflow: hidden;
  max-width: none;
}

.hero__background {
  display: block;
  width: 100%;
  height: auto;
}

.hero__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 30%;
  background-color: rgb(0, 0, 0, 0);
}

@media (width < 600px) {
  .hero__logo {
    max-width: 50%;
  }
}



/* 見出し */
.heading {
  text-align: center;
  font-size: 1.5rem !important;
}
@media (width < 600px) {
  .heading {
    font-size: 0.7rem !important;
  }
}



/* 動画 */
.youtube-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
}
@media (width < 600px) {
  .youtube-container {
    gap: var(--s2);
  }
}

.youtube-frame {
  max-width: 450px;
  max-height: 300px;
}
@media (width < 600px) {
  .youtube-frame {
    max-width: 320px;
    max-height: 180px;
  }
}



/* モデル画像 */
/* width と borderを消すと四角のバラバラ */
/*.model-image {*/
/*  width: 620px;*/
/*  height: 350px;*/
/*}*/
/*@media (width < 600px) {*/
/*  .model-image {*/
/*    width: 360px;*/
/*    height: 200px;*/
/*  }*/
/*}*/



/*　商品画像　*/
.product-image {
  height: 350px;
}
@media (width < 600px) {
  .product-image {
    height: 100%;
  }
}
.background {
  position: relative;
}
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.8;
}
.layer p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #ffffff;
  font-size: 2rem;
  text-align: center;
  background-color: #000000;
}



/* フッター */
footer {
  margin-top: var(--s4);
}












.clothing-card {
  width: 240px;
  height: 320px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--color-gray);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.clothing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.clothing-card-inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.card-image-wrapper {
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clothing-id {
  text-align: center;
  text-overflow: ellipsis;
  padding-top: 0.5rem;
  font-size: 0.9rem;
}
.clothing-name {
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}






/* 仕様テーブルのスタイル */
/* 外枠 */
.spec-table-wrap {
  border: 2px solid var(--color-blue);
  border-radius: 8px;
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;         /* 中央寄せ */
}

/* テーブル本体 */
.specification-table {
  width: 100%;
  border-collapse: collapse !important;  /* ← 強制 */
  border-spacing: 0 !important;          /* ← すき間をゼロに */
  table-layout: fixed;
}

.specification-table th,
.specification-table td {
  padding: var(--s0) var(--s1);
  text-align: center;
  border-bottom: 1px solid var(--color-gray);
}

/* ヘッダー下にも線を出したい場合 */
.specification-table thead th { border-bottom: 1px solid var(--color-gray); }

.specification-table tbody tr:last-child td { border-bottom: none; }

/* サイズ並びは td 内のラッパーをflexに（td自体はtable-cellのまま） */
.specification-table td .sizes {
  display: flex;
  justify-content: center;
  gap: var(--s1);
  flex-wrap: wrap;
}






/* フォーム */
label {
  font-size: 1.2rem;
  font-weight: bold;
}

.required {
  color: var(--color-red);
  font-size: 1rem;
}

input[type="text"] {
  min-width: 50ch;
  padding: var(--s-2);
  border: 1px solid var(--color-dark);
  border-radius: 4px;
  font-size: 1rem;
}

input[type="text"]:focus {
  border-color: var(--color-blue, #1E88E5);
  box-shadow: 0 0 5px rgba(30, 136, 229, 0.3);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="checkbox"]:disabled + label {
  color: var(--color-gray);
}

select.custom-select {
  padding: var(--s-1) var(--s1) var(--s-1) var(--s-1);
  border: 1px solid var(--color-gray);
  border-radius: 6px;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right var(--s-2) center;
  background-size: 1rem;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select.custom-select:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 4px rgba(13, 71, 161, 0.3);
  outline: none;
}

input.error {
  border: 1px solid var(--color-red);
}

.error-text {
  color: var(--color-red);
}



/* 服の商品 画像 画面 */
.image-slot {
  max-width: 180px;
}

.image-drop-area {
  width: 100%;
  padding: var(--s4);
  border: 2px dashed var(--color-blue);
  text-align: center;
  border-radius: 12px;
  background-color: #f4f7fa;
  color: var(--color-blue);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}
.image-drop-area.dragover-highlight {
  background-color: #e3f2fd;
  transform: scale(1.01);
}

#replaceImageListArea {
  display: none;
}

.image-wrapper {
  position: relative;
  margin: var(--s-1);
  display: inline-block;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease-in-out;
}
.image-wrapper:hover {
  transform: scale(1.02);
}

.register-button {
  background-color: var(--color-green);
  color: white;
  border: none;
  padding: var(--s-1) var(--s1);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.register-button:hover {
  background-color: #2e7d32;
  transform: scale(1.03);
}

.register-button:active {
  transform: scale(0.98);
}

.register-button:disabled {
  background-color: var(--color-gray);
  cursor: not-allowed;
}

.delete-button {
  background-color: var(--color-red);
  color: white;
  border: none;
  padding: var(--s-1) var(--s1);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.delete-button:hover {
  background-color: #a00;
  transform: scale(1.03);
}

.delete-button:active {
  transform: scale(0.98);
}

.cross-button {
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: var(--color-red);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  line-height: 28px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease;
}

.cross-button:hover {
  background-color: #a00;
  cursor: pointer;
}

.delete-button:disabled {
  background-color: var(--color-gray);
  cursor: not-allowed;
}


/* ローディングスピナー */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #333;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-left: 8px;
  vertical-align: text-bottom;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.link-button {
  background-color: var(--color-blue);
  color: var(--color-light);
  border: none;
  padding: var(--s-1) var(--s1);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.link-button:hover {
  background-color: #0b3e91;
  transform: scale(1.03);
}

.link-button:active {
  transform: scale(0.98);
}