@charset "UTF-8";
/*--------------------------------------------------
PREDGE ショップ情報ページ（about / privacy / law / contact）
--------------------------------------------------*/

.predge-info {
  width: 100%;
  padding: 100px 0 120px;
  box-sizing: border-box;
  background: #fff;
  color: #525263;
  min-height: 40vh;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
}

/* PC: 左右余白をデザイン寄り（約18%）に */
.predge-info__inner {
  width: min(1000px, 64%);
  margin: 0 auto;
}

.predge-info__inner--text {
  width: min(900px, 64%);
}

/* PREDGE（テキスト） + ページ名 */
.predge-info__head {
  margin: 0 0 40px;
}

.predge-info__brand {
  margin: 0 0 28px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.2;
  color: #525263;
  text-align: center;
}

.predge-info__title {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #d0d0d0;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #525263;
  line-height: 1.4;
}

/* h1下コンテンツ：PCで左右40px・16px */
.predge-info__inner > :not(.predge-info__head) {
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
  font-size: 16px;
}

/* Definition list (about / law) */
.predge-def-list {
  margin: 0;
  padding: 0;
}

.predge-def-list__row {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 16px 40px;
  margin: 0;
  padding: 28px 0;
  border-bottom: 1px dotted #b8b8b8;
  align-items: start;
}

.predge-def-list__row:first-child {
  border-top: 1px dotted #b8b8b8;
}

.predge-def-list__row dt {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #525263;
  letter-spacing: 0.04em;
}

.predge-def-list__row dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #525263;
}

.predge-def-list__row dd a {
  color: #525263;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.predge-def-list__row--block {
  align-items: flex-start;
}

.predge-def-list__row--block dd p {
  margin: 0 0 12px;
}

.predge-def-list__row--block dd p:last-child {
  margin-bottom: 0;
}

.predge-def-list__mark {
  margin-right: 0.2em;
}

.predge-def-list__note {
  margin-top: 12px !important;
  font-size: 16px;
  font-weight: 400;
  color: #525263;
  line-height: 1.9;
}

/* Shipping table */
.predge-ship-table {
  width: 100%;
  max-width: 480px;
  margin: 12px 0 0;
  border-collapse: collapse;
  border: 1px solid #999;
}

.predge-ship-table th,
.predge-ship-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #ccc;
  vertical-align: top;
  font-weight: 400;
  text-align: left;
}

.predge-ship-table tr:last-child th,
.predge-ship-table tr:last-child td {
  border-bottom: 0;
}

.predge-ship-table th {
  width: 72%;
}

.predge-ship-table td {
  width: 28%;
  text-align: right;
  white-space: nowrap;
  font-size: 16px;
  color: #525263;
}

.predge-ship-table__region {
  display: block;
  font-size: 16px;
  color: #525263;
  margin-bottom: 2px;
}

.predge-ship-table__prefs {
  display: block;
  font-size: 11px;
  color: #888;
  line-height: 1.5;
}

/* Privacy policy text */
.predge-policy {
  font-size: 16px;
  line-height: 2.05;
  color: #525263;
}

.predge-policy p {
  margin: 0 0 20px;
}

.predge-policy__section {
  margin: 0 0 36px;
}

.predge-policy__section h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 500;
  color: #3a3a48;
  letter-spacing: 0.02em;
}

.predge-policy ol {
  margin: 0 0 16px 1.4em;
  padding: 0;
}

.predge-policy ol li {
  margin: 0 0 4px;
}

.predge-policy__alpha {
  list-style-type: lower-alpha;
}

.predge-policy__contact {
  margin-top: 16px !important;
}

/* Contact */
.predge-contact__lead {
  margin: 0 0 36px;
  font-size: 16px;
  line-height: 2;
  color: #666;
}

.predge-contact__errors {
  margin: 0 0 24px;
  padding: 12px 14px;
  list-style: disc;
  list-style-position: inside;
  background: #fff5f4;
  border: 1px solid #f0c2bd;
  color: #b33;
  font-size: 13px;
}

.predge-contact-form__row {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 16px 40px;
  padding: 28px 0;
  border-bottom: 1px dashed #c8c8c8;
  align-items: start;
}

.predge-contact-form__row:first-of-type {
  border-top: 1px dashed #c8c8c8;
}

