.def-wrapper{
  width: 100%;
  margin: 32px 0;
  box-sizing: border-box;
  --def-title-fs: 22px;
  --def-main-fs: 30px;
  --def-body-fs: 13px;
}

/* ベースカード */
.def-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 26px 20px;
  border-radius: 22px;
  box-sizing: border-box;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,204,51,0.5);
  position: relative;
  background: #ffffff;
  overflow: hidden;
  animation: def-fade-in 0.35s ease-out;
}

/* 背景バリエーション */
.def-theme-style1 .def-inner{
  background: radial-gradient(circle at top left, #fff3b8 0%, #ffffff 55%) fixed;
}
.def-theme-style2 .def-inner{
  background: #ffffff;
  border-color: #ffe4a3;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.def-theme-style3 .def-inner{
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(255,204,0,0.28);
}
.def-theme-style3 .def-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(to bottom, rgba(255,224,102,0.42) 0%, transparent 40%);
  pointer-events: none;
}
.def-theme-style4 .def-inner{
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 40%, #fff9e5 100%);
  border-color: #f0f0f0;
}
.def-theme-style5 .def-inner{
  background: #ffffff;
  border-color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* ウィンドウバー */
.def-window-bar{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.def-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.def-dot-red{ background: #ff5f57; }
.def-dot-yellow{ background: #ffbd2e; }
.def-dot-green{ background: #28c840; }
.def-window-label{
  font-size: 10px;
  color: #999;
  margin-left: 4px;
  letter-spacing: 0.12em;
}

/* ヘッダー */
.def-header{
  text-align: center;
  margin-bottom: 16px;
}
.def-title{
  font-size: var(--def-title-fs);
  font-weight: 800;
  margin-bottom: 4px;
  color: #222;
  letter-spacing: 0.06em;
}
.def-today{
  font-size: calc(var(--def-body-fs) * 0.9);
  color: #777;
}
.def-today-date{
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffec80;
  color: #333;
}

/* オプションボタン - PC:4列フル、SP:自動崩し */
.def-options{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 8px;
}
.def-option-btn{
  flex: 1 1 0;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid #ffe08a;
  background-color: #fffef6;
  cursor: pointer;
  font-size: var(--def-body-fs);
  font-weight: 500;
  line-height: 1.4;
  transition: all .18s cubic-bezier(.19,1,.22,1);
  text-align: center;
  color: #444;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  position: relative;
}
.def-option-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  background-color: #fff4c4;
}
.def-option-btn.is-active{
  border-color: #ffb300;
  background-color: #ffdd55;
  color: #222;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(255,179,0,0.35);
}

/* 速達 */
.def-fast-wrap{
  display: flex;
  justify-content: center;
  margin: 4px 0 10px;
}
.def-fast-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(var(--def-body-fs) * 0.9);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,221,102,0.24);
  border: 1px dashed #ffb300;
  color: #444;
}
.def-fast-checkbox{
  accent-color: #ffb300;
}
.def-fast-wrap.is-disabled{
  opacity: 0.3;
}

/* 結果 */
.def-result{
  margin-top: 4px;
  text-align: center;
}
.def-selected-label{
  font-size: calc(var(--def-body-fs) * 0.9);
  color: #555;
  margin-bottom: 4px;
}
.def-main-arrive{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}
.def-main-label{
  font-size: calc(var(--def-body-fs) * 0.8);
  color: #888;
  margin-bottom: 0;
}
.def-main-date{
  font-size: var(--def-main-fs);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #111;
}

/* タイムライン */
.def-timeline{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.def-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
}
.def-step-arrow{
  font-size: 18px;
  color: #ffb300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.def-step-label{
  font-size: calc(var(--def-body-fs) * 0.8);
  color: #999;
  margin-bottom: 1px;
}
.def-step-date{
  font-size: var(--def-body-fs);
  color: #444;
}
.def-step-date-bold{
  font-weight: 700;
  color: #111;
}

/* 注記 */
.def-disclaimer{
  margin-top: 6px;
  font-size: calc(var(--def-body-fs) * 0.7);
  color: #888;
  line-height: 1.7;
}

/* アニメーション */
@keyframes def-fade-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes def-pulse{
  0%{ transform:scale(1); text-shadow:0 0 0 rgba(255,179,0,0);}
  40%{ transform:scale(1.03); text-shadow:0 0 14px rgba(255,179,0,0.5);}
  100%{ transform:scale(1); text-shadow:0 0 0 rgba(255,179,0,0);}
}
.def-animate-pulse{
  animation:def-pulse 0.35s ease-out;
}

/* レスポンシブ強化 */
@media (max-width: 1024px){
  .def-inner{
    padding: 20px 18px 18px;
  }
}
@media (max-width: 768px){
  .def-wrapper{
    margin:24px 0;
  }
  .def-inner{
    padding:18px 14px 16px;
    border-radius:18px;
  }
  .def-options{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .def-option-btn{
    flex:1 1 calc(50% - 6px);
    margin-top:4px;
    font-size:calc(var(--def-body-fs) * 1.0);
  }
  .def-step{
    min-width:80px;
  }
}
@media (max-width: 480px){
  .def-title{
    font-size:calc(var(--def-title-fs) * 0.9);
  }
  .def-options{
    gap:6px;
  }
  .def-option-btn{
    flex:1 1 100%;
  }
  .def-main-date{
    font-size:calc(var(--def-main-fs) * 0.9);
  }
  .def-timeline{
    gap:8px;
  }
}