/*
  札幌ヤマザキスタックサービス — 共有スタイルシート（コラム記事用）
  index.html とデザイントークン（配色・タイポグラフィ・コンポーネント）を統一するための
  ローカル共有CSS。外部フォント・外部CDN等への参照は一切含まない。
  index.html 本体はこのファイルを読み込まず、引き続きインラインCSSで完全自己完結する。
*/

:root{
  --navy-950:#081426;
  --navy-900:#0b1f3a;
  --navy-800:#11294d;
  --navy-700:#173763;
  --ice-100:#eaf4fb;
  --ice-200:#d7ebf7;
  --ice-300:#b9dcef;
  --blue-accent:#3f8fd1;
  --amber-500:#ff7a1a;
  --amber-600:#e8630b;
  --amber-100:#fff1e2;
  --text-dark:#0c1a2b;
  --text-mute:#4a5b70;
  --white:#ffffff;
  --radius-lg:18px;
  --radius-md:12px;
  --shadow-1:0 6px 20px rgba(8,20,38,0.18);
  --shadow-2:0 2px 8px rgba(8,20,38,0.12);
  --maxw:960px;
  --maxw-article:760px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  padding:0;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Yu Gothic","YuGothic",system-ui,-apple-system,sans-serif;
  color:var(--text-dark);
  background:var(--ice-100);
  line-height:1.7;
  overflow-x:hidden;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
.icon{width:1.4em;height:1.4em;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.wrap-article{max-width:var(--maxw-article);margin:0 auto;padding:0 20px;}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;}

h1,h2,h3{line-height:1.4;margin:0 0 .6em;}
p{margin:0 0 1em;}
.section{padding:44px 0;}
.section-alt{background:var(--white);}
.eyebrow{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  color:var(--amber-600); background:var(--amber-100); padding:4px 12px;border-radius:999px;
  margin-bottom:12px;
}
h2.title{font-size:clamp(1.3rem,4vw,1.8rem);font-weight:800;color:var(--navy-900);}
.lead{color:var(--text-mute);font-size:1rem;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:14px;font-weight:800;text-decoration:none;
  font-size:1rem;
}
.btn-primary{
  background:var(--amber-500);color:#1a0e00;
  box-shadow:0 5px 0 var(--amber-600), var(--shadow-1);
}
.btn-outline{
  background:rgba(255,255,255,0.06);color:var(--ice-100);
  border:1.5px solid rgba(255,255,255,0.35);
}
.btn-outline.on-white{background:var(--white);border-color:var(--ice-300);color:var(--navy-900);}

/* ===== Sticky bottom CTA ===== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  display:flex;gap:8px;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--navy-950);
  box-shadow:0 -6px 20px rgba(0,0,0,0.35);
}
.sticky-cta a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 10px;border-radius:12px;font-weight:800;font-size:1.02rem;
  text-decoration:none;white-space:nowrap;
}
.sticky-cta .call{
  background:var(--amber-500);color:#1a0e00;
  box-shadow:0 4px 0 var(--amber-600), var(--shadow-1);
}
.sticky-cta .line{
  background:#06C755;color:#fff;
  flex:0 0 42%;
  box-shadow:0 4px 0 #04a344;
}

/* ===== Header ===== */
.top-header{
  background:var(--navy-950);color:var(--ice-100);
  padding:12px 0;
}
.top-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;text-decoration:none;color:inherit;}
.brand .icon{color:var(--ice-300);width:1.6em;height:1.6em;}
.top-phone{
  display:flex;align-items:center;gap:6px;font-weight:800;color:var(--amber-500);
  text-decoration:none;font-size:1rem;
}

/* ===== Breadcrumb ===== */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:.8rem;color:var(--ice-200);margin-bottom:14px;
}
.breadcrumb a{color:var(--ice-200);text-decoration:underline;}
.breadcrumb .sep{color:rgba(255,255,255,0.4);}
.breadcrumb .current{color:var(--white);font-weight:700;text-decoration:none;}

