/* =========================================================
   ページ制作用スニペット集 ／ ページ専用スタイル
   base.css（ヘッダー・フッター・ボタン等）を前提に読み込みます。
========================================================= */

/* =========================================================
   ページヘッダー（このページ独自の見出しエリア）
========================================================= */
.snip-hero{padding:64px 0 40px;background:var(--bg-soft);border-bottom:1px solid var(--line);}
.snip-hero__title{font-size:30px;font-weight:700;color:var(--ink);margin:0 0 14px;}
.snip-hero__desc{font-size:14px;color:var(--muted);max-width:680px;margin:0;line-height:1.9;}

/* 目次（ヘッダー直下に追従する横スクロールチップ） */
.snip-toc{position:sticky;top:124px;z-index:25;background:#fff;border-bottom:1px solid var(--line);}
.snip-toc__list{list-style:none;display:flex;gap:8px;margin:0;padding:14px 0;overflow-x:auto;}
.snip-toc__list li{flex:0 0 auto;}
.snip-toc__list a{
  display:inline-block;white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--muted);
  border:1px solid var(--line);padding:8px 16px;text-decoration:none;
}
.snip-toc__list a:hover{border-color:var(--green);color:var(--green);}

/* =========================================================
   カテゴリセクション共通
========================================================= */
.cat{padding:76px 0;border-bottom:1px solid var(--line);}
.cat--soft{background:var(--bg-soft);}
.cat__num{font-size:12px;color:#bbb;font-weight:700;letter-spacing:.14em;margin-bottom:10px;}
.cat__title{font-size:23px;font-weight:700;color:var(--ink);margin:0 0 10px;}
.cat__desc{font-size:13.5px;color:var(--muted);max-width:1200px;margin:0 0 40px;line-height:2.2;}

/* サブグループ見出し（カテゴリ内の小見出し：「2カラム」「3カラム」など） */
.subhead{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 16px;padding-left:12px;border-left:3px solid var(--green);}
.subhead + .subhead, .demo-grid + .subhead, .snip + .subhead, .code-caption-grid + .subhead{margin-top:36px;}

/* =========================================================
   共通：コード表示つきスニペットカード（.snip）
   カード・表・ステップ・CTA・アコーディオンなど「まとまった実装」用
========================================================= */
.snip{border:1px solid var(--line);background:#fff;margin-bottom:28px;}
.snip__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--bg-soft);
}
.snip__label{font-size:13.5px;font-weight:700;color:var(--ink);}
.snip__label small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:4px;}
.snip__btn{
  flex:0 0 auto;font-size:12px;color:var(--muted);background:#fff;border:1px solid #ddd;
  padding:7px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.snip__btn:hover{border-color:var(--green);color:var(--green);}
.snip__btn.is-copied{border-color:var(--green);color:var(--green);background:var(--green-tint);}
.snip__preview{padding:32px;}
.snip__preview--soft{background:var(--bg-soft);}
.snip__preview--dark{background:#2a2a2a;}
.snip__code{
  margin:0;padding:22px;background:#1c1c1c;color:#d8d8d8;font-size:12.5px;line-height:1.8;
  overflow-x:auto;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  border-top:1px solid #000;white-space:pre;
}
.snip__code[hidden]{display:none;}

/* =========================================================
   1. カラムレイアウト
========================================================= */
.demo-grid{display:grid;gap:16px;margin-bottom:14px;}
.demo-box{
  background:var(--green-tint);color:var(--green-dark);border:1px dashed #b9d9c6;
  font-size:12.5px;font-weight:700;text-align:center;padding:22px 8px;
  display:flex;align-items:center;justify-content:center;min-height:60px;
}
.demo-caption{font-size:12px;color:var(--muted);font-family:"SFMono-Regular",Consolas,monospace;margin:0 0 30px;}

/* 列数：2〜5（MAX5）＋ 比率違い。使う時は .grid と .cols-* を組み合わせます */
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-2-1-2{grid-template-columns:1fr 2fr;}
.cols-2-2-1{grid-template-columns:2fr 1fr;}
.cols-2-1-3{grid-template-columns:1fr 3fr;}
.cols-2-3-1{grid-template-columns:3fr 1fr;}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-3-1-1-2{grid-template-columns:1fr 1fr 2fr;}
.cols-3-2-1-1{grid-template-columns:2fr 1fr 1fr;}
.cols-3-1-2-1{grid-template-columns:1fr 2fr 1fr;}
.cols-4{grid-template-columns:repeat(4,1fr);}
.cols-4-1-1-1-2{grid-template-columns:1fr 1fr 1fr 2fr;}
.cols-5{grid-template-columns:repeat(5,1fr);}

/* スマホでは基本すべて1カラムに縦積み（必要に応じて調整してください） */
@media (max-width:700px){
  [class*="cols-"]{grid-template-columns:1fr!important;}
}

/* =========================================================
   2. カードレイアウト
========================================================= */
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);overflow:hidden;height:100%;
}
.card__img{background:linear-gradient(135deg,#e0e0e0,#f2f2f2);aspect-ratio:16/9;}
.card__body{padding:26px;display:flex;flex-direction:column;flex:1;}
.card__eyebrow{font-size:11px;font-weight:700;color:var(--green);letter-spacing:.08em;margin-bottom:10px;}
.card__title{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 10px;}
.card__text{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.8;flex:1;}
.card__link{font-size:13px;color:var(--green);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:6px;}
.card__link:hover{gap:10px;}

/* アイコン型カード */
.card--icon{align-items:flex-start;padding:30px;border:1px solid var(--line);}
.card--icon .card__icon{
  width:52px;height:52px;background:var(--green-tint);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.card--icon .card__title{font-size:15px;margin-bottom:8px;}
.card--icon .card__text{font-size:13px;margin-bottom:0;}

/* 横並び型カード（画像左・本文右） */
.card--h{flex-direction:row;}
.card--h .card__img{width:38%;flex:0 0 38%;aspect-ratio:auto;}
.card--h .card__body{padding:24px;}
@media (max-width:560px){
  .card--h{flex-direction:column;}
  .card--h .card__img{width:100%;flex:0 0 auto;aspect-ratio:16/9;}
}

/* =========================================================
   3. デザインタイトル
========================================================= */
.heading-demo{display:flex;flex-direction:column;gap:22px;}
.heading-demo h1,.heading-demo h2,.heading-demo h3,
.heading-demo h4,.heading-demo h5,.heading-demo h6{margin:0;color:var(--ink);font-weight:700;}
.heading-demo h1{font-size:36px;}
.heading-demo h2{font-size:28px;}
.heading-demo h3{font-size:22px;}
.heading-demo h4{font-size:18px;}
.heading-demo h5{font-size:15px;}
.heading-demo h6{font-size:13px;letter-spacing:.06em;color:var(--muted);}
.heading-demo .tag-lv{
  display:inline-block;font-size:10px;font-weight:700;color:#fff;background:#bbb;
  padding:2px 7px;margin-right:10px;vertical-align:middle;letter-spacing:.05em;
}

/* タイトル装飾バリエーション */
.title-a{font-size:24px;font-weight:700;color:var(--ink);margin:0;position:relative;padding-bottom:16px;}
.title-a::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--green);}
.title-b{font-size:24px;font-weight:700;color:var(--ink);margin:0;text-align:center;padding-bottom:18px;position:relative;}
.title-b::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:1px;background:var(--green);}
.title-b span{display:block;font-size:12px;font-weight:700;color:var(--green);letter-spacing:.16em;margin-bottom:10px;}
.title-c{display:flex;align-items:baseline;gap:16px;margin:0;}
.title-c em{font-style:normal;font-size:34px;font-weight:700;color:var(--green-tint);color:#d8ead9;}
.title-c strong{font-size:22px;font-weight:700;color:var(--ink);}

/* =========================================================
   4. テーブルデザイン
========================================================= */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* 会社概要（定義リスト型） */
.tbl-profile{width:100%;border-collapse:collapse;font-size:13.5px;min-width:480px;}
.tbl-profile th,.tbl-profile td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.tbl-profile th{width:160px;color:var(--muted);font-weight:500;background:var(--bg-soft);white-space:nowrap;}
.tbl-profile td{color:var(--text);}

/* スペック比較表 */
.tbl-spec{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px;}
.tbl-spec th,.tbl-spec td{padding:14px 18px;border:1px solid var(--line);text-align:left;}
.tbl-spec thead th{background:var(--ink);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.03em;}
.tbl-spec tbody th{background:var(--bg-soft);font-weight:500;color:var(--muted);width:180px;}
.tbl-spec tbody tr:nth-child(even) td{background:#fafafa;}

/* 料金表（列強調あり） */
.tbl-price{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px;}
.tbl-price th,.tbl-price td{padding:16px 20px;border:1px solid var(--line);text-align:center;}
.tbl-price thead th{background:#fff;font-size:14px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--line);}
.tbl-price tbody th{text-align:left;color:var(--muted);font-weight:500;background:var(--bg-soft);}
.tbl-price .is-recommend{background:var(--green-tint);position:relative;}
.tbl-price thead .is-recommend{color:var(--green);}
.tbl-price .plan-badge{
  display:block;font-size:10px;font-weight:700;color:#fff;background:var(--green);
  padding:3px 0;margin:-16px -20px 12px;letter-spacing:.05em;
}

/* =========================================================
   5. ステップデザイン（3パターン）
========================================================= */
/* パターンA：横並び数字ステップ */
.steps-a{display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:stepA;}
.steps-a__item{position:relative;padding:0 18px;text-align:center;}
.steps-a__item::before{
  counter-increment:stepA;content:counter(stepA);
  width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
  margin:0 auto 16px;position:relative;z-index:2;
}
.steps-a__item::after{
  content:"";position:absolute;top:22px;left:calc(-50% + 22px);width:100%;height:1px;background:#ddd;z-index:1;
}
.steps-a__item:first-child::after{display:none;}
.steps-a__title{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.steps-a__text{font-size:12.5px;color:var(--muted);margin:0;line-height:1.7;}
@media (max-width:700px){
  .steps-a{grid-template-columns:1fr;gap:36px 0;}
  .steps-a__item::after{display:none;}
}

/* パターンB：縦タイムライン */
.steps-b{list-style:none;margin:0;padding:0;counter-reset:stepB;}
.steps-b__item{position:relative;padding:0 0 40px 56px;}
.steps-b__item:last-child{padding-bottom:0;}
.steps-b__item::before{
  counter-increment:stepB;content:counter(stepB,decimal-leading-zero);
  position:absolute;left:0;top:0;width:40px;height:40px;border:2px solid var(--green);color:var(--green);
  background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;z-index:2;
}
.steps-b__item::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:1px;background:var(--line);}
.steps-b__item:last-child::after{display:none;}
.steps-b__title{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 8px;}
.steps-b__text{font-size:13px;color:var(--muted);margin:0;line-height:1.8;}

/* パターンC：アイコン＋矢印フロー */
.steps-c{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;}
.steps-c__item{
  flex:1 1 0;min-width:150px;background:#fff;border:1px solid var(--line);padding:26px 18px;text-align:center;
}
.steps-c__icon{
  width:48px;height:48px;margin:0 auto 14px;background:var(--green-tint);color:var(--green);
  display:flex;align-items:center;justify-content:center;
}
.steps-c__title{font-size:13.5px;font-weight:700;color:var(--ink);margin:0;}
.steps-c__arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;color:#ccc;}
@media (max-width:700px){
  .steps-c{flex-direction:column;}
  .steps-c__arrow{width:100%;height:28px;transform:rotate(90deg);}
}

/* =========================================================
   6. CTAデザイン
========================================================= */
/* 1カラムCTA（ベースの.ctaを利用。差分のみ） */
.cta--sm .container{padding-top:56px;padding-bottom:56px;}

/* 2カラムCTA */
.cta2{background:var(--ink);}
.cta2 .container{padding:0;}
.cta2__inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;}
.cta2__text{padding:56px 56px;}
.cta2__eyebrow{font-size:12px;font-weight:700;color:#8fd0ab;letter-spacing:.14em;margin-bottom:14px;}
.cta2__title{font-size:24px;font-weight:700;color:#fff;margin:0 0 14px;}
.cta2__sub{font-size:13.5px;color:rgba(255,255,255,.7);margin:0;line-height:1.9;}
.cta2__action{padding:56px;background:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.cta2__phone{font-size:22px;font-weight:700;color:#fff;text-decoration:none;}
.cta2__phone span{display:block;font-size:11px;color:rgba(255,255,255,.55);font-weight:500;margin-bottom:4px;}
@media (max-width:700px){
  .cta2__inner{grid-template-columns:1fr;}
  .cta2__text,.cta2__action{padding:40px 28px;}
}

/* =========================================================
   7. その他パーツ
========================================================= */

/* バッジ／ラベル */
.badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:5px 12px;letter-spacing:.03em;border-radius:2px;}
.badge--solid{background:var(--green);color:#fff;}
.badge--line{background:#fff;color:var(--green);border:1px solid var(--green);}
.badge--soft{background:var(--green-tint);color:var(--green-dark);}
.badge--gray{background:#eee;color:#777;}
.badge--warn{background:#fff4e5;color:#b9720c;}
.badge--danger{background:#fdeaea;color:#c0392b;}
.badge--pill{border-radius:999px;}

/* アラート／メッセージボックス */
.alert{display:flex;gap:14px;padding:18px 20px;border-left:4px solid #999;background:#f5f5f5;font-size:13.5px;line-height:1.8;}
.alert__icon{flex:0 0 auto;width:22px;height:22px;margin-top:1px;}
.alert__title{font-weight:700;margin:0 0 4px;color:var(--ink);}
.alert__text{margin:0;color:var(--muted);}
.alert--info{border-color:#3b82c4;background:#eef5fb;}
.alert--info .alert__title{color:#2c638f;}
.alert--success{border-color:var(--green);background:var(--green-tint);}
.alert--success .alert__title{color:var(--green-dark);}
.alert--warn{border-color:#d99a1e;background:#fff8ea;}
.alert--warn .alert__title{color:#96690f;}
.alert--danger{border-color:#c0392b;background:#fdeaea;}
.alert--danger .alert__title{color:#a5311f;}

/* アコーディオン（FAQ） */
.accordion{border-top:1px solid var(--line);}
.accordion__item{border-bottom:1px solid var(--line);}
.accordion__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;background:none;border:none;text-align:left;cursor:pointer;font-family:inherit;
}
.accordion__q-text{font-size:14.5px;font-weight:700;color:var(--ink);display:flex;gap:14px;}
.accordion__q-mark{color:var(--green);font-weight:700;}
.accordion__icon{flex:0 0 auto;width:22px;height:22px;color:var(--green);transition:transform .25s ease;}
.accordion__item.is-open .accordion__icon{transform:rotate(45deg);}
.accordion__a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.accordion__item.is-open .accordion__a{max-height:400px;}
.accordion__a-inner{padding:0 4px 22px 34px;font-size:13.5px;color:var(--muted);line-height:1.9;}

/* タブ切り替え */
.tabs__nav{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.tabs__btn{
  font-family:inherit;font-size:13.5px;font-weight:500;color:var(--muted);background:none;
  border:none;border-bottom:2px solid transparent;padding:14px 20px;cursor:pointer;margin-bottom:-1px;
}
.tabs__btn.is-active{color:var(--green);border-bottom-color:var(--green);font-weight:700;}
.tabs__panel{display:none;padding:28px 4px 4px;font-size:13.5px;color:var(--muted);line-height:1.9;}
.tabs__panel.is-active{display:block;}

/* パンくずリスト */
.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:12.5px;color:var(--muted);}
.breadcrumb li{display:flex;align-items:center;gap:8px;}
.breadcrumb li:not(:last-child)::after{content:"/";color:#ccc;}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--green);}
.breadcrumb li:last-child{color:var(--ink);font-weight:500;}

/* ページネーション */
.pagination{list-style:none;display:flex;gap:6px;margin:0;padding:0;justify-content:center;}
.pagination a,.pagination span{
  min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--text);text-decoration:none;border:1px solid var(--line);
}
.pagination a:hover{border-color:var(--green);color:var(--green);}
.pagination .is-current{background:var(--green);border-color:var(--green);color:#fff;font-weight:700;}
.pagination .is-disabled{color:#ccc;pointer-events:none;}

/* お客様の声 */
.testimonial{background:#fff;border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;height:100%;}
.testimonial__quote{font-size:13.5px;color:var(--text);line-height:1.9;margin:0 0 22px;flex:1;}
.testimonial__quote::before{content:"“";color:var(--green);font-size:20px;font-weight:700;}
.testimonial__person{display:flex;align-items:center;gap:12px;}
.testimonial__avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#ddd,#eee);flex:0 0 auto;}
.testimonial__name{font-size:13px;font-weight:700;color:var(--ink);}
.testimonial__role{font-size:11.5px;color:var(--muted);}

/* チェックリスト（アイコンリスト） */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.checklist li{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--text);line-height:1.7;}
.checklist__icon{flex:0 0 auto;width:20px;height:20px;color:var(--green);margin-top:1px;}

/* 数値カウンター／実績スタッツ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stat{background:#fff;padding:30px 20px;text-align:center;}
.stat__num{font-size:32px;font-weight:700;color:var(--green);line-height:1;}
.stat__num span{font-size:16px;font-weight:500;margin-left:2px;}
.stat__label{font-size:12px;color:var(--muted);margin-top:10px;}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr);}}

/* プライシングカード */
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.pricing-card{border:1px solid var(--line);background:#fff;padding:32px 26px;display:flex;flex-direction:column;}
.pricing-card--main{border-color:var(--green);box-shadow:0 8px 24px rgba(28,122,73,.12);position:relative;}
.pricing-card__badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;
  font-size:11px;font-weight:700;padding:4px 14px;letter-spacing:.04em;
}
.pricing-card__name{font-size:14px;font-weight:700;color:var(--muted);margin:0 0 12px;}
.pricing-card__price{font-size:30px;font-weight:700;color:var(--ink);margin:0 0 4px;}
.pricing-card__price span{font-size:13px;font-weight:500;color:var(--muted);}
.pricing-card__note{font-size:11.5px;color:#999;margin:0 0 22px;}
.pricing-card__list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;}
.pricing-card__list li{font-size:12.5px;color:var(--text);display:flex;gap:8px;}

/* フォームパーツ */
.form-demo{display:flex;flex-direction:column;gap:20px;max-width:480px;}
.form-row label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.form-row .req{color:#c0392b;font-size:11px;margin-left:6px;font-weight:700;}
.form-row input[type="text"],.form-row input[type="email"],.form-row select,.form-row textarea{
  width:100%;font-family:inherit;font-size:13.5px;color:var(--text);padding:12px 14px;
  border:1px solid #ccc;background:#fff;outline:none;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--green);}
.form-row textarea{resize:vertical;min-height:100px;}
.form-radio-group,.form-check-group{display:flex;gap:20px;flex-wrap:wrap;}
.form-radio-group label,.form-check-group label{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;color:var(--text);margin:0;
}

/* ディバイダー（区切り線） */
.divider{border:none;border-top:1px solid var(--line);margin:0;}
.divider--thick{border-top-width:2px;}
.divider--dashed{border-top-style:dashed;}
.divider--label{display:flex;align-items:center;gap:16px;border:none;margin:0;}
.divider--label::before,.divider--label::after{content:"";flex:1;height:1px;background:var(--line);}
.divider--label span{font-size:11.5px;color:var(--muted);letter-spacing:.08em;}

/* =========================================================
   全体レスポンシブ調整
========================================================= */
@media (max-width:900px){
  .steps-a{grid-template-columns:repeat(2,1fr);}
  .pricing-cards{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
  .cat{padding:56px 0;}
  .snip__preview{padding:22px;}
  .card--h{flex-direction:column;}
  .pricing-cards{grid-template-columns:1fr;}
  .heading-demo h1{font-size:28px;}
}