body {
  font-family:sans-serif;
  background:#ccc1ad;
  margin:0;
  padding:40px;
  color:#837965;
}

.container {
  max-width:1000px;
  margin:auto;
  background:#fbe8c3;
  padding:30px;
  border-radius:25px;
  box-shadow:0 0 40px #fbe8c322;
}
.title {
  text-align: center;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 1px;
  color: #ff6b81;

  text-shadow:
    0 2px 0 rgba(0,0,0,0.08),
    0 4px 8px rgba(0,0,0,0.06);
}






/* 🔹 カラー入力4列 */
.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px;
  column-gap:18px;
  row-gap:8px;
  color:#444;
}

/* 🔹 セレクト4列 */
.select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap:18px;
  row-gap:8px;
  max-width: 1100px;
  margin: 20px auto 20px;
}

/* 🔹 共通サイズ統一 */
input{
  width:100%;
  min-width:0; 
  box-sizing:border-box;
  background:#111;
  border:1px solid #333;
  border-radius:12px;
  padding:8px;
  color:#666;
  transition:0.2s;
}

input:focus{
  outline:none;
  border-color:#ff6f91;
  box-shadow:0 0 8px rgba(255,111,145,0.5);
}


select {
width:100%;
  min-width:0;
  box-sizing:border-box;

  background:#837965;
  border:1px solid #ff6f91;
  border-radius:12px;
  padding:8px;

  color:#fff;
  font-weight:normal;

  transition:0.2s;
}

/* 🔹 セレクト項目 */
.select-item {
  display: flex;
  flex-direction: column;
}

.select-item label {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: bold;
  white-space: nowrap;   /* ← 改行防止 */
}

/* 🔹 ボタン */
.button-area {
  text-align: center;
  margin-bottom: 40px;
}

.button-area button {
  padding: 10px 25px;
  margin: 10px;
  border-radius: 25px;
  border: none;
  background: #ff6b81;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.result-section {
  max-width: 1100px;
  margin: 0 auto 60px;
}

.result-section h2 {
  margin-bottom: 10px;
  font-size: 18px;
}
.back-link {
  margin-top: 15px;
  margin-bottom: 30px;
}

.back-link a {
  text-decoration: none;
  font-size: 14px;
  color: #8a7d6a;
  opacity: 0.8;
  transition: 0.2s ease;
}

.back-link a:hover {
  opacity: 1;
}

textarea{
  width:100%;
  height:300px;
  margin-top:25px;
  background:#cdbd9d;
  color:#fff;
  border:1px solid #cdbd9d;
  border-radius:15px;
  box-sizing:border-box;
  padding:15px;
  resize:none;
}

input.color-red   { border-color:#ff4d4d;   background:rgba(255,77,77,0.10); }
input.color-blue  { border-color:#4da6ff;   background:rgba(77,166,255,0.10); }
input.color-green { border-color:#4dff88;   background:rgba(77,255,136,0.10); }
input.color-pink  { border-color:#ff4da6;   background:rgba(255,77,166,0.10); }
input.color-orange{ border-color:#ff944d;   background:rgba(255,148,77,0.10); }
input.color-yellow{ border-color:#ffd633;   background:rgba(255,214,51,0.10); }
input.color-black { border-color:#666;      background:rgba(255,255,255,0.25); }
input.color-white { border-color:#ddd;      background:rgba(255,255,255,0.25); }
input.color-purple{ border-color:#b366ff;   background:rgba(179,102,255,0.10); }
input.color-brown { border-color:#a0522d;   background:rgba(160,82,45,0.10); }
input.color-cyan  { border-color:#00e6e6;   background:rgba(0,230,230,0.10); }
input.color-lime  { border-color:#99ff33;   background:rgba(153,255,51,0.10); }
input.color-maroon{ border-color:#800000;   background:rgba(128,0,0,0.10); }
input.color-rose  { border-color:#ff66cc;   background:rgba(255,102,204,0.10); } 
input.color-banana{ border-color:#ffe135;   background:rgba(255,225,53,0.10); }
input.color-gray  { border-color:#999;      background:rgba(200,200,200,0.08); }
input.color-tan   { border-color:#d2b48c;   background:rgba(210,180,140,0.10); }
input.color-coral { border-color:#ff7f6a;   background:rgba(255,127,106,0.10); }