/* setup */
:is(input:is(:not([type="checkbox"], [type="radio"])), button, select, textarea) {
  padding: .5em 1em;
  font: inherit;
  border: 1px solid;
  border-radius: 2px;
}

:is(input:is(:not([type="checkbox"], [type="radio"])), select, textarea):is(:hover, :focus-visible) {
  outline-width: thick;
  background-color: #f0f6ff;
}

form :is(textarea) {
  field-sizing: content;
  resize: vertical;
  flex: 1;
  min-block-size: 5lh;
}

form :is(textarea[readonly]) {
  resize: none;
}

form :is(textarea[readonly]):is(:hover, :focus-visible) {
  background-color: #fff;
}

form :is(label):not(.radio-wrapper label) {
  font-weight: 700;
}

form :is(select) {
  block-size: 38.4px;
  padding-inline-start: calc(1em - 4px);
  background-color: #fff0;
  appearance: none;
}

form :is(button) {
  cursor: pointer;
}

/* common */
.telephone_box a {
  text-decoration: underline;
}

.telephone_box .req {
  font-weight: 700;
  color: #b12626;
}

.telephone_box .row {
  display: grid;
  gap: 1em 2em;
}

.telephone_box .row .max {
  grid-column: span 12;
}

.telephone_box .cel {
  display: grid;
  grid-column: span var(--span, 6);
  align-items: center;
  column-gap: .5em;
  min-inline-size: 0;
}

.telephone_box .emphasis {
  color: #2e69bc;
  font-weight: 700;
  font-size: 120%;
}

.telephone_box .cel input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* layout */
.telephone_box {
  display: grid;
  row-gap: 2em;
  inline-size: min(100%, 864px);
  margin-inline: auto;
  margin-block-start: 2em;
}

/* setup navigation */
.step-navi {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  column-gap: 4em;
}

.step-navi > li {
  position: relative;
  display: grid;
  justify-items: center;
}

.step-navi > li ~ li::before {
  position: absolute;
  inset-inline: -2.25em;
  inset-block: 0;
  display: grid;
  align-items: center;
  content: "▶︎";
}

.step-navi > li.current > span {
  font-weight: 700;
  color: #26b17c;
}

/* form */
.order-form {
  display: grid;
  row-gap: 1em;
}

.order-form_heading ~ .order-form_heading {
  margin-block-start: 2em;
}

.address_box {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: .5em;
  inline-size: 100%;
}

.postcode_box {
  position: relative;
  display: flex;
  align-items: center;
}

.postcode_box > span {
  position: absolute;
  inset-block: 0 -2px;
  display: grid;
  place-items: center;
  padding-inline: .5em .25em;
}

.postcode_box > input {
  padding-inline-start: 1.75em;
}

.postcode_box + select {
  padding-inline-start: calc(1em - 4px);
}

.payment_annotation {
  margin-block-start: .5em;
  font-size: 80%;
}

.radio-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em 1em;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  column-gap: .5em;
}

.radio-wrapper_item {
  display: flex;
  align-items: center;
  column-gap: .5em;
}

.radio-wrapper_item input[type="radio"] {
  flex-shrink: 0;
}

.tax_box {
  display: grid;
  grid-template-columns: auto max-content;
  align-items: end;
  column-gap: .5em;
}

.total_price {
  block-size: 1lh;
  padding: .5em 1em;
  border-bottom: 1px solid;
  background-color: #eee;
}

.terms-wrapper {
  display: grid;
  justify-content: center;
  margin-block-start: 1.5em;
}

.submit-btns {
  margin-inline: auto;
}

.btn.btn-primary {
  font-weight: 700;
  color: #fff;
  border-color: #3f3f3f;
  background-color: #2982ff;
  transition: background-color .25s;
}

@media (any-hover: hover) {
  .btn.btn-primary:is(:hover, :focus-visible) {
    background-color: #0066f5;
  }
}

@media (max-width: 768px) {
  .mainarea {
    padding: 5vw 4vw 10vw;
  }

  .mainarea h2 {
    font-size: 24px;
  }

  .step-navi {
    column-gap: 3em;
    font-size: 12px;
  }

  .step-navi > li ~ li::before {
    inset-inline: -2em;
  }

  .postcode_box {
    grid-column: span 4;
  }

  :is([name="pref"], [name="delivery_pref"], [name="bill_pref"]) {
    grid-column: span 8;
  }

  :is([name="city"], [name="delivery_city"], [name="bill_city"]) {
    grid-row: 2;
    grid-column: span 4;
  }

  :is([name="address"], [name="delivery_address"], [name="bill_address"]) {
    grid-row: 2;
    grid-column: span 8;
  }

  :is([name="building"], [name="delivery_building"], [name="bill_building"]) {
    grid-row: 3;
    grid-column: span 12;
  }

  .btn.btn-primary {
    inline-size: 100%;
  }
}

@media (min-width: 769px) {
  form :is(label) {
    flex-shrink: 0;
  }

  .telephone_box .row {
    grid-template-columns: repeat(12, 1fr);
  }

  .postcode_box {
    grid-column: span 2;
  }

  :is([name="pref"], [name="delivery_pref"], [name="bill_pref"]) {
    grid-column: span 4;
  }

  :is([name="city"], [name="delivery_city"], [name="bill_city"]) {
    grid-row: 2;
    grid-column: span 2;
  }

  :is([name="address"], [name="delivery_address"], [name="bill_address"]) {
    grid-row: 2;
    grid-column: span 4;
  }

  :is([name="building"], [name="delivery_building"], [name="bill_building"]) {
    grid-row: 2;
    grid-column: span 6;
  }

  .radio-wrapper {
    display: flex;
  }
}

/* confirm
-------------------------------------------------------------------------------- */
.cel--confirm .term {
  font-weight: 700;
}

.cel--confirm .desc {
  min-inline-size: 0;
  border-block-end: 1px solid;
  background-color: #fafafa;
}

.cel--confirm .desc:not(.\--wrapper) {
  min-block-size: 1lh;
  padding: .5em 1em;
}

.cel--confirm .desc.\--wrapper {
  display: grid;
}

.cel--confirm .desc.\--wrapper textarea {
  min-block-size: 1lh;
  border: none;
  background-color: #fff0;
}

@media (max-width: 768px) {
  .telephone_box .cel.cel--confirm {
    grid-column: auto;
  }

  .submit-btns--confirm {
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: 1em;
    margin-block-start: 1em;
  }
}

@media (min-width: 769px) {
  .submit-btns--confirm {
    margin-block-start: 2em;
  }
}

/* complete
-------------------------------------------------------------------------------- */
.contents-body {
  display: grid;
  justify-content: center;
}

.contents-body .emphasis {
  margin-block-end: 1em;
  text-align: center;
}

.contents-body address {
  margin-block-start: 2em;
}