.predge-contact-form__label {
  font-size: 16px;
  font-weight: 500;
  color: #525263;
  padding-top: 10px;
  line-height: 1.5;
}

.predge-contact-form__req {
  display: inline-block;
  margin-left: 8px;
  color: #e0685c;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: middle;
  background: none;
  padding: 0;
}

.predge-contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.predge-contact-form__fields--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.predge-contact-form__fields--tel {
  max-width: 320px;
}

.predge-contact-form input[type="text"],
.predge-contact-form input[type="email"],
.predge-contact-form input[type="tel"],
.predge-contact-form select,
.predge-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  background: #fff;
  color: #525263;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
}

.predge-contact-form input::placeholder,
.predge-contact-form textarea::placeholder {
  color: #b0b0b0;
}

.predge-contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.predge-contact-form__note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #525263;
}

/* 住所欄 */
.predge-contact-form__fields--address {
  gap: 10px;
}

.predge-contact-form__zip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.predge-contact-form__zip-mark {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 400;
  color: #525263;
  line-height: 1;
}

.predge-contact-form__zip-input {
  width: 160px !important;
  max-width: 100%;
}

.predge-contact-form__zip-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4a90d9;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.predge-contact-form__zip-search:hover {
  text-decoration: underline;
}

.predge-contact-form__zip-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #555;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: inherit;
}

.predge-contact-form__pref {
  width: 240px !important;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.2 1.2L6 6l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
  cursor: pointer;
}

.predge-contact-form__addr-line {
  width: 100%;
}

.predge-contact-form__actions {
  margin-top: 56px;
  text-align: center;
}

.predge-contact-form__actions--confirm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.predge-contact-form__submit,
.predge-contact-form__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  max-width: 100%;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 4px;
  background: #e0685c;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: inherit;
}

.predge-contact-form__back {
  background: #888;
}

.predge-contact-form__submit:hover,
.predge-contact-form__back:hover {
  opacity: 0.9;
}

.predge-contact-confirm__list {
  margin: 0 0 36px;
  padding: 0;
}

.predge-contact-confirm__row {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 16px 40px;
  padding: 24px 0;
  border-bottom: 1px dashed #c8c8c8;
}

.predge-contact-confirm__row:first-child {
  border-top: 1px dashed #c8c8c8;
}

.predge-contact-confirm__row dt {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #525263;
}

.predge-contact-confirm__row dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #525263;
  word-break: break-word;
}

.predge-contact__complete {
  padding: 24px 0 40px;
  font-size: 16px;
  line-height: 2;
  color: #525263;
}

.predge-contact__back {
  margin-top: 36px;
}

.predge-contact__back a {
  color: #004098;
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .predge-info__inner,
  .predge-info__inner--text {
    width: min(920px, 84%);
  }
}

@media (max-width: 767px) {
  .predge-info {
    padding: 40px 0 72px;
  }

  .predge-info__inner,
  .predge-info__inner--text {
    width: auto;
    margin: 0 20px;
  }

  .predge-info__inner > :not(.predge-info__head) {
    padding-left: 0;
    padding-right: 0;
  }

  .predge-info__head {
    margin-bottom: 28px;
  }

  .predge-info__brand {
    margin-bottom: 20px;
    font-size: 28px;
  }

  .predge-info__title {
    font-size: 24px;
    padding-bottom: 12px;
  }

  .predge-def-list__row,
  .predge-contact-form__row,
  .predge-contact-confirm__row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }

  .predge-def-list__row dt,
  .predge-contact-form__label,
  .predge-contact-confirm__row dt {
    padding-top: 0;
  }

  .predge-contact-form__fields--split {
    grid-template-columns: 1fr 1fr;
  }

  .predge-contact-form__fields--tel {
    max-width: none;
  }

  .predge-contact-form__zip-input {
    width: 140px !important;
  }

  .predge-contact-form__pref {
    width: 100% !important;
  }

  .predge-contact-form__submit,
  .predge-contact-form__back {
    min-width: 0;
    width: 100%;
  }

  .predge-contact-form__actions {
    margin-top: 40px;
  }

  .predge-ship-table th,
  .predge-ship-table td {
    padding: 12px;
  }

  .predge-policy {
    font-size: 14px;
  }

  .predge-contact__lead {
    font-size: 14px;
    margin-bottom: 28px;
  }
}