/* =========================================================
   お墓のよろずや - styles.css（完全版）
   構成前提：
     index.html
     assets/
       css/styles.css   ← 本ファイル
       img/hero.png
       img/top_logo.webp
       img/logo.svg（任意）
   方針：
     - すべて中央揃えを基本
     - ヒーロー背景：hero.png
     - ヒーロー上に top_logo.webp を配置し、その「下」に見出しテキストを表示
     - top_logo.webp は（以前900px想定の）60%サイズ＝540pxに縮小しレスポンシブ対応
   ========================================================= */

/* ---------- トークン ---------- */
:root{
  --olive:#556B2F;
  --beige:#CFAF82;
  --accent:#EBA937;
  --ink:#333333;
  --bg:#f6f5f2;
  --line:#e8e5dd;
  --white:#ffffff;

  --radius-lg:16px;
  --radius-md:10px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
}

/* ---------- ベース（中央寄せ） ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-align:center;
}
img{max-width:100%; height:auto; display:block; margin-inline:auto}
a{color:var(--olive); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px, 92vw); margin-inline:auto}

/* ---------- ヘッダー / ナビ ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .nav{
  display:flex; align-items:center; justify-content:center; gap:28px;
  padding:12px 0;
}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700}
.logo-mark{
  display:inline-block; width:18px; height:18px;
  background:var(--olive); border-radius:3px; box-shadow:var(--shadow-sm)
}
.brand-name{letter-spacing:.04em}
.site-header nav{display:flex; gap:1rem; align-items:center; justify-content:center}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block; padding:.7rem 1rem;
  border-radius:999px; border:1px solid transparent;
  font-weight:600; line-height:1; box-shadow:var(--shadow-sm)
}
.btn-primary{background:var(--olive); color:var(--white)}
.btn-primary:hover{filter:brightness(.95); text-decoration:none}
.btn-secondary{background:var(--beige); color:#3b2f1e}
.btn-secondary:hover{filter:brightness(.97); text-decoration:none}
.btn-outline{border-color:var(--olive); color:var(--olive); background:transparent}
.btn-outline:hover{background:var(--olive); color:var(--white); text-decoration:none}

/* ---------- ヒーロー（ロゴ→テキストの順で縦並び） ---------- */
.hero{
  position:relative;
  min-height:62vh;
  width: 100%;
  display:flex;                 /* ← column で縦並び */
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;   /* 上から配置 */
  gap:20px;                     /* ロゴとテキストの間隔 */
  background-image:url('../img/hero.png'); /* assets/css からの相対 */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  padding-top:40px;             /* 上部余白 */
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.12) 100%);
  z-index:1;
}

/* ヒーローロゴ（top_logo.webp）：60%サイズ＆レスポンシブ */
.hero-banner{
  position:relative; z-index:2;   /* overlay より前 */
  width:540px;                    /* 900px の 60% 相当 */
  max-width:80vw;                 /* 画面に合わせて縮小 */
  height:auto;
  pointer-events:none;
  /* 位置は flex の縦並びで中央寄せされるため top/left は不要 */
}

/* 見出し・リードはロゴの「下」に表示 */
.hero-inner{
  position:relative; z-index:3;
  text-align:center; padding:20px 0; color:var(--white);
}
.hero h1{font-size:clamp(28px, 4.6vw, 48px); margin:0 0 .6rem}
.hero .lead{font-size:clamp(14px, 2.2vw, 18px); opacity:.95; margin-bottom:1.2rem}
.hero .cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-inline:auto}

/* ヒーロー見出しの改行制御 */
.hero-break{
  display: none; /* デフォルトでは改行を非表示 */
}

/* ヒーローリード文の改行制御 */
.lead-break{
  display: none; /* デフォルトでは改行を非表示 */
}

