:root{
      --sky:   #64B5F6;  /* 空色ブルー */
      --leaf:  #81C784;  /* 若草グリーン */
      --soil:  #A1887F;  /* 土ブラウン */
      --cream: #FFF8E1;  /* やわらかクリーム */
      --orange:#FFB74D;
      --text:  #333;
    }

    html,body{
      margin:0;
      font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
      background: var(--cream);
      color: var(--text);
      line-height:1.65;
      font-size : 1.2;
      font-weight : bold;
    }

    /* ヘッダ（簡易） */
    header{
      padding: 20px 16px;
      text-align:center;
    }
    header .logo{
      font-weight: 800;
      letter-spacing: .05em;
      margin : 0 0 1em 0;
    }
    header .back{
      display:inline-block;
      margin-top:8px;
      font-size:.95rem;
      text-decoration:none;
      color:#2c2c2c;
      background: #ffffffcc;
      border: 1px solid #00000014;
      padding: 6px 12px;
      border-radius: 999px;
      transition: transform .15s ease, box-shadow .15s ease, background .25s;
    }
    header .back:hover{
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(0,0,0,.12);
      background:#fff;
    }

    /* 詳細カード風のコンテナ */
    .contact-card{
      max-width: 880px;
      margin: 24px auto 48px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 10px 22px rgba(0,0,0,.12);
      border: 1px solid rgba(0,0,0,.08);
      padding: clamp(20px, 4vw, 40px);
      position: relative;
      overflow: hidden;
    }
    /* 上部アクセントライン（フッターと同色） */
    .contact-card::before{
      content:"";
      position:absolute;
      left:0; right:0; top:0;
      height:8px;
      background: var(--soil);
      border-radius: 12px 12px 0 0;
    }

    .contact-card h1{
      margin: 8px 0 4px;
      font-size: clamp(1.4rem, 2.4vw, 1.8rem);
      color:#5D4037;
    }
    .contact-card p.lead{
      margin-top: 0;
      color:#555;
    }

    /* フォーム */
    form{
      margin-top: 20px;
    }
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 720px){
      .grid{ grid-template-columns: 1fr; }
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .field label{
      font-weight:700;
      font-size:.95rem;
      color:#444;
    }
    .req{
      display:inline-block;
      margin-left:.4em;
      background: #FFE0B2;
      color:#9C6B2F;
      font-size:.75rem;
      padding: 2px 6px;
      border-radius: 6px;
      vertical-align: middle;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea{
      appearance:none;
      border:1px solid #0000001c;
      border-radius:10px;
      padding: 12px 14px;
      font-size:1rem;
      transition: border-color .15s ease, box-shadow .15s ease, background .2s;
      background:#fff;
    }
    textarea{ min-height: 160px; resize: vertical; }

    input:focus, select:focus, textarea:focus{
      outline:none;
      border-color: var(--leaf);
      box-shadow: 0 0 0 3px rgba(129,199,132,.25);
    }

    .helper{
      font-size:.85rem;
      color:#777;
      margin-top:-4px;
    }

    .checkbox{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-top: 6px;
      font-size:.95rem;
    }
    .checkbox input{
      margin-top:4px;
      transform: scale(1.1);
    }

    /* ボタン */
    .actions{
      margin-top: 18px;
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items:center;
      justify-content: center; 
    }
    .btn{
      appearance:none;
      border:none;
      border-radius: 999px;
      padding: 12px 22px;
      font-weight: 800;
      letter-spacing:.04em;
      cursor:pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
      color:#fff;
      background: linear-gradient(180deg, var(--leaf), #66b773);
      box-shadow: 0 8px 18px rgba(0,0,0,.15);
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0,0,0,.18); }
    .btn:disabled{
      opacity:.55;
      cursor:not-allowed;
      box-shadow:none;
    }
    .btn-secondary{
      background: linear-gradient(180deg, var(--sky), #4aa5ee);
      color:#fff;
      text-decoration: none;
    }

    /* ダミー送信後のメッセージ */
    .toast{
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(20px);
      background:#fff;
      border:1px solid #00000014;
      box-shadow:0 14px 28px rgba(0,0,0,.16);
      border-radius: 12px;
      padding: 12px 16px;
      opacity:0;
      pointer-events:none;
      transition: opacity .25s ease, transform .25s ease;
      z-index: 1000;
    }
    .toast.show{
      opacity:1;
      transform: translateX(-50%) translateY(0);
      pointer-events:auto;
    }

    /* フッター */
    footer{
      background: var(--soil);
      color:#fff;
      text-align:center;
      padding: 18px 12px;
      margin-top: 48px;
    }
    footer a{ color:#fff; text-decoration: underline; text-underline-offset: 2px; }

    /* 小さなデコ（うっすら円） */
    .decor{
      position:absolute; inset:0; pointer-events:none; z-index:0;
    }
    .bubble{
      position:absolute; border-radius:50%; opacity:.18; background: var(--leaf);
      filter: blur(1px);
    }
    .bubble.b1{ width:220px; height:220px; left:-80px; top:40px; }
    .bubble.b2{ width:160px; height:160px; right:-60px; top:120px; background: var(--sky); opacity:.17; }
    .bubble.b3{ width:260px; height:260px; left:50%; bottom:-140px; transform: translateX(-40%); background: var(--soil); opacity:.10; }