.main{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
/* ===== ツールタイトルをかっこよく ===== */
.tool-title{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .04em;
  margin-bottom: 6px;
  color: #1e293b;
  position: relative;
}

/* 下のアクセントライン */
.tool-title::after{
  content: "";
  display: block;
  width: 700px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #45a7ff,
    #ff5c93
  );
}
.tool-sub{
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #64748b;
  margin: 6px 20px 18px 0;
  text-align: right;
}
/* ===== ツールボックス本体 ===== */
.folder-tool{
  background:#ffffff;
  padding:30px;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,0.05);
  max-width:650px;
  margin:20px auto 0;
}

/* ===== 入力欄縦並び ===== */
[data-tool-controls]{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ===== 入力フィールド ===== */
.folder-input{
  padding:10px 14px;
  border:1px solid #d0d7de;
  border-radius:10px;
  font-size:14px;
  transition:all .2s ease;
}

.folder-input:focus{
  outline:none;
  border-color:#45a7ff;
  box-shadow:0 0 0 3px rgba(69,167,255,0.15);
}

/* ===== トグル ===== */
#toggleNumbering{
  transform:scale(1.1);
  margin-right:6px;
}

label{
  font-size:14px;
  color:#334155;
}

/* ===== ボタン ===== */
#btnCreateZip{
  margin-top:10px;
  padding:12px 20px;
  border:none;
  border-radius:12px;
  background:linear-gradient(to right,#45a7ff,#ff5c93);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

#btnCreateZip:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 15px rgba(0,0,0,0.15);
}
@media (max-width: 800px){
.tool-sub{font-size: 10px;}
.tool-title{font-size: 18px;}
.tool-desc{font-size: 12px;}
.hint{font-size: 15px;}
.tool-title::after{
  width: auto;}
.main{
  padding: 0px;
}
}