@charset "utf-8";

/* ============================================================
   renovationmenu.css
   リノベーションメニュー（/renovationmenu/）

   header.php は URL の第1セグメントと同名の css/{slug}.css を読む。
   詳細ページのスタイル（.merititems / .p-reformmenu__ttl / .news_item など）は
   reformmenu.css にしか無いため、複製せず読み込んで使う。
   ============================================================ */
@import url("reformmenu.css");

/* ------------------------------------------------------------
   一覧（/renovationmenu/）
   支給デザイン renov-view.html の★ブロックをそのまま移植
   配色は既存テーマ準拠　緑 #005629 ／ 文字 #323232 ／ 背景 #f7f7f7
   ------------------------------------------------------------ */
.renovmenu{padding:56px 0 96px;}
.renovmenu .inner{max-width:1040px;width:100%;margin:0 auto;padding:0 20px;box-sizing:border-box;}
.renovmenu-lead{text-align:center;font-size:16px;line-height:2.1;color:#323232;margin:0 auto 52px;max-width:840px;}
.renovmenu-lead strong{color:#005629;font-weight:700;}

.renovmenu-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 26px;list-style:none;margin:0;padding:0;}
.renovmenu-cards__item{margin:0;}
.renovmenu-cards__item > a{display:block;background:#fff;border-radius:6px;overflow:hidden;text-decoration:none;color:#323232;
  box-shadow:0 2px 12px rgba(0,0,0,.07);transition:transform .3s ease, box-shadow .3s ease;}
.renovmenu-cards__item > a:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,.14);}
/* サムネイルは切り抜きなし（原寸比率100%で表示） */
.renovmenu-cards__img{display:block;background:#f1f1f1;}
.renovmenu-cards__img img{display:block;width:100%;height:auto;}
/* テキストリンクは写真の上（文字リンク→サムネイル→文字リンク→サムネイル…の並び） */
.renovmenu-cards__ttl{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;font-size:15px;font-weight:700;line-height:1.5;border-bottom:3px solid #005629;}
.renovmenu-cards__ttl::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#005629;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  background-size:14px 14px;background-repeat:no-repeat;background-position:center;transition:transform .3s;}
.renovmenu-cards__item > a:hover .renovmenu-cards__ttl{color:#005629;}
.renovmenu-cards__item > a:hover .renovmenu-cards__ttl::after{transform:translateX(3px);}

/* 下部：リフォームメニューへの導線 */
.renovmenu-crossbnr{margin-top:72px;background:#f2f7f4;border:1px solid #d8e5de;border-radius:6px;padding:32px 28px;text-align:center;}
.renovmenu-crossbnr p{margin:0 0 18px;font-size:16px;line-height:1.9;color:#323232;}
.renovmenu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#005629;color:#fff;
  font-size:16px;font-weight:700;text-decoration:none;padding:17px 34px;border-radius:4px;box-shadow:0 3px 0 #003b1c;transition:.15s;}
.renovmenu-btn:hover{transform:translateY(3px);box-shadow:0 0 0 #003b1c;color:#fff;}
.renovmenu-btn::after{content:"→";font-size:18px;line-height:1;}

@media screen and (max-width:900px){
  .renovmenu-cards{grid-template-columns:repeat(2,1fr);gap:26px 18px;}
}
@media screen and (max-width:600px){
  .renovmenu{padding:32px 0 64px;}
  .renovmenu-lead{font-size:14px;line-height:1.95;margin-bottom:32px;text-align:left;}
  .renovmenu-cards{grid-template-columns:1fr;gap:20px;}
  .renovmenu-cards__ttl{font-size:15px;padding:13px 14px;}
  .renovmenu-crossbnr{padding:24px 18px;margin-top:48px;}
  .renovmenu-btn{width:100%;box-sizing:border-box;font-size:15px;padding:16px 12px;}
}