/* =====================================================================
   クマひよ工房 ／ 設計トークン ＋ ベース ＋ ヘッダー ＋ フッター ＋ ページの部品
   色の値と組み合わせはデザインパレットに従う。
   - 赤系の色はトークンに置かない（煽る見た目を作れないようにする）
   - オレンジ（--orange）は専用のクラス1つだけが使う
   - 黄色の面はファーストビューと帯（ヘッダーを含む）だけ
   - スウッシュは h2 にだけ付く。HTML には書かない
   コラム本文の組版は column.css に分ける。
   ===================================================================== */

/* ---- 設計トークン ---- */
:root{
  --yellow:#EEB033; --black:#000000; --orange:#DD551B; --white:#FFFFFF;
  --soft:#FBF4E4; --line:#E6E1D8; --ink-2:#55504A;
  --radius:10px;
  --max:1120px;
  --font-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --font-head:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}

/* ---- ベース ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--font-body);font-size:16px;line-height:1.85;letter-spacing:.02em}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.45;margin:0 0 .6em;word-break:auto-phrase}
h2{font-size:28px;margin-bottom:28px;padding-bottom:16px;background:url("/assets/img/swoosh.svg") no-repeat left bottom/150px auto}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}
img{max-width:100%;height:auto}
a{color:var(--black);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--black);outline-offset:2px}

/* ---- 共通レイアウト ---- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---- ヘッダー ---- */
.site-header{position:sticky;top:0;z-index:10;background:var(--yellow);border-bottom:3px solid var(--black)}
.site-header-in{max-width:var(--max);height:80px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px}
.site-logo{flex:0 0 auto;display:block;color:var(--black);text-decoration:none}
.site-logo-full{display:block;width:288px}
.site-logo-sp{display:none}

.site-nav{margin-left:auto}
.site-nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.site-nav-list>li{position:relative}
.site-nav-list>li>a,
.site-nav-service-toggle{display:block;padding:8px 12px;border:0;border-radius:var(--radius);background:none;color:var(--black);font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer}
.site-nav-list>li>a:hover,
.site-nav-service-toggle:hover{background:var(--soft)}
.site-nav-service-toggle::after{content:"";display:inline-block;width:7px;height:7px;margin:0 2px 3px 9px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg)}
.site-nav-service-toggle[aria-expanded="true"]::after{margin-bottom:-1px;transform:rotate(-135deg)}

.site-service-menu{display:none;position:absolute;top:calc(100% + 14px);left:0;width:580px;padding:20px 24px;grid-template-columns:1fr 1fr;gap:4px 28px;background:var(--white);border:2px solid var(--black);border-radius:var(--radius)}
.site-nav-service-toggle[aria-expanded="true"]+.site-service-menu{display:grid}
.site-service-all{grid-column:1/-1;margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line);font-weight:700}
.site-service-group-name{margin:0 0 2px;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink-2)}
.site-service-group ul{list-style:none;margin:0;padding:0}
.site-service-menu a{display:block;padding:4px 0;font-size:15px;text-decoration:none}
.site-service-menu a:hover{text-decoration:underline}

.site-cta{flex:0 0 auto;display:inline-block;padding:10px 20px;border-radius:var(--radius);background:var(--black);color:var(--yellow);font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.4;text-decoration:none}
.site-cta:hover{text-decoration:underline}

.site-nav-toggle{display:none}

/* ---- フッター ---- */
.site-footer{background:var(--soft);border-top:3px solid var(--black);font-size:14px;line-height:1.8}
.site-footer-in{max-width:var(--max);margin:0 auto;padding:56px 24px 28px;display:grid;grid-template-columns:320px 1fr;gap:36px 48px}
.site-footer-logo{display:block;width:240px}
.site-footer-tagline{margin:18px 0 14px;font-family:var(--font-head);font-weight:700;font-size:15px}
.site-footer-hours{margin:0}
.site-footer-hours dt{font-weight:700}
.site-footer-hours dd{margin:0}
.site-footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.site-footer-head{margin:0 0 4px;font-family:var(--font-head);font-weight:700;font-size:15px}
.site-footer-nav ul{list-style:none;margin:0 0 18px;padding:0}
.site-footer-nav ul ul{margin:0 0 4px;padding-left:1em}
.site-footer-nav li{color:var(--ink-2)}
.site-footer-nav a{color:var(--black);text-decoration:none}
.site-footer-nav a:hover,
.site-footer-legal a:hover{text-decoration:underline}
.site-footer-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 28px;list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--line)}
.site-footer-legal a{text-decoration:none}
.site-footer-copy{grid-column:1/-1;margin:0;color:var(--ink-2)}
@media (max-width:1120px){
  .site-footer-in{grid-template-columns:1fr}
}

