@charset "utf-8";
/* =========================================================
   CREETE — ページ内パーツ CSS
   ---------------------------------------------------------
   【1】WordPress標準ブロックの見た目
        → クライアントは「普通に」書くだけで整います。クラス不要。
   【2】ページ内パーツ（任意・LP用）
        → <div class="クラス名"> で囲むだけ。
          増やしたいときは既存のブロックを複製してください。
   ========================================================= */


/* =========================================================
   【1】WordPress標準ブロック（クラス指定なしで整う）
   ========================================================= */

/* 画像 */
.entry__body .wp-block-image{ margin:0 0 1.6em; }
.entry__body .wp-block-image img{ width:100%; height:auto; border-radius:12px; }
.entry__body figure figcaption{ font-size:.86rem; color:var(--ink-soft); text-align:center; margin-top:.6em; }

/* カラム（ブロックエディタの「カラム」） */
.entry__body .wp-block-columns{ display:flex; gap:28px; margin:0 0 1.8em; flex-wrap:wrap; }
.entry__body .wp-block-column{ flex:1 1 240px; min-width:0; }

/* ギャラリー */
.entry__body .wp-block-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:0 0 1.8em; }
.entry__body .wp-block-gallery figure{ margin:0; }
.entry__body .wp-block-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }

/* ボタン */
.entry__body .wp-block-buttons{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 1.8em; }
.entry__body .wp-block-button__link{
  display:inline-block; background:var(--green); color:#fff; text-decoration:none;
  padding:16px 34px; border-radius:999px; font-weight:700; transition:.25s;
}
.entry__body .wp-block-button__link:hover{ background:var(--green-deep); }

/* 区切り線・引用 */
.entry__body .wp-block-separator{ border:0; border-top:2px solid var(--green-soft); margin:2.4em 0; }
.entry__body .wp-block-quote{ margin:1.6em 0; padding:18px 24px; background:var(--green-soft); border-left:4px solid var(--green); border-radius:0 10px 10px 0; }

/* メディアと文章 */
.entry__body .wp-block-media-text{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; margin:0 0 1.8em; }
.entry__body .wp-block-media-text img{ width:100%; border-radius:12px; }

@media(max-width:760px){
  .entry__body .wp-block-media-text{ grid-template-columns:1fr; gap:20px; }
}


/* =========================================================
   【2】ページ内パーツ（任意で使えるレイアウト部品）
   ========================================================= */

/* --- セクション：大きな区切り（見出し＋本文） --- */
.lp-section{ margin:0 0 64px; }
.lp-section > h2{
  font-family:var(--serif); color:var(--green-deep); text-align:center;
  font-size:clamp(1.4rem,3vw,2rem); line-height:1.5;
  margin:0 0 32px; padding-bottom:16px; position:relative;
}
.lp-section > h2::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:56px; height:3px; background:var(--gold); border-radius:2px;
}
.lp-section p{ line-height:2; margin:0 0 1.3em; }
.lp-section > ul{ max-width:40em; margin:0 auto 1.6em; padding-left:1.3em; }
.lp-section > ul li{ margin-bottom:.6em; line-height:1.9; }
.lp-section img{ width:100%; height:auto; border-radius:14px; }

