@charset "UTF-8";

/* ========================================
   CONTACT PAGE
   株式会社adtown
======================================== */

    /* 必須マークは必須項目だけに表示 */
    .form-row label::after {
      content: none;
    }

    .form-row label.required::after {
      content: " *";
      color: var(--accent);
    }
    /* プライバシーポリシー同意 */
    .privacy-agreement {
      margin-top: 30px;
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 30px;
    }

    .privacy-agreement .form-label-space {
      width: 100%;
    }

    .privacy-field {
      width: 100%;
    }

    .privacy-label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      margin: 0;
    }

    .privacy-label::after {
      content: none !important;
    }

    .privacy-label input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin: 0;
      flex: 0 0 auto;
      accent-color: var(--accent);
    }

    .privacy-label span {
      line-height: 1.8;
    }

    .privacy-label a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .privacy-label a:hover {
      opacity: 0.75;
    }

    .required-mark {
      color: var(--accent);
    }

    @media (max-width: 800px) {
      .privacy-agreement {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .privacy-agreement .form-label-space {
        display: none;
      }
    }

    /* ==================================================
       ご相談・お問い合わせ例
    ================================================== */

    .contact-examples {
      position: relative;
      margin: 0 0 58px;
      padding: 42px 42px 40px;
      background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,250,.92));
      border: 1px solid rgba(242,17,99,.14);
      box-shadow: 0 18px 50px rgba(30,20,25,.06), inset 0 0 0 1px rgba(255,255,255,.7);
      overflow: hidden;
    }

    .contact-examples::before {
      content: "";
      position: absolute;
      top: -80px;
      right: -60px;
      width: 190px;
      height: 190px;
      border: 1px solid rgba(242,17,99,.12);
      border-radius: 50%;
      pointer-events: none;
    }

    .contact-examples::after {
      content: "";
      position: absolute;
      top: 24px;
      right: 34px;
      width: 7px;
      height: 7px;
      background: #F21163;
      border-radius: 50%;
      box-shadow: 18px 18px 0 rgba(242,17,99,.22), -14px 30px 0 rgba(36,119,119,.20);
      pointer-events: none;
    }

    .contact-examples-head {
      position: relative;
      z-index: 1;
      margin-bottom: 28px;
    }

    .contact-examples-label {
      margin: 0 0 8px;
      color: #F21163;
      font-family: Inter, sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
    }

    .contact-examples-title {
      margin: 0;
      color: var(--ink);
      font-size: 24px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .contact-examples-lead {
      margin: 10px 0 0;
      color: #666;
      font-size: 13px;
      line-height: 1.9;
    }

    .contact-examples-list {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .contact-example-item {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 62px;
      padding: 14px 48px 14px 18px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(20,33,33,.08);
      transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
    }

    .contact-example-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: #F21163;
      transform: scaleY(0);
      transform-origin: center;
      transition: transform .35s ease;
    }

    .contact-example-item::after {
      content: "→";
      position: absolute;
      right: 17px;
      color: #F21163;
      font-family: Arial, sans-serif;
      font-size: 16px;
      font-weight: 300;
      transition: transform .35s ease;
    }

    .contact-example-item:hover {
      transform: translateY(-3px);
      background: #fff;
      border-color: rgba(242,17,99,.22);
      box-shadow: 0 12px 28px rgba(30,20,25,.08);
    }

    .contact-example-item:hover::before {
      transform: scaleY(1);
    }

    .contact-example-item:hover::after {
      transform: translateX(4px);
    }

    .contact-example-number {
      flex: 0 0 28px;
      margin-right: 10px;
      color: rgba(242,17,99,.55);
      font-family: Inter, sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
    }

    .contact-example-text {
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.7;
    }

    @media (max-width: 800px) {
      .contact-examples {
        margin-bottom: 42px;
        padding: 30px 22px 26px;
      }

      .contact-examples-title {
        font-size: 20px;
      }

      .contact-examples-list {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .contact-example-item {
        min-height: 56px;
        padding: 12px 42px 12px 14px;
      }
    }

    /* 入力エラーポップ */
    .form-error-popup {
      position: fixed;
      z-index: 9999;
      padding: 9px 14px;
      background: var(--accent);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
      border-radius: 5px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
      pointer-events: none;
      animation: errorPopupIn 0.2s ease-out;
    }

    .form-error-popup::after {
      content: "";
      position: absolute;
      left: 16px;
      bottom: -7px;
      border-width: 7px 7px 0;
      border-style: solid;
      border-color: var(--accent) transparent transparent;
    }

    .input-error {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 2px rgba(242, 17, 99, 0.12) !important;
    }

    @keyframes errorPopupIn {
      from {
        opacity: 0;
        transform: translateY(5px);
      }

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