@charset "UTF-8";
    :root{
      --brand: #000;   /*  */
      --ink: #222;        /* 文字色 */
      --muted: #6b7280;   /* 補助文字 */
      --card: #f4f4f5;    /* カードの背景 */
      --line: #d6d6d6;    /* 枠線/仕切り */
      --btn: #2f2f2f;     /* ボタン色 */
      --btn-ink: #fff;
      --focus: #2563eb;   /* フォーカスリング */
      --maxw: 980px;      /* レイアウト幅 */
      --radius: 12px;
    }

    /* Reset（軽め） */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
                   "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, "メイリオ", sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.6;
    }
    img{ max-width: 100%; height: auto; }

    /* ヘッダー（右上の「ようこそ ゲスト 様」） */
    .topbar{
      width: 100%;
      background: #0b0b0b;
      color: #fff;
      font-size: 14px;
    }
    .topbar-inner{
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 8px 16px;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .topbar-inner a {
      color: #fff;
    }

    .logo{
      max-width: var(--maxw);
      margin: 28px auto 0px;
      text-align: center;
    }

    .logo img{
      max-width: clamp(150px, 36.0vw, 305px);
    }

    /* ページタイトル */
    .page-title{
      margin: 10px auto 0px;
      padding: 0 16px 16px;
      text-align: center;
      font-weight: 700;
      font-size: clamp(22px, 3.2vw, 34px);
      color: var(--brand);
      border-bottom: 2px solid #D5BA75;

    }

    /* カード */
    .card{
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 24px 16px 30px;
    }
    .card-inner{
      background: var(--card);
      border-radius: var(--radius);
      padding: clamp(18px, 4vw, 40px);
    }

/* タイトル帯 */
.group-title{
  display:block;               /* div 以外でも使えるように */
  width:100%;
  box-sizing:border-box;
  border-left:5px solid #4caf50;/* 左端の緑バー（ボーダー） */
  padding:3px 12px 3px 10px;   /* 文字とバーの間隔を少し広めに */
  font-weight:700;             /* 太字 */
  line-height:1.4;
  color:#111;
  margin:0 0 16px;             /* セクションとの間隔 */
}

    /* フォーム */
    form{}
    .field{
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-bottom: 25px;
    }
    .label{
      font-weight: 700;
      letter-spacing: .02em;
    }
    .control{
      position: relative;
    }
    input[type="text"],
    input[type="email"],
    input[type="password"]{
      width: 100%;
      padding: 14px 16px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff; 
      outline: none;
      font-size: 16px;
    }
    input:focus{
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
      border-color: var(--focus);
      background: #fff;
    }

    /* チェックボックス行 */
		.remember,
		.consent{
		  display: flex;
		  align-items: center;
		  gap: 10px;
		  margin: 2px 0 30px;
		  width: 100%;            /* 行幅をフォームいっぱいに */
		  justify-content: center;/* 中央寄せ */
		}
		.remember input{ width: 18px; height: 18px; }
		.consent{
			text-align: center;
			line-height: 2.2;
		}

		.badge {
		  display: inline-block;
		  margin-left: 5px;          /* 前の文字との間隔 */
		  padding: 2px 5px;          /* 上下左右の余白 */
		  background-color: #c00;    /* 赤背景 */
		  color: #fff;               /* 白文字 */
		  font-size: 0.7em;          /* 少し小さめの文字 */
		  font-weight: bold;         /* 太字 */
		  border-radius: 4px;        /* 角を丸める */
		  line-height: 1.2;
		  vertical-align: middle;    /* テキストと高さを揃える */
		}

    /* ボタン */
    .actions{
      display: flex;
      gap: 12px;
      justify-content: center;
    }
    .btn{
      appearance: none;
      border: none;
      background: var(--btn);
      color: var(--btn-ink);
      font-weight: 700;
      border-radius: 10px;
      padding: 14px 40px;
      font-size: 16px;
      cursor: pointer;
      transition: transform .02s ease, filter .15s ease;
			width: 300px;
    }
    .btn:active{ transform: translateY(1px); }
    .btn:hover{ filter: brightness(1.05); }
    .btn:focus-visible{
      outline: 3px solid color-mix(in srgb, var(--focus) 60%, transparent);
      outline-offset: 3px;
    }
    /* ボタン内の矢印（●→） */
    .btn .arrow{
      display: inline-block;
      margin-left: .6em;
      width: 1.1em; height: 1.1em;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
      position: relative;
      vertical-align: -2px;
    }
		.btn .arrow::before{
		  content: "";
		  position: absolute;
		  inset: 0;
		  margin: auto;
		  width: .45em; 
		  height: .45em;
		  border-right: 2px solid #fff;
		  border-bottom: 2px solid #fff;
		  transform: rotate(-45deg);
		}

		.back {
      text-align: center;
      margin-bottom: 50px;

    }

    /* お問合せ */
    .contact{
		  width: 100%; 
      background: var(--card);
      margin-top: 60px;
    }
    .contact h2{
      padding: 26px 26px 0px;
      max-width: var(--maxw);
      margin: 0px auto 10px;
      font-size: 18px;
    }
    .contact .box{
      padding: 0px 26px 30px;
      max-width: var(--maxw);
      margin: 0px auto 0px;
      font-size: 15px;
      color: var(--ink);
      line-height: 1.5;
    }
    .contact .muted{ color: var(--muted); }



    /* フッター */
    footer{
      border-top: 1px solid #111;
      color: #ddd;
      background: #0b0b0b;
      font-size: 12px;
      text-align: center;
      padding: 16px;
    }

    /* ラベルを左、入力を右に寄せる（横並び）: 幅が広いときのみ */
    @media (min-width: 720px){
      .field{
        grid-template-columns: 180px 1fr;
        align-items: center;
        gap: 14px 20px;
      }
    }


div.text {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 0 16px;

}

/* リード文（説明） */
.lead{
  color: #2f2f2f;
  line-height: 1.7;
}

.flow{
  margin: 30px auto 0;
  padding: 0 16px;
  text-align: center;
}

h2.text{
  margin: 30px auto 15px;
  line-height: 1.7;
  font-size: 18px;
  border-bottom: 1px solid #6b7280;
}

p.text{
  margin: 0px auto 10px;
}

ul{
  max-width: var(--maxw);
  margin: 0px auto 40px;
  padding: 0 16px 0 40px;
}


#post-form-title{
background-color:#D5BA75;
  padding: 10px 15px;
  font-size: 18px;
  margin: 0px 0px 20px 0px;
  border-radius: var(--radius);


}