/* ================= ヘッダーのメニューを畳む幅 ================= */
@media (max-width:1000px){
  html{scroll-padding-top:80px}
  .site-header-in{height:64px;padding:0 16px;gap:12px}
  .site-logo-full{width:204px}
  .site-cta{margin-left:auto;padding:8px 14px;font-size:14px}

  .site-nav-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:2px solid var(--black);border-radius:var(--radius);background:var(--white);cursor:pointer}
  .site-nav-toggle-bar,
  .site-nav-toggle-bar::before,
  .site-nav-toggle-bar::after{display:block;width:20px;height:2px;background:var(--black)}
  .site-nav-toggle-bar{position:relative}
  .site-nav-toggle-bar::before,
  .site-nav-toggle-bar::after{content:"";position:absolute;left:0}
  .site-nav-toggle-bar::before{top:-6px}
  .site-nav-toggle-bar::after{top:6px}
  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar{background:transparent}
  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar::before{top:0;transform:rotate(45deg)}
  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle-bar::after{top:0;transform:rotate(-45deg)}
  .site-nav-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* DOM の並びはロゴ→トグル→メニュー→ボタン。狭い幅ではボタンをトグルの左に出す */
  .site-cta{order:2}
  .site-nav-toggle{order:3}

  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 64px);overflow-y:auto;margin:0;background:var(--white);border-bottom:3px solid var(--black)}
  .site-nav-toggle[aria-expanded="true"]~.site-nav{display:block}
  .site-nav-list{display:block;padding:4px 16px 12px}
  .site-nav-list>li{border-bottom:1px solid var(--line)}
  .site-nav-list>li:last-child{border-bottom:0}
  .site-nav-list>li>a,
  .site-nav-service-toggle{width:100%;padding:14px 4px;border-radius:0;text-align:left;font-size:16px}
  .site-nav-list>li>a:hover,
  .site-nav-service-toggle:hover{background:none}
  .site-service-menu{position:static;width:auto;padding:0 4px 12px 16px;grid-template-columns:1fr;gap:8px;border:0;border-radius:0}
  .site-service-all{margin:0;padding-bottom:8px}

  .site-footer-in{padding:40px 16px 24px;gap:28px}
}

/* ================= 高さの低い画面（横向きのスマホなど）ではヘッダーを追従させない。本文の場所が狭くなりすぎるため ================= */
@media (max-height:500px){
  html{scroll-padding-top:0}
  .site-header{position:relative}
}

/* ================= ロゴを最小幅の手前でシルエット＋文字に替える幅 ================= */
@media (max-width:600px){
  .site-logo-full{display:none}
  .site-logo-sp{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:.04em;white-space:nowrap}
  .site-logo-sp img{display:block;width:auto;height:34px}
  .site-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:360px){
  .site-header-in{gap:8px;padding:0 12px}
  .site-logo-sp{font-size:15px}
  .site-logo-sp img{height:30px}
  .site-cta{padding:8px 10px;font-size:13px}
  .site-footer-nav{grid-template-columns:1fr}
}

/* =====================================================================
   ページの部品。種類と使い方は templates/components.html と対応させる
   ===================================================================== */

/* ---- セクションと文字の部品 ---- */
.section{padding:80px 0}
.section-soft{background:var(--soft)}
.section .wrap>:last-child{margin-bottom:0}
.lead{font-size:18px}
.point{font-family:var(--font-head);font-weight:700;font-size:18px}
.note{font-size:14px;color:var(--ink-2)}
.more{margin-top:28px;font-weight:700}
.more a::after,
.card-more a::after{content:"→";margin-left:.4em}

/* ---- 下層ページの見出し（トップ以外のページの先頭） ---- */
.page-head{padding:56px 0 48px;background:var(--soft);border-bottom:3px solid var(--black)}
.page-head .wrap>:last-child{margin-bottom:0}
.page-title{font-size:38px;line-height:1.4;margin-bottom:20px}
.page-label{display:block;margin-bottom:6px;font-size:17px;color:var(--ink-2)}

