img {
  max-width: 100%;
  height: auto;
}

body {
  font-size: 1rem;
  line-height: 1.6;
  padding: 1em;
}

.flower-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.flower-item {
  flex: 1 1 calc(50% - 1em); /* スマホでは2列表示 */
  box-sizing: border-box;
}
@media screen and (max-width: 600px) {
  .flower-item {
    flex: 1 1 100%; /* スマホでは1列表示に切り替え */
  }
}

h1, h2, h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

a {
  display: block;
  padding: 0.5em 0;
}


.flower-color-catalog {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.color-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.color-red    { background-color: #FF0000; color: #fff; }
.color-pink   { background-color: #FFC0CB; color: #000; }
.color-blue   { background-color: #0000FF; color: #fff; }
.color-brown  { background-color: #A52A2A; color: #fff; }
.color-green  { background-color: #008000; color: #fff; }
.color-violet { background-color: #EE82EE; color: #000; }
.color-orange { background-color: #FFA500; color: #000; }
.color-yellow { background-color: #FFFF00; color: #000; }
.color-cream  { background-color: #FFFDD0; color: #000; }
.color-black  { background-color: #000000; color: #fff; }
.color-silver { background-color: #C0C0C0; color: #000; }
.color-white  { background-color: #FFFFFF; color: #000; }

.color-table td {
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

.color-table a {
  display: block;
  text-decoration: none;
}


.page-wrapper {
  width: 98%;
  margin: 0 auto;
}