/* ===== ボタン群 ===== */
.menu {
  max-width: var(--maxw);
  margin: 0 auto;
}

.menu .bot {
  margin: 0 0 16px;
}

/* 実ボタン */
.menu .bot > a {
  position: relative;
  display: block;
  width: clamp(300px, 40vw, 500px);
  margin: 0px auto;
  box-sizing: border-box;
  padding: 18px 64px 18px;           /* 右にアイコンぶん余白 */
  border-radius: var(--radius);
  background: var(--btn);            /* 例: #2f2f2f（黒系） */
  color: var(--btn-ink);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .04em;

  /* 見た目 */
  box-shadow: 0 1px 0 rgba(0,0,0,.35) inset;
  transition: background-color .18s ease, box-shadow .18s ease,
              transform .06s ease, color .18s ease;
}

/* 右の丸背景 */
.menu .bot > a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #3b3b3b;               /* グレーの丸 */
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: background-color .18s ease, transform .18s ease;
}

/* 右の ＞（矢印） */
.menu .bot > a::before{
  content: "＞";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  z-index: 1;                         /* 丸の上に表示 */
  pointer-events: none;
  transition: transform .18s ease;
}

/* ====== ホバー／フォーカス ====== */
.menu .bot > a:hover{
  background: #111;                   /* やや明るく（黒に近い） */
  box-shadow:
    0 6px 16px rgba(0,0,0,.35),       /* ふわっと浮く影 */
    0 1px 0 rgba(255,255,255,.06) inset;
}

.menu .bot > a:hover::after{
  background: #555;                   /* 丸も少し明るく */
  transform: translate(4px, -50%);    /* 右へスライド */
}

.menu .bot > a:hover::before{
  transform: translate(4px, -50%);    /* 文字も追随 */
}

/* クリック時の押し込み感 */
.menu .bot > a:active{
  transform: translateY(1px);
}

/* キーボード操作の見やすいフォーカス */
.menu .bot > a:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* 角丸や余白など微調整（狭い画面） */
@media (max-width: 520px){
  .menu .bot > a{
    padding: 16px 56px 16px;
    border-radius: 10px;
  }
  .menu .bot > a::before,
  .menu .bot > a::after{
    right: 12px;
    width: 28px; height: 28px;
  }
}

/* 動きを抑えたい利用者配慮 */
@media (prefers-reduced-motion: reduce){
  .menu .bot > a,
  .menu .bot > a::before,
  .menu .bot > a::after{
    transition: none;
  }
}

input[type="checkbox"] {
  width: 13px;      /* 横幅 */
  height: 13px;     /* 縦幅 */
  transform: scale(1.5); /* 大きさを1.5倍に拡大 */
  margin-right: 5px; /* ラベルとの間隔調整 */
}