@charset "UTF-8";
/* ==========================================================
   カートプラザひらの　/guide/ 共通スタイル
   guide.css  最終更新 2026-08-28
   ※ /guide/ 配下の全ページで読み込む
   ========================================================== */

:root{
  --red:#ff4d4d;
  --red-deep:#e60012;
  --sun:#ffd23f;
  --cream:#fffaf2;
  --peach:#fff0ec;
  --ink:#1e1c1b;
  --text:#3a3330;
  --sub:#766d69;
  --line:#efe2da;
  --white:#fff;
  --radius:22px;
  --shadow:0 8px 22px rgba(0,0,0,.07);
  --wrap:920px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.95;
  font-size:16px;
}
a{color:var(--red-deep)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:3px solid var(--line);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:11px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.brand{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--text);font-weight:900;min-width:0;
}
.brand-badge{
  background:#d3132a;display:inline-flex;align-items:center;
  padding:6px 9px;border-radius:7px;flex:none;
}
.brand-badge img{height:20px;width:auto}
.brand-name{white-space:nowrap;line-height:1.3}
.brand-name .en{
  display:block;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--sub);
}
.header-links{display:flex;gap:6px;align-items:center;flex:0 1 auto;min-width:0}
.header-links a{
  text-decoration:none;color:var(--text);font-size:12.5px;font-weight:800;
  border:1.5px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap;
}
.header-links a:hover,
.header-links a:focus-visible{background:var(--sun);border-color:var(--sun)}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:64px 20px 72px;
  background:
    linear-gradient(rgba(255,250,242,.77),rgba(255,250,242,.93)),
    url("/hajimete-hero-bg.jpg") center/cover no-repeat;
}
.hero .badge{
  display:inline-block;background:var(--sun);color:var(--ink);
  border-radius:999px;padding:6px 16px;font-size:13px;font-weight:900;margin-bottom:18px;
}
.hero h1{
  max-width:850px;margin:0 auto;
  font-size:clamp(27px,5.7vw,42px);line-height:1.5;font-weight:900;
}
.hero h1 .mark{background:linear-gradient(transparent 65%,var(--sun) 65%)}
.hero .lead{max-width:720px;margin:22px auto 0;font-size:17px;color:#5e5652}
.hero-summary{
  max-width:800px;margin:30px auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.hero-point{background:#fff;border-radius:17px;padding:18px 12px;box-shadow:var(--shadow)}
.hero-point strong{display:block;color:var(--red-deep);font-size:19px;line-height:1.4}
.hero-point span{display:block;font-size:13px;color:var(--sub);margin-top:5px}

/* ---------- ページ内ナビ ---------- */
.pagenav{background:var(--ink);padding:14px 10px;text-align:center}
.pagenav a{
  display:inline-block;color:#fff;text-decoration:none;border:1px solid #56504c;
  border-radius:999px;padding:7px 14px;margin:4px 2px;font-size:13px;font-weight:800;
}
.pagenav a:hover,
.pagenav a:focus-visible{background:var(--sun);border-color:var(--sun);color:var(--ink)}

/* ---------- パンくず ---------- */
.crumbs{font-size:13px;color:var(--sub);padding:14px 0 0}
.crumbs a{color:var(--sub);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- セクション ---------- */
section{padding:58px 0}
section.alt{background:var(--peach)}
.sec-head{text-align:center;margin-bottom:36px}
.eyebrow{
  display:inline-block;background:#fff;color:var(--red-deep);
  border-radius:999px;padding:5px 15px;font-size:12px;font-weight:900;
  box-shadow:0 5px 0 rgba(0,0,0,.05);
}
.sec-head h2{font-size:clamp(22px,4vw,30px);line-height:1.55;margin:12px 0 0;font-weight:900}
.sec-head p{color:var(--sub);margin:12px auto 0;max-width:720px}

/* ---------- ステップ（縦タイムライン） ---------- */
.timeline{max-width:800px;margin:0 auto;position:relative}
.timeline::before{
  content:"";position:absolute;left:28px;top:20px;bottom:20px;width:4px;
  background:linear-gradient(var(--red),var(--sun));border-radius:4px;
}
.step{position:relative;padding-left:78px;margin-bottom:24px}
.step:last-child{margin-bottom:0}
.step-num{
  position:absolute;left:0;top:0;width:60px;height:60px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:18px;font-weight:900;border:5px solid var(--cream);z-index:2;
}
.alt .step-num{border-color:var(--peach)}
.step-card{
  background:#fff;color:var(--text);border-radius:var(--radius);
  padding:24px 25px;box-shadow:var(--shadow);
}
.step-card .step-label{color:var(--red-deep);font-size:12px;font-weight:900;letter-spacing:.08em}
.step-card h3{font-size:20px;margin:4px 0 9px;line-height:1.55}
.step-card p{margin:0 0 9px}
.step-card p:last-child{margin-bottom:0}

/* ---------- 時間割 ---------- */
.schedule{max-width:800px;margin:0 auto;display:grid;gap:14px}
.schedule-row{
  display:grid;grid-template-columns:150px 1fr;
  background:#fff;color:var(--text);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
}
.schedule-time{
  background:var(--ink);color:#fff;font-weight:900;font-size:16px;
  display:flex;align-items:center;justify-content:center;padding:20px 14px;text-align:center;
}
.schedule-body{padding:20px 22px}
.schedule-body h3{margin:0 0 7px;font-size:19px}
.schedule-body p{margin:0;color:var(--sub)}

/* ---------- 本文ボックス ---------- */
.article-box{
  max-width:800px;margin:0 auto;background:#fff;color:var(--text);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);
}
.article-box h3{margin:28px 0 8px;font-size:20px}
.article-box h3:first-child{margin-top:0}
.article-box p{margin:0 0 13px}
.article-box p:last-child{margin-bottom:0}
.article-box ul{margin:10px 0;padding-left:1.4em}
.article-box li{margin:7px 0}

.note,.tip{
  margin-top:16px;background:#fff8cf;color:var(--text);
  border-left:6px solid var(--sun);border-radius:13px;
  padding:16px 18px;font-size:14.5px;
}
.note strong,.tip strong{color:var(--ink)}

/* ---------- 2カラムカード ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:800px;margin:0 auto}
.info-card{
  background:#fff;color:var(--text);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
}
.info-card h3{margin:0 0 9px;font-size:18px}
.info-card p{margin:0;color:var(--sub)}
.info-card strong{color:var(--red-deep)}

/* ---------- 費用表 ---------- */
.cost-box{
  max-width:780px;margin:0 auto;background:#fff;color:var(--text);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.cost-row{
  display:grid;grid-template-columns:1.2fr .8fr;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--line);align-items:center;
}
.cost-row:last-child{border-bottom:0}
.cost-row .name{font-weight:900}
.cost-row .price{text-align:right;color:var(--red-deep);font-size:19px;font-weight:900}
.cost-row.total{background:#fff8cf}
.cost-row.total .price{font-size:22px}
.cost-note{
  padding:16px 22px;border-top:1px solid var(--line);
  background:#fdfaf6;font-size:14px;color:var(--sub);
}
.cost-note p{margin:0 0 8px}
.cost-note p:last-child{margin-bottom:0}
.cost-note strong{color:var(--text)}
.cost-foot{max-width:780px;margin:18px auto 0;color:var(--sub);font-size:14px}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
details{
  background:#fff;color:var(--text);border:1px solid var(--line);
  border-radius:15px;margin:10px 0;overflow:hidden;
}
summary{
  cursor:pointer;font-weight:900;padding:17px 46px 17px 18px;
  position:relative;list-style:none;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:18px;top:10px;font-size:26px;color:var(--red)}
details[open] summary::after{content:"−"}
.answer{border-top:1px solid var(--line);padding:0 18px 17px;color:var(--sub)}
.answer p{margin:14px 0 0}

/* ---------- 関連ページ ---------- */
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.related-card{
  background:#fff;color:var(--text);border-radius:18px;padding:20px;box-shadow:var(--shadow);
}
.related-card h3{margin:0 0 8px;font-size:17px}
.related-card p{margin:0 0 12px;color:var(--sub);font-size:14px}
.related-card a{font-weight:900}

/* ---------- CTA ---------- */
.cta{background:var(--ink);color:#fff;text-align:center}
.cta h2{font-size:clamp(22px,4vw,28px);margin:0 0 10px}
.cta p{color:#c7c0bc;margin:0 0 22px}
.btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:900;border-radius:999px;padding:13px 22px}
.btn.red{background:var(--red);color:#fff}
.btn.yellow{background:var(--sun);color:var(--ink)}

/* ---------- フッター ---------- */
.site-footer{
  background:#111;color:#9b9490;padding:30px 20px;text-align:center;font-size:13px;
}
.site-footer .foot-name{color:#fff;font-weight:900;font-size:15px;display:block;margin-bottom:4px}
.site-footer .foot-info{line-height:2}
.site-footer .foot-info a{color:#ddd;text-decoration:none}
.site-footer .foot-links{margin-top:14px}
.site-footer .foot-links a{color:#ddd;text-decoration:none;margin:0 7px;line-height:2.3}
.site-footer .foot-links a:hover{color:var(--sun)}
.site-footer .copy{margin-top:14px;color:#6f6a66;font-size:12px}

/* ---------- レスポンシブ ---------- */
@media(max-width:700px){
  .header-links a{font-size:11px;padding:5px 8px}
  .hero-summary{grid-template-columns:1fr}
  .timeline::before{left:21px}
  .step{padding-left:60px}
  .step-num{width:46px;height:46px;font-size:15px;border-width:4px}
  .step-card{padding:20px}
  .schedule-row{grid-template-columns:1fr}
  .schedule-time{justify-content:flex-start}
  .two-col,.related-grid{grid-template-columns:1fr}
  .cost-row{grid-template-columns:1fr}
  .cost-row .price{text-align:left}
  .article-box{padding:22px}
}
@media(max-width:640px){
  .brand-name{font-size:12px}
  .brand-name .en{display:none}
  .nav-guide{display:none}          /* 狭い画面ではガイド一覧を隠す（フッターから行ける） */
}
@media(max-width:360px){
  .brand-name{font-size:11px}
  .brand-badge{padding:5px 7px}
  .brand-badge img{height:17px}
  .header-links a{font-size:10.5px;padding:5px 7px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}