/* --- 冒頭（ファーストビュー） --- */
.lp-firstview{
  background:var(--green-soft); border-radius:var(--radius);
  padding:clamp(28px,5vw,56px); text-align:center; margin-bottom:56px;
}
.lp-firstview h2{ font-family:var(--serif); color:var(--green-deep); font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.6; margin:0 0 24px; }
.lp-label{ display:inline-block; background:var(--green); color:#fff; font-weight:700; font-size:.88rem; padding:6px 20px; border-radius:999px; margin-bottom:16px; }

/* --- 料金ボックス --- */
.lp-price-box{
  background:#fff; border:2px solid var(--green); border-radius:var(--radius);
  padding:28px 24px; margin:0 auto 24px; max-width:520px; text-align:center;
}
.lp-price-label{ font-weight:700; color:var(--green-deep); margin:0 0 8px !important; }
.lp-price{
  font-family:var(--serif); font-weight:700; color:var(--green-deep);
  font-size:clamp(1.6rem,4vw,2.3rem); line-height:1.3; margin:0 0 8px !important;
}
.lp-note{ font-size:.9rem; color:var(--ink-soft); margin:0 !important; }

/* --- 電話CTAボックス --- */
.lp-cta-box{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; margin:0 auto 20px; max-width:520px; text-align:center; box-shadow:var(--shadow-sm);
}
.lp-cta-box p{ margin:0 0 8px !important; }
.lp-tel a{
  font-family:var(--serif); font-weight:700; color:var(--green-deep);
  font-size:clamp(1.7rem,4vw,2.2rem); text-decoration:none; letter-spacing:.02em;
}
.lp-button{
  display:inline-block; background:var(--gold); color:#fff !important; text-decoration:none;
  padding:16px 36px; border-radius:999px; font-weight:700; margin-top:8px; transition:.25s;
}
.lp-button:hover{ background:var(--gold-deep); }

/* --- カード3列（特長の一覧） --- */
.lp-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lp-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-sm);
}
.lp-card h3{
  font-family:var(--serif); color:var(--green-deep); font-size:1.15rem;
  margin:0 0 10px; padding-left:14px; border-left:4px solid var(--green); line-height:1.5;
}
.lp-card p{ font-size:.95rem; color:var(--ink-soft); margin:0 !important; line-height:1.9; }

/* --- サービス説明ブロック（番号付きの長文） --- */
.lp-service-block{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,4vw,40px); margin-bottom:24px; box-shadow:var(--shadow-sm);
}
.lp-service-block h3{
  font-family:var(--serif); color:var(--green-deep); font-size:clamp(1.15rem,2.4vw,1.4rem);
  margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--green-soft); line-height:1.5;
}
.lp-service-block h4{ color:var(--green-deep); font-size:1.02rem; margin:1.6em 0 .6em; padding-left:12px; border-left:3px solid var(--gold); }
.lp-service-block ul{ padding-left:1.3em; margin:0 0 1.2em; }
.lp-service-block li{ margin-bottom:.5em; line-height:1.9; }

/* --- ご利用の流れ（手順） --- */
.lp-flow-block{
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--green);
  border-radius:0 var(--radius) var(--radius) 0; padding:24px 26px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.lp-flow-block h3{ font-family:var(--serif); color:var(--green-deep); font-size:1.12rem; margin:0 0 10px; line-height:1.5; }
.lp-flow-block p{ margin:0 !important; font-size:.96rem; color:var(--ink-soft); }

/* --- 事例ブロック --- */
.lp-case-block{
  background:var(--green-soft); border-radius:var(--radius);
  padding:26px 28px; margin-bottom:18px;
}
.lp-case-block h3{ font-family:var(--serif); color:var(--green-deep); font-size:1.12rem; margin:0 0 10px; line-height:1.5; }
.lp-case-block p{ margin:0 !important; font-size:.96rem; }

/* --- よくある質問（Q&A） --- */
.lp-faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
/* 共通：パーツ内の見出しは標準h3の飾り線を解除 */
.lp-card h3, .lp-service-block h3, .lp-flow-block h3,
.lp-case-block h3, .lp-faq-item h3, .back_color_green h3{
  border-left:0; padding-left:0;
}
.lp-card h3{ padding-left:14px; border-left:4px solid var(--green); }
.lp-service-block h4{ border-left:3px solid var(--gold); padding-left:12px; }

.lp-faq-item h3{
  font-family:var(--serif); color:var(--green-deep); font-size:1.08rem; line-height:1.6;
  margin:0 0 12px; padding-left:34px !important; position:relative;
}
.lp-faq-item h3::before{
  content:"Q"; position:absolute; left:0; top:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--green); color:#fff; font-size:.86rem; display:grid; place-items:center;
}
.lp-faq-item p{ margin:0 !important; color:var(--ink-soft); line-height:1.95; }
.lp-faq-item p strong{ color:var(--gold-deep); margin-right:.4em; }

