@charset "utf-8";
/* CSS Document */

/* ------------------------------
   Minimal, Clean LP Base Styles
   ------------------------------ */

/* 色・余白・角丸などの基本変数 */
:root{
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-weak:#555555;
  --color-border:#e5e7eb;
  --color-muted:#f6f7f9;
  --color-primary:#1a469d;   /* お好みで変更OK */
  --color-accent:#ff6a3d;    /* 補助色：アクセント */
  --focus:#2b8cff;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(0,0,0,.06);
  --container: 1080px;

  --space-1: .25rem; /* 4px */
  --space-2: .5rem;  /* 8px */
  --space-3: .75rem; /* 12px */
  --space-4: 1rem;   /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem;   /* 32px */
  --space-7: 3rem;   /* 48px */
  --space-8: 4rem;   /* 64px */
}

/* ベースリセット（安全な範囲） */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
		border-top: 5px solid #0078c7;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--color-primary); text-decoration: none; }
a:hover{ opacity:.85; }
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* レイアウト */
.container{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
	padding-top: 2em;
}
h1 {
	max-width: 200px;
	margin: 0 auto 1em;
}
@media (min-width: 768px){
h1 {
	max-width: 400px;
}
}

.section{
  padding-block: var(--space-7);
}
.section--tight{ padding-block: var(--space-6); }
.section--muted{ background:var(--color-muted); }
.stack > * + *{ margin-top:var(--space-5); }

/* タイポグラフィ */
h2,h3{ line-height:1.3; margin:0 0 var(--space-4); font-weight:700; }
h1{ font-size: clamp(28px, 4vw, 40px); letter-spacing: .01em; }
h2{ font-size: clamp(22px, 3vw, 28px); }
h3{ font-size: clamp(18px, 2.5vw, 22px); }
p{ margin:0 0 var(--space-4); color:var(--color-text); }
.lead{ font-size: clamp(18px, 2.2vw, 20px); color:var(--color-text-weak); }

/* ヒーロー（任意で使える汎用） */
.hero{
  padding-block: var(--space-8);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.hero .hero__title{ margin-bottom: var(--space-3); }
.hero .hero__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding: .85em 1.2em;
  border-radius: var(--radius);
  border:1px solid transparent;
  background:#f3f4f6;
  color:#111;
  font-weight:600;
  text-align:center;
  transition: transform .02s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0); }
.btn--primary{
  background: var(--color-primary);
  color:#fff;
}
.btn--outline{
  background: transparent;
  border-color: var(--color-border);
}
.btn--accent{
  background: var(--color-accent);
  color:#fff;
}

/* カード/ボックス */
.card{
  background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}

/* グリッド（特徴や料金などに） */
.grid{
  display:grid; gap: var(--space-5);
}
@media (min-width: 720px){
  .grid--2{ grid-template-columns: 1fr 1fr; }
  .grid--3{ grid-template-columns: repeat(3, 1fr); }
}

/* テーブル（必要な場合） */
table{ width:100%; border-collapse: collapse; font-size: 0.95rem; }
th,td{ padding: .9rem; border-bottom:1px solid var(--color-border); text-align:left; }
thead th{ background: var(--color-muted); }

/* フォーム（CF7/WP共通） */
form, .wpcf7-form{ width:100%; }
.form-row{ display:grid; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (min-width: 640px){
  .form-row--2{ grid-template-columns: 1fr 1fr; }
}

label{ font-weight:600; display:block; margin-bottom: .35rem; }
.required::after{ content:" *"; color:var(--color-accent); font-weight:700; }

/* 入力類 */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], input[type="number"],
textarea, select{
  width:100%;
  padding: .85rem .9rem;
  border:1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background:#fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  font: inherit;
	margin-top: 8px;
}
textarea{ min-height: 160px; resize: vertical; }
input::placeholder, textarea::placeholder{ color:#9aa3af; }
input:focus, textarea:focus, select:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus) 18%, transparent);
}