/* ---------- セクション ---------- */
.section{padding:64px 0}
.section.alt{background:#ffffff}
.section h2{font-size:28px; margin:0 0 20px; color:#1d1d1d}

/* ---------- カードグリッド ---------- */
.cards{
  display:grid; gap:16px; grid-template-columns:repeat(3, 1fr);
  place-items:center;
}
.card{
  background:#fff; border:1px solid #ece8de; border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-sm); text-align:center; width:100%;
}
.card h3{margin:.2rem 0 .4rem}
.card p{margin:.4rem 0}
.card .price{font-weight:700; color:var(--olive)}
.card .price.small{font-weight:500; color:#777}

/* ---------- 料金プラン ---------- */
.plans-link{
  text-align: center;
  padding: 40px 20px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.plans-link p{
  margin-bottom: 24px;
  font-size: 16px;
  color: var(--ink);
}
table{width:100%; border-collapse:collapse; font-size:15px; margin-inline:auto}
thead th{background:#faf8f4; text-align:center; font-weight:700; color:#1d1d1d}
th,td{padding:14px 16px; border-bottom:1px solid #eee; vertical-align:top; text-align:center}
.note{font-size:13px; color:#6b6558; margin-top:12px}

/* ---------- 施工事例 ---------- */
.grid{
  display:grid; gap:12px; grid-template-columns:repeat(3, 1fr);
  place-items:center;
}
.work{
  background:#fff; border:1px dashed #c8c2b4; border-radius:12px;
  padding:32px; text-align:center; color:#7a7261; width:100%;
}

/* ---------- お問い合わせ ---------- */
.contact-form{display:grid; gap:12px; max-width:720px; margin-inline:auto}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact-form label{display:grid; gap:6px; font-size:14px; text-align:left}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid #ddd3c2; border-radius:var(--radius-md);
  font:inherit; background:#fff; transition:border-color .2s ease, box-shadow .2s ease
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:2px solid #e9dfcf; border-color:#cbb893; box-shadow:0 0 0 2px rgba(235,169,55,.08)
}
.contact-note{margin-top:10px; color:#534b3a}

/* ---------- フッター ---------- */
.site-footer{border-top:1px solid var(--line); padding:24px 0; background:#fbfaf8}
.footer-inner{display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap}
.foot-links{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center}

/* ---------- アクセシビリティ ---------- */
:focus-visible{outline:3px solid rgba(235,169,55,.6); outline-offset:2px}
[aria-hidden="true"]{pointer-events:none}

/* ---------- レスポンシブ ---------- */
@media (max-width: 920px){
  .hero{min-height:58vh}
  .cards{grid-template-columns:1fr}
  
  /* 料金テーブルを縦積みレイアウトに変更 */
  .table-wrap{
    min-width: auto;
    overflow: visible;
  }
  .table-wrap table{
    display: none; /* デスクトップテーブルを非表示 */
  }
  .table-wrap::before{
    content: "料金プラン";
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--ink);
  }
  .table-wrap::after{
    content: "";
    display: block;
    clear: both;
  }
  
  /* 縦積みカード形式の料金表示 */
  .table-wrap .mobile-plans{
    display: grid;
    gap: 16px;
  }
  .table-wrap .mobile-plan{
    background: #fff;
    border: 1px solid #ece8de;
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: left;
  }
  .table-wrap .mobile-plan h3{
    margin: 0 0 12px 0;
    font-size: 18px;
    color: var(--olive);
    text-align: center;
  }
  .table-wrap .mobile-plan .content{
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }
  .table-wrap .mobile-plan .price{
    font-weight: 700;
    color: var(--olive);
    text-align: center;
    font-size: 16px;
  }
  
  /* 施工事例を1列表示に変更 */
  .grid{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px){
  .site-header nav a{display:none}
  .site-header nav a.btn{display:inline-block}
  .hero{min-height:56vh; background-size:cover; background-position:center}
  .hero-banner{width:360px; max-width:80vw}  /* タブレット相当 */
  .contact-form .row{grid-template-columns:1fr}
}
@media (max-width: 480px){
  .hero{background-size:cover; background-position:center}
  .hero-banner{width:280px; max-width:80vw}  /* スマホ相当 */
}
@media (max-width: 486px){
  /* 486px以下でヒーロー見出しを2行に */
  .hero-break{
    display: inline; /* 改行を表示 */
  }
}
@media (max-width: 485px){
  /* 485px以下でヒーローリード文を改行 */
  .lead-break{
    display: inline; /* 改行を表示 */
  }
}
@media (max-width: 320px){
  /* 320px以下は固定表示 */
  .container{width: 320px; margin-inline: auto}
  
  /* ヒーローセクションの背景を固定 */
  .hero{
    min-height: 400px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .hero-banner{width: 240px; max-width: 240px}
  .hero h1{font-size: 24px}
  .hero .lead{font-size: 14px}
  .section{padding: 40px 0}
  .section h2{font-size: 24px}
  .card{padding: 16px}
  .card h3{font-size: 16px}
  .card p{font-size: 14px}
  .plans-link{padding: 30px 16px}
  .plans-link p{font-size: 14px}
  .work{padding: 24px}
  .contact-form{max-width: 100%}
  .contact-form input, .contact-form textarea{padding: 10px 12px; font-size: 14px}
  .btn{padding: .6rem .8rem; font-size: 14px}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
}