/* ===== Article page hero (banner) ===== */
.page-hero{
  background:radial-gradient(120% 140% at 10% -10%, #163457 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  color:var(--ice-100);
  padding:30px 0 34px;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 85% 20%, rgba(63,143,209,0.35), transparent 55%);
}
.page-hero .wrap-article{position:relative;}
.page-hero h1{
  font-size:clamp(1.35rem,4.6vw,2rem);
  font-weight:800;
  color:var(--white);
  margin-bottom:.4em;
}
.page-hero .lead{color:var(--ice-200);font-size:1rem;margin-bottom:20px;}
.page-hero-cta{display:flex;flex-wrap:wrap;gap:10px;}
.page-hero-cta .btn{padding:12px 18px;font-size:.92rem;}

/* ===== Article body typography ===== */
.article-body h2{
  font-size:clamp(1.1rem,3.4vw,1.4rem);color:var(--navy-900);font-weight:800;
  margin-top:1.6em;border-left:5px solid var(--amber-500);padding-left:.6em;
}
.article-body h2:first-child{margin-top:0;}
.article-body h3{font-size:1.02rem;color:var(--navy-900);font-weight:700;margin-top:1.2em;}
.article-body p{color:var(--text-dark);font-size:.98rem;}
.article-body ul,.article-body ol{
  margin:0 0 1.2em;padding-left:1.4em;font-size:.96rem;color:var(--text-dark);
}
.article-body li{margin-bottom:.5em;}
.article-body strong{color:var(--navy-900);}

/* Note / warning box */
.note-box{
  margin:18px 0;background:var(--amber-100);border:1px solid #f3caa0;
  border-radius:var(--radius-md);padding:14px 16px;font-size:.9rem;color:#7a3e08;
  display:flex;gap:10px;align-items:flex-start;
}
.note-box .icon{color:var(--amber-600);width:1.3em;height:1.3em;margin-top:2px;flex-shrink:0;}
.note-box.info{background:var(--ice-100);border-color:var(--ice-300);color:var(--text-dark);}
.note-box.info .icon{color:var(--blue-accent);}

/* ===== End-of-article CTA block ===== */
.end-cta{
  margin-top:34px;background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  color:var(--ice-100);border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow-1);
}
.end-cta h2{color:#fff;border:none;padding:0;margin-top:0;font-size:1.2rem;}
.end-cta p{color:var(--ice-200);margin-bottom:16px;font-size:.95rem;}
.end-cta .cta-row{display:flex;flex-wrap:wrap;gap:10px;}
.end-cta .btn{padding:13px 18px;font-size:.92rem;}
.end-cta .btn-outline{background:rgba(255,255,255,0.08);}

/* ===== Related articles ===== */
.related-links{margin-top:30px;}
.related-links h2{margin-top:0;}
.related-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;}
.related-list a{
  display:block;background:var(--ice-100);border:1px solid var(--ice-300);
  border-radius:var(--radius-md);padding:14px 16px;text-decoration:none;
  color:var(--navy-900);font-weight:700;font-size:.94rem;
}
.related-list a .tag{
  display:block;font-weight:500;color:var(--text-mute);font-size:.8rem;margin-top:4px;
}

/* ===== Article card grid (used on index.html articles hub section) ===== */
.article-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px;}
@media(min-width:640px){ .article-grid{grid-template-columns:repeat(2,1fr);} }
.article-card{
  display:block;background:var(--white);border:1px solid var(--ice-300);
  border-radius:var(--radius-lg);padding:20px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-2);
}
.article-card h3{margin:0 0 8px;font-size:1.02rem;color:var(--navy-900);}
.article-card p{margin:0;font-size:.88rem;color:var(--text-mute);}
.article-card .read-more{
  display:inline-block;margin-top:10px;font-size:.85rem;font-weight:700;color:var(--blue-accent);
}

/* ===== Company table (shared with index.html) ===== */
.company-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:.92rem;}
.company-table th,.company-table td{
  text-align:left;padding:12px 10px;border-bottom:1px solid var(--ice-300);vertical-align:top;
}
.company-table th{width:34%;color:var(--navy-900);font-weight:700;white-space:nowrap;}
.company-table td{color:var(--text-mute);}

/* ===== Footer ===== */
footer{background:var(--navy-950);color:var(--ice-200);padding:34px 0 26px;}
footer .foot-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
footer .brand{color:#fff;margin-bottom:6px;}
footer .small{font-size:.8rem;color:#8296b0;margin-top:18px;}
footer a.foot-link{text-decoration:underline;color:var(--ice-200);}