/* ---- ボタン ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:12px 16px}
.btn{display:inline-block;padding:14px 28px;border:2px solid var(--black);border-radius:var(--radius);background:var(--black);color:var(--yellow);font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.4;text-decoration:none}
.btn-sub{background:var(--white);color:var(--black)}
.btn:hover{text-decoration:underline}

/* ---- ファーストビュー（黄色の面。トップだけ） ---- */
.hero{background:var(--yellow);border-bottom:3px solid var(--black)}
.hero-in{display:grid;grid-template-columns:1fr 360px;align-items:center;gap:48px;padding-top:72px;padding-bottom:72px}
.hero-title{font-size:44px;line-height:1.4;margin-bottom:20px}
.hero-lead{font-size:18px;margin-bottom:32px}
.hero-img{display:block;width:100%;border:3px solid var(--black);border-radius:var(--radius)}

/* ---- カード ---- */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0 0 28px;padding:0}
.card-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{display:flex;flex-direction:column;height:100%;padding:24px;background:var(--white);border:2px solid var(--black);border-radius:var(--radius)}
.card>:last-child{margin-bottom:0}
.card-title{font-size:19px;margin-bottom:.5em}
.card-link{color:var(--black);text-decoration:none}
.card-link .card-title::after{content:"→";margin-left:.4em}
.card-link:hover .card-title{text-decoration:underline}
.card-price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-weight:700}
.card-more{list-style:none;margin:0;padding:0;font-weight:700}
.group-title{margin:44px 0 16px;font-size:22px}

/* ---- チェックの一覧 ---- */
.check-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px 20px;list-style:none;margin:0 0 28px;padding:0}
.check-list li{position:relative;display:flex;align-items:center;padding:14px 16px 14px 50px;background:var(--white);border:2px solid var(--black);border-radius:var(--radius);font-weight:700}
.check-list li::before{content:"";position:absolute;left:20px;top:50%;width:8px;height:15px;margin-top:-10px;border-right:3px solid var(--black);border-bottom:3px solid var(--black);transform:rotate(45deg)}

/* ---- 境目の図 ---- */
.between{display:grid;grid-template-columns:1fr 1fr;gap:24px 72px;margin:32px 0 20px}
.between-side{position:relative;margin:0;padding:18px 20px;background:var(--white);border:2px dashed var(--black);border-radius:var(--radius);text-align:center}
.between-side:first-child::after{content:"⇄";position:absolute;left:100%;top:50%;width:72px;margin-top:-.7em;font-size:28px;font-weight:700;line-height:1.4;text-align:center}
.between-main{grid-column:1/-1;width:100%;max-width:520px;margin:0 auto;padding:20px 24px;background:var(--white);border:3px solid var(--black);border-radius:var(--radius);text-align:center}
.between-main img{display:block;width:auto;height:44px;margin:0 auto 8px}
.between-who{display:block;margin-bottom:4px;font-family:var(--font-head);font-weight:700}

/* ---- オレンジの強調ラベル。オレンジを出せるのはこのクラスだけ（1画面に1か所まで） ---- */
.accent{display:inline-block;padding:0 .9em;border-radius:999px;background:var(--orange);color:var(--black);font-weight:700}

/* ---- 数字 ---- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 28px}
.stat{display:flex;flex-direction:column-reverse;padding:24px;background:var(--white);border:2px solid var(--black);border-radius:var(--radius);text-align:center}
.stat dd{margin:0;font-family:var(--font-head);font-weight:700;font-size:44px;line-height:1.3}

/* ---- 手順 ---- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step;list-style:none;margin:0 0 28px;padding:0}
.step{counter-increment:step;padding:24px;border:2px solid var(--black);border-radius:var(--radius)}
.step::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:12px;border-radius:50%;background:var(--black);color:var(--yellow);font-family:var(--font-head);font-weight:700;font-size:18px}
.step>:last-child{margin-bottom:0}
.step-title{font-size:19px;margin-bottom:.4em}

/* ---- 記事の一覧 ---- */
.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.post-list li{border-bottom:1px solid var(--line)}
.post-list a{display:flex;gap:4px 24px;padding:16px 4px;text-decoration:none}
.post-list time{flex:0 0 8.5em;color:var(--ink-2);font-size:14px;line-height:1.85;padding-top:1px}
.post-list a:hover span{text-decoration:underline}

