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);
}


.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;
}



/* 🔹 カラー入力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;
}

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-white  { background:#FFFFFF; }		
input.color-gray  { background:#828282;color:#ffffff;}		
input.color-black  { background:#252525; color:#ffffff;}		
input.color-corlal  { background:#FF7272; }		
input.color-corlaloraneg  { background:#FF3C3C; }		
input.color-maloon  { background:#883030; color:#ffffff;}		
input.color-redbrown  { background:#552D2E;color:#ffffff; }		
input.color-redpink  { background:#FF0052; color:#ffffff;}		
input.color-hotpink  { background:#FF0074; color:#ffffff;}		
input.color-pink  { background:#FF06DF; color:#ffffff;}		
input.color-rose  { background:#FFA2F9; }		
input.color-lightpurple  { background:#CEA2FF; }		
input.color-purple  { background:#A55BF1; color:#ffffff;}		
input.color-darkpurple  { background:#6D0076; color:#ffffff;}	
input.color-navy  { background:#362650;color:#ffffff; }		
input.color-navyblue  { background:#393B91;color:#ffffff; }		
input.color-blue  { background:#3001FF;color:#ffffff;}		
input.color-lightblue  { background:#5774FF;color:#ffffff; }		
input.color-sky  { background:#00ADE1; color:#ffffff;}		
input.color-cyan  { background:#01FFE6; }		
input.color-mint  { background:#98FFDB; }		
input.color-lightgreen  { background:#96FF92; }		
input.color-green  { background:#48D96C;color:#ffffff; }		
input.color-neongreen  { background:#01FF23; color:#ffffff;}		
input.color-lime  { background:#93FF00; }		
input.color-olivegreen  { background:#5E8E00; color:#ffffff;}		
input.color-darkolive  { background:#477448;color:#ffffff; }		
input.color-darkgreen  { background:#226445; color:#ffffff;}		
input.color-lightyellow  { background:#FFFF64; }		
input.color-yellow  { background:#FFE501; }		
input.color-darkyellow  { background:#A89300; color:#ffffff;}		
input.color-orange  { background:#FF8300; }		
input.color-lightorange  { background:#FF732F; }		
input.color-brown  { background:#79472A; color:#ffffff;}		
input.color-khaki  { background:#706833;color:#ffffff; }		
input.color-beige  { background:#BC955D;color:#ffffff; }