/* =========================================================
   Base
========================================================= */

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #172b4d;
  background:
    radial-gradient(
      circle at 5% 15%,
      rgba(59, 130, 246, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 85%,
      rgba(96, 165, 250, 0.08),
      transparent 30%
    ),
    #f5f9fd;

  line-height: 1.7;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic UI",
    "Yu Gothic",
    Meiryo,
    sans-serif;

  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font-family: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   Header
========================================================= */

.site-header {
  position: relative;
  background: linear-gradient(135deg, #172b4d 0%, #27496d 100%);
  color: #fff;
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(23, 43, 77, 0.15);
}

.header-inner {
  max-width: 760px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  position: relative;

  width: 32px;
  height: 32px;

  display: block;

  border-radius: 8px;

  background: linear-gradient(
    135deg,
    #72b7ff,
    #2478d8
  );

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.2);

  transform: rotate(45deg);
}

.brand-mark::after {
  content: "";

  position: absolute;

  width: 15px;
  height: 15px;

  top: 8px;
  left: 8px;

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.35);
}

.site-title {
  margin: 0;

  font-size: 1.12rem;
  font-weight: 700;

  letter-spacing: 0.02em;
}

.header-caption {
  margin: 0;

  color: rgba(255, 255, 255, 0.75);

  font-size: 0.78rem;
  font-weight: 500;
}


/* =========================================================
   Main
========================================================= */

.container {
  width: min(100% - 32px, 760px);

  margin: 32px auto 0;

  padding: 36px 40px 44px;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid rgba(203, 213, 225, 0.7);

  border-radius: 20px;

  box-shadow:
    0 24px 60px rgba(30, 64, 175, 0.08),
    0 5px 18px rgba(15, 23, 42, 0.04);

  backdrop-filter: blur(10px);
}

.site-footer {
  max-width: 760px;

  margin: 0 auto;

  padding: 22px 16px 36px;

  color: #7890aa;

  font-size: 0.82rem;

  text-align: center;
}


/* =========================================================
   Step Navigation
========================================================= */

.steps {
  position: relative;

  list-style: none;

  display: flex;

  margin: 0 0 38px;

  padding: 0;
}

/* ステップ同士をつなぐ線 */
.steps li::after {
  content: "";

  position: absolute;

  top: 17px;
  left: 50%;

  width: 100%;
  height: 3px;

  background: #dbe4ef;

  z-index: 0;

  transition:
    background 0.4s ease;
}

/* 完了したステップから次のステップまで青くする */
.steps li.past::after {
  background: linear-gradient(
    90deg,
    #1769d1,
    #3188e8
  );
}

.steps li:last-child::after {
  display: none;
}

.steps li {
  position: relative;

  flex: 1;

  text-align: center;

  padding: 0 4px 14px;

  color: #9aaabd;

  border-bottom: 3px solid transparent;

  font-size: 0.88rem;
  font-weight: 600;

  z-index: 1;

  transition:
    color 0.3s ease;
}

.steps li.current {
  color: #1769d1;
  font-weight: 700;
}

.steps li.past {
  color: #526b88;
}

