/* つめづめホーム デモサイト スタイル */

@font-face{
  font-family:"Noto Sans JP";
  src:url("../fonts/NotoSansJP-400-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans JP";
  src:url("../fonts/NotoSansJP-700-subset.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Merriweather";
  src:url("../fonts/Merriweather-700-subset.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --color-main:#6B4A34;
  --color-sub:#F5EDE4;
  --color-accent:#2F6690;
  --color-accent-hover:#24506F;
  --color-text:#333333;
  --color-bg:#FFFFFF;
  --font-jp:"Noto Sans JP","Hiragino Sans",sans-serif;
  --font-en:"Merriweather",serif;
  --max-width:1140px;
  --gap-desktop:80px;
  --gap-mobile:48px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-jp);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.8;
  font-size:18px;
}

img{max-width:100%;display:block;}

a{color:inherit;text-decoration:none;}

ul{list-style:none;}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}

h1,h2,h3{
  font-family:var(--font-jp);
  font-weight:700;
  line-height:1.5;
  color:var(--color-main);
}

h1{font-size:30px;line-height:1.4;}
h2{font-size:22px;}
h3{font-size:20px;font-weight:600;}

@media(min-width:768px){
  h1{font-size:36px;}
  h2{font-size:26px;}
}

p{font-size:18px;line-height:1.8;}

.caption{font-size:15px;line-height:1.6;color:#5A5049;}

.num-en{
  font-family:var(--font-en);
  font-weight:700;
  font-size:28px;
  line-height:1.2;
  color:var(--color-accent);
}

/* ===== ヘッダー ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#FFFFFF;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
/* 見本帯（デモ標準装備）が固定表示されている間は、その分だけ下にずらす */
body.omc-has-bar .site-header{top:44px;}
@media(max-width:640px){
  body.omc-has-bar .site-header{top:40px;}
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;padding-top:8px;padding-bottom:8px;
}
.site-logo{font-size:16px;font-weight:700;color:var(--color-main);line-height:1.3;}
.site-nav{display:none;}
.site-nav ul{display:flex;gap:24px;}
.site-nav a{font-size:15px;font-weight:600;}
.header-tel{
  display:flex;align-items:center;gap:8px;
  background:var(--color-accent);color:#fff;
  padding:10px 16px;border-radius:8px;
  font-weight:700;font-size:16px;
  white-space:nowrap;
}
.header-tel:hover{background:var(--color-accent-hover);}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;margin-right:-12px;
  background:none;border:none;font-size:24px;
  color:var(--color-main);cursor:pointer;
}

@media(min-width:768px){
  .site-nav{display:block;}
  .nav-toggle{display:none;}
}

.mobile-nav{
  display:none;
  background:var(--color-sub);
  padding:16px 20px;
}
.mobile-nav.open{display:block;}
.mobile-nav ul{display:flex;flex-direction:column;gap:12px;}
.mobile-nav a{font-weight:600;}

@media(min-width:768px){
  .mobile-nav{display:none !important;}
}

/* ===== ボタン ===== */
.btn{
  display:inline-block;
  border-radius:8px;
  font-weight:700;
  text-align:center;
  cursor:pointer;
}
.btn-primary{
  background:var(--color-accent);
  color:#fff;
  padding:14px 28px;
}
.btn-primary:hover{background:var(--color-accent-hover);}
.btn-secondary{
  background:transparent;
  border:2px solid var(--color-main);
  color:var(--color-main);
  padding:12px 24px;
}
.btn-secondary:hover{background:var(--color-sub);}

.cta-group{
  display:flex;flex-wrap:wrap;gap:16px;
  margin-top:24px;
}

/* ===== セクション共通 ===== */
section{
  padding:var(--gap-mobile) 0;
}
@media(min-width:768px){
  section{padding:var(--gap-desktop) 0;}
}
.section-title{
  text-align:center;
  margin-bottom:32px;
}
.section-bg-sub{background:var(--color-sub);}

/* ===== ヒーロー ===== */
.hero{
  position:relative;
}
.hero-img{width:100%;height:auto;}
.hero-body{
  padding:32px 20px;
  background:var(--color-sub);
  text-align:center;
}
.hero-body h1{margin-bottom:16px;}
.hero-body p{margin-bottom:8px;}

/* ===== 悩み提示 ===== */
.pain{
  text-align:center;
}
.pain p{max-width:640px;margin:0 auto;}

/* ===== カード（サービス4カテゴリ） ===== */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media(min-width:768px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
}
.card{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  padding:24px;
}
.card h3{margin-bottom:8px;color:var(--color-main);}

/* ===== 実績 ===== */
.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  text-align:center;
  margin-top:32px;
}
@media(min-width:768px){
  .stats{grid-template-columns:repeat(3,1fr);}
}
.stats .stat-label{font-size:16px;margin-top:4px;}
.num-suffix{font-family:var(--font-jp);font-weight:700;font-size:22px;color:var(--color-accent);margin-left:2px;}