/* チェックボックス/ラジオ（CF7） */
.wpcf7-list-item{ margin-right: 1em; }
.wpcf7-list-item label{ font-weight:400; display:inline-flex; align-items:center; gap:.5em; }

/* 送信ボタン（CF7） */
input[type="submit"], .wpcf7-submit{
  all: unset;
  display:block; align-items:center; justify-content:center;
  padding: .95em 5em;
	margin: 0 auto;
  border-radius: var(--radius);
  background: var(--color-primary);
  color:#fff; font-weight:700; cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .02s ease, box-shadow .2s ease, opacity .2s ease;
}
input[type="submit"]:hover, .wpcf7-submit:hover{ transform: translateY(-1px); }
input[type="submit"]:active, .wpcf7-submit:active{ transform: translateY(0); }

/* エラーメッセージ（CF7） */
.wpcf7-not-valid-tip{ color:#c62828; font-size:.85rem; margin-top:.25rem; }
.wpcf7-response-output{
  margin-top: var(--space-4);
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  border:1px solid var(--color-border);
  background:#fff;
}
.wpcf7 form.invalid .wpcf7-response-output{ border-color:#c62828; background:#fff5f5; }
.wpcf7 form.sent .wpcf7-response-output{ border-color:#16a34a; background:#f0fdf4; }

/* Gutenberg ブロックの素直な見た目調整 */
.wp-block-button .wp-block-button__link{
  border-radius: var(--radius);
  padding:.85em 1.2em;
  background: var(--color-primary);
}
.wp-block-quote{
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-4);
  color: var(--color-text-weak);
}
figure{ margin:0; }
figcaption{ color:#6b7280; font-size:.9rem; margin-top:.5rem; text-align:center; }

/* フッター（必要なら） */
.site-footer{
  border-top:1px solid var(--color-border);
  padding-block: var(--space-6);
  color: var(--color-text-weak);
  font-size:.95rem;
}

/* LP Clean テンプレートの余白 */
body.lp-clean #main{
  padding-block: var(--space-7);
}
body.lp-clean .container{}

/* ユーティリティ */
.center{ text-align:center; }
.mt-0{ margin-top:0!important; }
.mt-1{ margin-top:var(--space-1)!important; }
.mt-2{ margin-top:var(--space-2)!important; }
.mt-3{ margin-top:var(--space-3)!important; }
.mt-4{ margin-top:var(--space-4)!important; }
.mt-5{ margin-top:var(--space-5)!important; }
.mb-0{ margin-bottom:0!important; }
.mb-4{ margin-bottom:var(--space-4)!important; }
.hide{ display:none!important; }

:root{ --container: 800px; }

.container{
  width: min(100% - 2rem, var(--container)); /* 2remぶんは左右の余白 */
  margin-inline: auto;
}

/* ===== Footer (justfit_1plan) equivalent styles ===== */
:root{
  --container: 800px;
  --gutter: 16px;
  --border: #e5e7eb;
  --text-muted: #4b5563;
}

.l-sec{
  padding-block: 30px;
}
@media (min-width: 640px){
  .l-sec{ padding-block: 40px; }
}

.l-sec__inr{
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

/* Footer base */
.l-footer{
	color: #fff;
    background: #0078c7;
  font-size: 0.95rem;
	margin-top: 6em;
}

/* Footer inner layout */
.l-footer .l-sec__inr{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
@media (min-width: 768px){
  .l-footer .l-sec__inr{
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 32px;
  }
}

/* Footer nav */
.l-footer__nav{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
}
.l-footer__nav a{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.l-footer__nav a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .9;
}

/* Logo */
.l-footer a img{
  display: block;
  max-width: 220px;
  height: auto;
}

/* 微調整（必要なら） */
.l-footer a[rel~="noopener"]{ transition: opacity .2s ease; }
.l-footer a[rel~="noopener"]:hover{ opacity: .9; }

.text-danger {
	color: #F5373A;
	font-weight: bold;
}