/* ステップ番号 */
.steps .num {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  margin-right: 7px;

  border-radius: 50%;

  background: #d8e2ee;

  color: #fff;

  font-size: 0.85rem;
  font-weight: 700;

  z-index: 2;

  box-shadow:
    0 0 0 5px #fff;

  transition:
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* 現在 */
.steps li.current .num {
  background:
    linear-gradient(
      135deg,
      #3188e8,
      #1769d1
    );

  box-shadow:
    0 0 0 5px #fff,
    0 6px 14px rgba(37, 99, 235, 0.25);

  animation: stepPulse 0.45s ease-out;
}

/* 完了 */
.steps li.past .num {
  background: #1769d1;

  font-size: 0;

  box-shadow:
    0 0 0 5px #fff,
    0 4px 10px rgba(37, 99, 235, 0.15);
}

/* 完了したステップにチェック */
.steps li.past .num::before {
  content: "✓";

  font-size: 0.9rem;

  animation: checkIn 0.35s ease-out;
}

@keyframes stepPulse {
  0% {
    transform: scale(0.85);
  }

  60% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes checkIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  70% {
    transform: scale(1.15);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* =========================================================
   Section Transition
========================================================= */

/*
 * hidden属性が外れたときに、
 * sectionが下から少し浮き上がるように表示される。
 */
section:not([hidden]) {
  animation: sectionEnter 0.4s ease-out;
}

@keyframes sectionEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   Typography
========================================================= */

h1 {
  margin: 0 0 8px;

  color: #132a4a;

  font-size: clamp(1.5rem, 4vw, 1.85rem);

  line-height: 1.4;

  font-weight: 800;

  letter-spacing: -0.02em;
}

h1:focus {
  outline: none;
}

.lead {
  margin: 0 0 28px;

  color: #647b96;

  font-size: 0.95rem;
}


/* =========================================================
   Form Fields
========================================================= */

.field {
  position: relative;

  margin-bottom: 16px;

  padding: 20px;

  background: #fff;

  border: 1px solid #e1eaf4;

  border-radius: 14px;

  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.035);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.field:hover {
  border-color: #c9d9ea;

  box-shadow:
    0 8px 24px rgba(30, 64, 175, 0.06);

  transform: translateY(-1px);
}

.field:focus-within {
  border-color: #8bbcf2;

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.07),
    0 8px 24px rgba(30, 64, 175, 0.06);
}


/* =========================================================
   Labels
========================================================= */

label {
  display: block;

  margin-bottom: 9px;

  color: #183153;

  font-size: 0.95rem;

  font-weight: 700;
}

.badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-left: 7px;

  padding: 3px 8px;

  border-radius: 5px;

  background: #ff5a67;

  color: #fff;

  font-size: 0.68rem;

  line-height: 1.3;

  font-weight: 700;

  vertical-align: middle;
}

.badge.optional {
  background: #8b9bb0;
}


/* =========================================================
   Input Icons
========================================================= */

/*
 * 外部アイコンライブラリは使わず、
 * CSSのSVGデータを使用しています。
 *
 * そのため、
 * - CDN不要
 * - JavaScript不要
 * - CSPにも合わせやすい
 * というメリットがあります。
 */

input[type="text"],
input[type="tel"],
input[type="number"],
select {
  width: 100%;

  min-height: 50px;

  padding: 12px 14px 12px 46px;

  border: 1px solid #cbd9e8;

  border-radius: 10px;

  background-color: #fbfdff;

  color: #183153;

  font-size: 1rem;

  line-height: 1.5;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


/* 氏名 */
#name {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237890aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.2 3.6-7 8-7s8 2.8 8 7'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: 14px center;
}


/* カナ */
#kana {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237890aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M5 12h9M5 17h14'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: 14px center;
}


/* 郵便番号 */
#postal_code {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237890aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: 14px center;
}


/* 住所 */
#address {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237890aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: 14px center;
}


/* 電話 */
#phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237890aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5 9 3l2 5-2 1.8a14 14 0 0 0 5.2 5.2L16 13l5 2v2.5c0 1.1-.9 2-2 2C10.7 19.5 4.5 13.3 4.5 5.5c0-1.1.9-2 2-2Z'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: 14px center;
}


/* 個数 */
#quantity {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237890aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: 14px center;
}


/* 商品選択 */
#product_id {
  padding-left: 46px;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #7890aa 50%
    ),
    linear-gradient(
      135deg,
      #7890aa 50%,
      transparent 50%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237890aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 11H7L6 8Z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    14px center;

  background-size:
    6px 6px,
    6px 6px,
    20px 20px;

  appearance: none;
}


/* Placeholder */
input::placeholder {
  color: #a5b5c7;
}

input:hover,
select:hover {
  border-color: #9eb5ce;
}

input:focus,
select:focus {
  outline: none;

  border-color: #3b82f6;

  background-color: #fff;

  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.10);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: #e05252;

  background-color: #fff8f8;

  box-shadow:
    0 0 0 3px rgba(224, 82, 82, 0.06);
}


/* =========================================================
   Helper / Error
========================================================= */

.hint {
  margin: 7px 0 0;

  color: #7890aa;

  font-size: 0.82rem;
}

.error {
  margin: 7px 0 0;

  color: #c43d3d;

  font-size: 0.85rem;

  font-weight: 700;
}

.error::before {
  content: "⚠ ";
}


/* =========================================================
   Banner
========================================================= */

.banner {
  margin-bottom: 18px;

  padding: 14px 16px;

  background: #fff6f6;

  border: 1px solid #f0b8b8;

  border-radius: 12px;

  color: #9f3030;

  font-size: 0.9rem;

  box-shadow:
    0 4px 12px rgba(190, 50, 50, 0.04);
}


/* =========================================================
   Summary
========================================================= */

.summary,
.amount {
  margin: 0 0 18px;

  padding: 6px 20px;

  background: #fff;

  border: 1px solid #e0e9f3;

  border-radius: 14px;

  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.035);
}

.summary div,
.amount div {
  display: flex;

  align-items: center;

  padding: 13px 0;

  border-bottom: 1px solid #edf2f7;
}

.summary div:last-child,
.amount div:last-child {
  border-bottom: none;
}

dt {
  width: 38%;

  flex-shrink: 0;

  color: #7890aa;

  font-size: 0.88rem;
}

dd {
  flex: 1;

  margin: 0;

  color: #263f5e;

  font-weight: 500;

  word-break: break-all;
}


/* =========================================================
   Amount
========================================================= */

.amount {
  border-color: #c9def5;

  background:
    linear-gradient(
      135deg,
      #f7fbff,
      #eef7ff
    );
}