/* ===== 画像の比率固定（間延び防止） ===== */
.media{overflow:hidden;border-radius:12px;background:var(--color-sub);}
.media img{width:100%;height:100%;object-fit:cover;display:block;}
.media-16x9{aspect-ratio:16/9;}
.media-3x2{aspect-ratio:3/2;}

/* ===== アイコン ===== */
.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.card-icon{width:40px;height:40px;color:var(--color-main);margin-bottom:12px;}
.header-tel .icon{width:18px;height:18px;stroke:#fff;}
.nav-toggle .icon{width:28px;height:28px;color:var(--color-main);}

/* ===== サービス項目（画像＋テキストの2カラム） ===== */
.service-item{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
}
@media(min-width:768px){
  .service-item{grid-template-columns:1fr 1fr;gap:40px;}
  .service-item.reverse .service-item-media{order:2;}
}
.service-item-body h2{margin-bottom:8px;}
.service-item-body .lead{font-weight:700;color:var(--color-main);margin-bottom:8px;}

/* ===== Instagram埋め込み ===== */
.insta-grid{
  display:grid;grid-template-columns:1fr;gap:20px;justify-items:center;
}
@media(min-width:900px){
  .insta-grid{grid-template-columns:repeat(3,1fr);align-items:start;}
}
.insta-grid .instagram-media{
  margin:0 !important;min-width:0 !important;width:100% !important;max-width:540px !important;
}
.insta-fallback{
  border:1px solid #e5ded6;border-radius:12px;padding:24px;text-align:center;
  background:#fff;width:100%;max-width:540px;
}

.achievement-img{border-radius:12px;overflow:hidden;margin-top:32px;}

/* ===== アクセス ===== */
.access-table{width:100%;border-collapse:collapse;margin-top:16px;}
.access-table th,.access-table td{
  text-align:left;padding:12px;border-bottom:1px solid #eee;font-size:17px;
}
.access-table th{width:110px;color:var(--color-main);font-weight:700;}

/* ===== フッターCTA ===== */
.footer-cta{
  background:var(--color-main);
  color:#fff;
  text-align:center;
}
.footer-cta h2{color:#fff;}
.footer-cta .btn-primary{background:var(--color-accent);}
.footer-cta .btn-secondary{border-color:#fff;color:#fff;}
.footer-cta .btn-secondary:hover{background:rgba(255,255,255,0.15);}
.footer-cta .cta-group{justify-content:center;}

/* ===== サイトフッター ===== */
.site-footer{
  background:#fff;
  padding:24px 0;
  text-align:center;
  font-size:15px;
  color:#5A5049;
}

/* ===== Q&A ===== */
.faq-item{
  border-bottom:1px solid #eee;
  padding:16px 0;
}
.faq-item h3{margin-bottom:8px;}

/* ===== 会社概要 ===== */
.company-photo{border-radius:12px;overflow:hidden;margin-bottom:24px;}

/* ===== 見本帯（デモ標準装備で自動付与されるが土台を用意） ===== */
.demo-badge{
  background:#fff3cd;color:#7a5b00;text-align:center;
  font-size:13px;padding:6px 12px;
}