/* --- 最後のCTA --- */
.lp-final-cta{ background:var(--green-soft); border-radius:var(--radius); padding:clamp(28px,5vw,52px); text-align:center; }
.lp-final-cta p{ margin-left:auto; margin-right:auto; max-width:40em; }

/* --- アイコン画像の横並び --- */
.green_block_wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; }
.green_block_wrap > *:not(.green_block_item){ display:none; }  /* 旧データの空段落よけ */
.green_block_item{ text-align:center; }
.green_block_img{ border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.green_block_img_item{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.green_block_font{ margin:10px 0 0 !important; font-weight:700; color:var(--green-deep); font-size:.95rem; }

/* --- 文字装飾（単発） --- */
/* 緑ベタの囲みブロック（中の文字はすべて白で統一） */
.back_color_green{
  background:var(--green); border-radius:var(--radius);
  padding:clamp(24px,4vw,40px); margin:0 0 28px;
}
.back_color_green,
.back_color_green h2, .back_color_green h3, .back_color_green h4,
.back_color_green p, .back_color_green li,
.back_color_green .green_block_font,
.back_color_green .span_red_big,
.back_color_green_font{ color:#fff; }
.back_color_green h3{
  text-align:center; font-size:clamp(1.05rem,2.4vw,1.35rem);
  line-height:1.7; margin:0 0 16px;
}
.back_color_green .span_red_big{ color:#ffe9a3; }      /* 緑地でも読める強調色 */
.back_color_green .border_under_red{ background:rgba(255,255,255,.7); }
.back_color_green .green_block_img{ box-shadow:none; }
.span_red_big{ color:#c0392b; font-weight:700; font-size:1.25em; }
.border_under_red{ width:70px; height:3px; background:var(--gold); border-radius:2px; margin:0 auto 28px; }

@media(max-width:900px){
  .lp-card-grid{ grid-template-columns:repeat(2,1fr); }
  .green_block_wrap{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .lp-card-grid{ grid-template-columns:1fr; }
  .green_block_wrap{ grid-template-columns:repeat(2,1fr); }
  .lp-section{ margin-bottom:48px; }
}


/* =========================================================
   【3】お問い合わせフォーム（Contact Form 7）
   ---------------------------------------------------------
   クライアントは CF7 の管理画面でタグを足すだけ。
   .Form-Item で1項目を囲む構造をそのまま使えば自動で整います。
   ========================================================= */

/* --- フォーム全体を1枚のパネルに --- */
.entry__body .wpcf7{ margin:0 0 8px; }
.entry__body .wpcf7-form .Form{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,4vw,44px); max-width:760px; margin:0 auto;
}

/* --- 1項目 --- */
.Form-Item{ margin:0 0 26px; }
.Form-Item > p{ margin:0 !important; }
.Form-Item-Label br{ display:none; }          /* CF7が入れる余分な改行を消す */

/* --- 見出し（ラベル） --- */
.Form-Item-Label{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-weight:700; color:var(--ink); font-size:1.02rem;
  line-height:1.6; margin:0 0 10px !important;
}
.Form-Item-Label-Required,
.Form-Item-Label-Optional{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  padding:4px 12px; border-radius:999px; line-height:1.4; flex:none;
}
.Form-Item-Label-Required{ background:#c0392b; color:#fff; }
.Form-Item-Label-Optional{ background:var(--line); color:var(--ink-soft); }

/* --- 入力欄 --- */
.entry__body .wpcf7-form input[type="text"],
.entry__body .wpcf7-form input[type="tel"],
.entry__body .wpcf7-form input[type="email"],
.entry__body .wpcf7-form input[type="url"],
.entry__body .wpcf7-form input[type="number"],
.entry__body .wpcf7-form input[type="date"],
.entry__body .wpcf7-form select,
.entry__body .wpcf7-form textarea{
  width:100%; box-sizing:border-box;
  font-family:inherit; font-size:1.02rem; color:var(--ink); line-height:1.7;
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:15px 18px; transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.entry__body .wpcf7-form textarea{ min-height:190px; resize:vertical; }
.entry__body .wpcf7-form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:46px;
}
.entry__body .wpcf7-form ::placeholder{ color:#a7b2ab; }

/* フォーカス（高齢者にも分かるようはっきり） */
.entry__body .wpcf7-form input:focus,
.entry__body .wpcf7-form select:focus,
.entry__body .wpcf7-form textarea:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 4px rgba(63,138,69,.15);
}

/* --- チェックボックス・ラジオ --- */
.entry__body .wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
.entry__body .wpcf7-form .wpcf7-radio .wpcf7-list-item{
  display:inline-block; margin:0 18px 10px 0;
}
.entry__body .wpcf7-form .wpcf7-list-item label{ cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.entry__body .wpcf7-form input[type="checkbox"],
.entry__body .wpcf7-form input[type="radio"]{ width:20px; height:20px; accent-color:var(--green); }

/* --- 送信ボタン --- */
.entry__body .wpcf7-form .Form-Btn,
.entry__body .wpcf7-form input[type="submit"]{
  display:block; width:100%; max-width:340px; margin:8px auto 0;
  background:var(--green); color:#fff; border:0; border-radius:999px;
  font-family:inherit; font-size:1.1rem; font-weight:700; letter-spacing:.04em;
  padding:19px 30px; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:background .25s, transform .15s;
}
.entry__body .wpcf7-form .Form-Btn:hover,
.entry__body .wpcf7-form input[type="submit"]:hover{ background:var(--green-deep); transform:translateY(-1px); }
.entry__body .wpcf7-form .Form-Btn:disabled{ background:var(--ink-soft); cursor:wait; transform:none; }
.entry__body .wpcf7-form .wpcf7-spinner{ margin:0 0 0 12px; vertical-align:middle; }

/* --- エラー・完了メッセージ --- */
.entry__body .wpcf7-not-valid-tip{
  display:block; margin-top:8px; font-size:.9rem; font-weight:700; color:#c0392b;
}
.entry__body .wpcf7-form input.wpcf7-not-valid,
.entry__body .wpcf7-form textarea.wpcf7-not-valid{ border-color:#c0392b; background:#fdf6f5; }
.entry__body .wpcf7-response-output{
  margin:24px auto 0 !important; max-width:760px;
  border:1.5px solid var(--line) !important; border-radius:12px;
  padding:16px 20px !important; font-size:.96rem; line-height:1.8; background:#fff;
}
.entry__body .wpcf7-form.sent .wpcf7-response-output{ border-color:var(--green) !important; background:var(--green-soft); color:var(--green-deep); }
.entry__body .wpcf7-form.invalid .wpcf7-response-output,
.entry__body .wpcf7-form.failed .wpcf7-response-output{ border-color:#c0392b !important; background:#fdf6f5; color:#96281b; }

/* --- 電話の案内ブロック（フォームの上） --- */
.estimate-phone{
  background:var(--green-soft); border-radius:var(--radius);
  padding:clamp(24px,4vw,36px); margin:0 0 40px; text-align:center;
}
.estimate-phone h2{ margin-top:0 !important; }
.estimate-phone a[href^="tel:"]{
  font-family:var(--serif); font-weight:700; color:var(--green-deep);
  text-decoration:none; letter-spacing:.02em; font-size:clamp(1.7rem,4vw,2.2rem);
}

@media(max-width:600px){
  .Form-Item{ margin-bottom:22px; }
  .entry__body .wpcf7-form .Form-Btn,
  .entry__body .wpcf7-form input[type="submit"]{ max-width:100%; }
}