/* ---- 表 ---- */
.table-wrap{margin:0 0 28px;background:var(--white);border:2px solid var(--black);border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse}
.table th,
.table td{min-width:8em;padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table thead th{border-bottom:2px solid var(--black);font-family:var(--font-head)}
.table tbody tr:last-child>*{border-bottom:0}

/* ---- 注意書きの枠 ---- */
.callout{margin:0 0 28px;padding:20px 24px;background:var(--white);border:2px solid var(--black);border-left-width:8px;border-radius:var(--radius)}
.callout>:last-child{margin-bottom:0}

/* ---- ページへのリンクの一覧 ---- */
.link-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 20px;list-style:none;margin:0 0 28px;padding:0}
.link-list a{display:block;height:100%;align-content:center;padding:14px 16px;background:var(--white);border:2px solid var(--black);border-radius:var(--radius);font-weight:700;text-decoration:none}
.link-list a::after{content:"→";margin-left:.4em}
.link-list a:hover{text-decoration:underline}

/* ---- ご相談フォーム ---- */
.form{max-width:760px}
.form-field{min-width:0;margin:0 0 28px;padding:0;border:0}
.form-field>:last-child{margin-bottom:0}
.form-label{display:block;margin-bottom:8px;padding:0;font-family:var(--font-head);font-weight:700;font-size:17px}
.form-req,
.form-opt{display:inline-block;margin-left:10px;padding:0 .7em;border:1px solid var(--black);border-radius:999px;font-family:var(--font-body);font-size:12px;line-height:1.7;vertical-align:2px;white-space:nowrap}
.form-req{background:var(--black);color:var(--yellow)}
.form-opt{background:var(--white)}
.form input[type="text"],
.form input[type="email"],
.form textarea{display:block;width:100%;margin:0 0 8px;padding:12px 14px;background:var(--white);border:2px solid var(--black);border-radius:var(--radius);color:var(--black);font:inherit}
.form textarea{resize:vertical}
.form ::placeholder{color:var(--ink-2)}
.form .note{margin-bottom:8px}
.form-choices{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0 0 8px}
.form-choices label,
.form-check{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:var(--white);border:2px solid var(--black);border-radius:var(--radius);font-weight:700;cursor:pointer}
.form-choices input,
.form-check input{width:20px;height:20px;margin:0;accent-color:var(--black)}
button.btn{cursor:pointer}

/* ---- 締めの相談ブロック（黄色の帯。全ページの最後） ---- */
.cta-band{padding:72px 0;background:var(--yellow);border-top:3px solid var(--black);text-align:center}
.cta-band h2{margin-bottom:12px;padding-bottom:0;background:none}
.cta-band .btn-row{justify-content:center;margin:28px 0 16px}
.cta-band-hours{margin:0;font-size:14px}

@media (max-width:1000px){
  .wrap{padding:0 16px}
  .hero-in{grid-template-columns:1fr 280px;gap:32px}
  .hero-title{font-size:36px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
}

@media (max-width:760px){
  h2{font-size:24px}
  .section{padding:56px 0}
  .page-head{padding:40px 0 36px}
  .page-title{font-size:28px}
  .page-label{font-size:15px}
  /* 狭い幅では列を並べず、行ごとに縦に積む。列名は td の data-label から出す */
  .table thead{display:none}
  .table,
  .table tbody,
  .table tr,
  .table th,
  .table td{display:block}
  .table tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .table tbody tr:last-child{border-bottom:0}
  .table th,
  .table td{min-width:0;padding:0;border:0}
  .table tbody th{margin-bottom:6px;font-family:var(--font-head)}
  .table td+td{margin-top:8px}
  .table td::before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:var(--ink-2)}
  .hero-in{grid-template-columns:1fr;gap:24px;padding-top:40px;padding-bottom:48px}
  .hero-img{order:-1;width:140px}
  .hero-title{font-size:30px}
  .hero-lead{font-size:16px}
  .btn-row .btn{flex:1 1 auto;text-align:center}
  .card-grid,
  .card-grid-2,
  .stats{grid-template-columns:1fr}
  .between{grid-template-columns:1fr;gap:48px}
  .between-side:first-child::after{left:50%;top:100%;margin:6px 0 0 -36px;transform:rotate(90deg)}
  .stat dd{font-size:36px}
  .post-list a{flex-direction:column}
  .post-list time{flex:none}
  .cta-band{padding:56px 0}
}

@media (max-width:360px){
  .hero-title{font-size:26px}
}