.amount .total {
  font-size: 1.25rem;

  font-weight: 800;

  color: #1769d1;
}

.amount .total dt {
  color: #54718f;

  font-size: 0.92rem;

  font-weight: 600;
}


/* =========================================================
   Buttons
========================================================= */

.actions {
  margin-top: 24px;
}

.actions.two {
  display: flex;
  gap: 14px;
}

.actions.two .btn {
  flex: 1;
}

.actions.two .btn + .btn {
  margin-left: 0;
}

.btn {
  display: block;

  width: 100%;

  min-height: 54px;

  padding: 13px 20px;

  border: 2px solid #1769d1;

  border-radius: 11px;

  cursor: pointer;

  font-family: inherit;

  font-size: 1rem;

  font-weight: 700;

  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.btn:hover:not([disabled]) {
  transform: translateY(-1px);
}

.btn:active:not([disabled]) {
  transform: translateY(1px);
}

.btn.primary {
  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      #3188e8,
      #1769d1
    );

  color: #fff;

  box-shadow:
    0 8px 18px rgba(37, 99, 235, 0.22);
}

.btn.primary:hover:not([disabled]) {
  box-shadow:
    0 11px 24px rgba(37, 99, 235, 0.28);
}

.btn.secondary {
  background: #fff;

  color: #1769d1;
}

.btn.secondary:hover:not([disabled]) {
  background: #f5f9ff;

  border-color: #3188e8;
}

.btn[disabled] {
  opacity: 0.5;

  cursor: not-allowed;

  box-shadow: none;
}

.btn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);

  outline-offset: 3px;
}


/* =========================================================
   Completion
========================================================= */

.done-box {
  margin: 18px 0 20px;

  padding: 28px 20px;

  background:
    linear-gradient(
      135deg,
      #f6fffa,
      #ffffff
    );

  border: 1px solid #a9dfbd;

  border-radius: 16px;

  text-align: center;

  box-shadow:
    0 8px 24px rgba(46, 125, 50, 0.06);
}

.done-box::before {
  content: "✓";

  display: flex;

  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin: 0 auto 14px;

  border-radius: 50%;

  background: #2e9b57;

  color: #fff;

  font-size: 1.4rem;

  font-weight: 800;

  box-shadow:
    0 6px 14px rgba(46, 155, 87, 0.2);

  animation: donePop 0.5s ease-out;
}

@keyframes donePop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

.done-label {
  margin: 0;

  color: #6b8274;

  font-size: 0.88rem;
}

.done-no {
  margin: 3px 0 14px;

  color: #176b3a;

  font-size: 1.7rem;

  font-weight: 800;

  letter-spacing: 0.05em;

  word-break: break-all;
}

.done-total {
  margin: 2px 0 0;

  color: #183153;

  font-size: 1.25rem;

  font-weight: 800;
}


/* =========================================================
   Accessibility
========================================================= */

input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.28);

  outline-offset: 2px;
}


/* =========================================================
   Hidden
========================================================= */

[hidden] {
  display: none !important;
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 600px) {

  .site-header {
    padding: 16px;
  }

  .header-inner {
    align-items: flex-start;
  }

  .header-caption {
    display: none;
  }

  .site-title {
    font-size: 1rem;
  }

  .container {
    width: calc(100% - 20px);

    margin-top: 16px;

    padding: 24px 18px 30px;

    border-radius: 16px;
  }

  .steps {
    margin-bottom: 28px;
  }

  .steps li {
    font-size: 0.75rem;

    padding-bottom: 11px;
  }

  .steps li::after {
    top: 14px;
  }

  .steps .num {
    width: 29px;
    height: 29px;

    margin-right: 3px;

    font-size: 0.78rem;

    box-shadow:
      0 0 0 4px #fff;
  }

  .steps li.current .num,
  .steps li.past .num {
    box-shadow:
      0 0 0 4px #fff;
  }

  h1 {
    font-size: 1.45rem;
  }

  .lead {
    font-size: 0.88rem;

    margin-bottom: 22px;
  }

  .field {
    padding: 16px;

    margin-bottom: 12px;
  }

  .summary,
  .amount {
    padding-left: 16px;
    padding-right: 16px;
  }

  dt {
    width: 42%;
  }

  .actions.two {
    display: block;
  }

  .actions.two .btn + .btn {
    margin-top: 10px;
  }
}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 420px) {

  .container {
    width: calc(100% - 12px);

    padding: 22px 14px 26px;
  }

  .steps li {
    font-size: 0.7rem;
  }

  .steps .num {
    display: flex;

    margin: 0 auto 4px;
  }

  .field {
    padding: 14px;
  }

  input[type="text"],
  input[type="tel"],
  input[type="number"],
  select {
    min-height: 48px;

    padding-left: 44px;
  }

  dt {
    width: 44%;
  }

  .done-box {
    padding: 24px 14px;
  }
}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}