/* works｜遊べるお寺プロジェクト ご依頼・ご相談（2026-09-29 試作：TEToRAのような、白基調のビジネスの形） */
:root{
  --ink:#1f2a30;          /* 本文 */
  --sub:#5b6770;          /* 補足の文字 */
  --line:#e3e7ea;         /* 罫線 */
  --bg:#ffffff;           /* 地 */
  --bg-soft:#f6f5f1;      /* うすい地（生成り） */
  --accent:#2f6f5e;       /* 差し色（苔の緑） */
  --accent-soft:#e7f0ec;
  --maxw:1080px;
  --rail:20px;
}
@media (min-width:900px){ :root{ --rail:32px; } }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  color:var(--ink); background:var(--bg);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.9; letter-spacing:.02em; font-size:16px;
}
a{ color:var(--accent); }
img{ max-width:100%; height:auto; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--rail); }

/* ヘッダー */
.site-header{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.logo{ text-decoration:none; color:var(--ink); line-height:1.3; }
.logo b{ display:block; font-size:17px; letter-spacing:.06em; }
.logo small{ display:block; font-size:11px; color:var(--sub); letter-spacing:.12em; }
.nav{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.nav a{ color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; padding:8px 12px; border-radius:6px; }
.nav a:hover,.nav a[aria-current="page"]{ background:var(--accent-soft); color:var(--accent); }
.nav a.nav-cta{ background:var(--accent); color:#fff; }
.nav a.nav-cta:hover{ opacity:.9; }
@media (max-width:760px){
  .site-header{ position:static; }
  .site-header .wrap{ flex-direction:column; align-items:flex-start; padding-top:10px; padding-bottom:6px; gap:4px; }
  .nav{ justify-content:flex-start; margin-left:-10px; }
  .nav a{ font-size:13px; padding:6px 10px; }
}

/* 最初の画面 */
.hero{ padding:88px 0 80px; background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%); border-bottom:1px solid var(--line); }
.hero .eyebrow{ font-size:13px; letter-spacing:.2em; color:var(--accent); font-weight:700; margin:0 0 18px; }
.hero h1{ font-size:clamp(28px,5vw,48px); line-height:1.45; margin:0 0 20px; letter-spacing:.04em; font-weight:800; }
.hero .lead{ font-size:clamp(15px,1.8vw,18px); color:var(--sub); margin:0 0 8px; font-weight:600; }
.hero .body{ max-width:640px; margin:18px 0 32px; }
.btns{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{ display:inline-block; text-decoration:none; font-weight:700; padding:14px 26px; border-radius:6px; font-size:15px; letter-spacing:.05em; }
.btn.primary{ background:var(--accent); color:#fff; }
.btn.primary:hover{ opacity:.9; }
.btn.ghost{ background:#fff; color:var(--ink); border:1px solid var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:#fff; }
@media (max-width:760px){ .hero{ padding:52px 0 48px; } .btn{ width:100%; text-align:center; } }
.nb{ display:inline-block; }
@media (max-width:420px){ .hero h1{ font-size:23px; line-height:1.6; } .nav a.nav-home{ display:none; } }

/* セクション */
.section{ padding:88px 0; }
.section.soft{ background:var(--bg-soft); }
.sec-head{ text-align:center; margin:0 0 44px; }
.sec-head .en{ display:block; font-size:12px; letter-spacing:.3em; color:var(--accent); font-weight:700; margin-bottom:6px; }
.sec-head h2{ font-size:clamp(22px,3vw,30px); margin:0; letter-spacing:.06em; }
.sec-head p{ color:var(--sub); margin:12px auto 0; max-width:640px; }
.more{ text-align:center; margin-top:36px; }
.more a{ font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
@media (max-width:760px){ .section{ padding:60px 0; } .sec-head{ margin-bottom:32px; } }

/* こんなとき */
.worries{ list-style:none; margin:0 auto; padding:0; max-width:760px; display:grid; gap:12px; }
.worries li{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 18px 14px 46px; position:relative; font-weight:600; }
.worries li::before{ content:""; position:absolute; left:18px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; border:2px solid var(--accent); }
.after{ text-align:center; margin:28px auto 0; max-width:640px; }

/* サービスのカード */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px 24px; }
.card .num{ font-size:13px; font-weight:800; color:var(--accent); letter-spacing:.1em; }
.card h3{ font-size:19px; margin:6px 0 12px; }
.card p{ margin:0; color:var(--sub); font-size:15px; }
.minor{ margin-top:20px; border:1px dashed #c9d0d4; border-radius:10px; padding:18px 24px; background:#fff; font-size:15px; color:var(--sub); }
.minor b{ color:var(--ink); }
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } }

/* 実績 */
.works-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.work{ display:block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px 24px; text-decoration:none; color:var(--ink); }
a.work:hover{ border-color:var(--accent); }
.work .cat{ display:inline-block; font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:2px 10px; border-radius:999px; }
.work .date{ font-size:12px; color:var(--sub); margin-left:8px; }
.work h3{ font-size:17px; margin:10px 0 6px; line-height:1.6; }
.work p{ margin:0; color:var(--sub); font-size:14px; }
.work .go{ display:block; margin-top:10px; font-size:13px; font-weight:700; color:var(--accent); }
@media (max-width:760px){ .works-list{ grid-template-columns:1fr; } }

/* やっている人 */
.profile{ display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:start; max-width:860px; margin:0 auto; }
.profile .name{ border-left:4px solid var(--accent); padding-left:16px; }
.profile .name b{ display:block; font-size:22px; }
.profile .name small{ display:block; color:var(--sub); font-size:13px; }
.profile p{ margin:0 0 12px; }
@media (max-width:760px){ .profile{ grid-template-columns:1fr; gap:16px; } }

/* 流れ */
.flow{ list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step; max-width:960px; }
.flow li{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 22px; counter-increment:step; }
.flow li::before{ content:"STEP " counter(step); display:block; font-size:12px; font-weight:800; letter-spacing:.15em; color:var(--accent); margin-bottom:6px; }
.flow h3{ margin:0 0 8px; font-size:18px; }
.flow p{ margin:0; color:var(--sub); font-size:15px; }
@media (max-width:760px){ .flow{ grid-template-columns:1fr; } }

/* よくある質問 */
.faq{ max-width:780px; margin:0 auto; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }
.faq summary{ cursor:pointer; list-style:none; padding:18px 48px 18px 20px; font-weight:700; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q."; color:var(--accent); margin-right:8px; }
.faq summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--sub); }
.faq details[open] summary::after{ content:"\2212"; }
.faq details p{ margin:0; padding:0 20px 18px 44px; color:var(--sub); }

/* お問い合わせの帯 */
.cta-band{ background:var(--ink); color:#fff; text-align:center; padding:72px 0; }
.cta-band h2{ margin:0 0 14px; font-size:clamp(22px,3vw,28px); letter-spacing:.06em; }
.cta-band p{ margin:0 auto 28px; max-width:620px; color:#d7dde1; }
.cta-band .btns{ justify-content:center; }
.cta-band .btn.ghost{ background:transparent; color:#fff; border-color:#fff; }
.cta-band .btn.ghost:hover{ background:#fff; color:var(--ink); }

/* 下層ページ */
.page-head{ padding:64px 0 48px; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.page-head .en{ font-size:12px; letter-spacing:.3em; color:var(--accent); font-weight:700; }
.page-head h1{ margin:6px 0 10px; font-size:clamp(26px,4vw,36px); letter-spacing:.06em; }
.page-head p{ margin:0; color:var(--sub); max-width:680px; }
.page-body{ padding:64px 0 24px; }
.block{ max-width:860px; margin:0 auto 64px; }
.block h2{ font-size:22px; border-bottom:2px solid var(--ink); padding-bottom:8px; margin:0 0 20px; }
.block h3{ font-size:17px; margin:26px 0 8px; }
.block ul{ padding-left:1.3em; }
.block li{ margin:4px 0; }
.note-box{ background:var(--bg-soft); border-radius:8px; padding:16px 20px; font-size:15px; color:var(--sub); margin-top:16px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0 !important; }
.tag-list li{ background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:14px; padding:4px 12px; border-radius:999px; margin:0; }
.cat-title{ font-size:15px; letter-spacing:.1em; color:var(--accent); margin:40px 0 14px; }

/* フッター */
.site-footer{ border-top:1px solid var(--line); padding:40px 0 28px; font-size:14px; color:var(--sub); }
.site-footer .cols{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; }
.site-footer a{ color:var(--ink); text-decoration:none; }
.site-footer a:hover{ color:var(--accent); }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; }
.site-footer .copy{ margin-top:24px; font-size:12px; }

/* 9/29夜 追加：お店・事業者の方への入口／帯の補足／5段の流れ */
a.minor.biz{ display:block; text-decoration:none; border:1px solid var(--accent); background:var(--accent-soft); color:var(--ink); }
a.minor.biz:hover{ background:#dbe9e3; }
a.minor.biz .go{ display:inline-block; margin-left:8px; color:var(--accent); font-weight:700; }
.band-sub{ margin:18px auto 0 !important; font-size:14px; }
.band-sub a{ color:#fff; }
.flow.flow5{ grid-template-columns:repeat(5,1fr); max-width:none; }
.flow.flow5 li{ padding:20px 16px; }
.flow.flow5 h3{ font-size:16px; }
@media (max-width:900px){ .flow.flow5{ grid-template-columns:1fr; } }
@media (max-width:760px){ .sp-none{ display:none; } }
@media (max-width:420px){ .page-head h1{ font-size:23px; line-height:1.6; } }

/* 料金表（2026年9月30日） */
table.price{ width:100%; border-collapse:collapse; margin:8px 0 12px; background:#fff; }
table.price th, table.price td{ border-bottom:1px solid var(--line); padding:12px 10px; text-align:left; vertical-align:top; font-size:15px; }
table.price th{ width:1%; white-space:nowrap; font-weight:600; color:var(--ink); padding-right:18px; }
table.price td b{ font-size:17px; }
table.price .p-sub{ display:block; font-size:13px; color:var(--sub); margin-top:2px; }
ul.price-notes{ margin:0; padding-left:1.2em; color:var(--sub); font-size:14px; }
ul.price-notes li{ margin:4px 0; }

/* 写真（2026年9月30日） */
.card.has-img{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card-img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.card-body{ padding:22px 24px 26px; }
.photo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 20px; }
.photo-row.one{ grid-template-columns:1fr; max-width:520px; }
.photo-row figure{ margin:0; }
.photo-row img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; }
.photo-row figcaption{ font-size:13px; color:var(--sub); margin-top:4px; }
@media (max-width:600px){ .photo-row{ grid-template-columns:1fr 1fr; } }
/* 受講した方の声 */
.voices{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.voice{ margin:0; background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:22px 22px 18px; }
.voice blockquote{ margin:0 0 12px; font-size:15px; line-height:1.9; }
.voice figcaption{ font-size:12px; color:var(--sub); }
@media (max-width:900px){ .voices{ grid-template-columns:1fr; } }