/* ============================================================
   自動LP作成ツール デモページ用CSS

   このページの一覧部分は、自動LP作成ツールが
   「HPにアップ」を実行するたびに index.html ごと作り直します。
   見た目の調整はこのファイル側で行ってください
   （index.html を直接直しても、次のアップで上書きされます）。
   ============================================================ */

:root{
  --red:#c41f35;
  --red-dark:#a3182b;
  --ink:#1f2933;
  --muted:#52606d;
  --bg-alt:#f5f7fa;
  --border:#e4e7eb;
  --radius:10px;
  --max:960px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  line-height:1.8;
  line-break:strict;
  overflow-wrap:anywhere;
}

img{display:block;max-width:100%;height:auto;border:0;}

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

/* ---- 上部バー ---- */
.lp-bar{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
}

.lp-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:60px;
  padding:8px 0;
  flex-wrap:wrap;
}

.lp-brand{
  color:var(--red);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.05em;
  text-decoration:none;
}

.lp-bar a.back{
  color:var(--muted);
  font-size:.9rem;
  text-decoration:none;
}

.lp-bar a.back:hover{color:var(--red);}

/* ---- 注意書き。このページの性格を最初に伝える ---- */
.notice{
  border-top:6px solid var(--red);
  background:#fbeced;
  padding:clamp(22px,5vw,34px) 0;
}

.notice .inner{
  border:2px solid var(--red);
  border-radius:var(--radius);
  background:#fff;
  padding:clamp(18px,4vw,26px);
}

.notice h1{
  margin:0 0 10px;
  color:var(--red);
  font-size:clamp(17px,3.4vw,22px);
  line-height:1.55;
}

.notice p{
  margin:0;
  color:var(--muted);
  font-size:clamp(13.5px,2.2vw,15px);
}

.notice strong{color:var(--ink);}

/* ---- 本文 ---- */
.section{padding:clamp(34px,6vw,56px) 0;}
.section-alt{background:var(--bg-alt);}

.section h2{
  margin:0 0 8px;
  font-size:clamp(19px,3.4vw,26px);
  text-align:center;
}

.section h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin:12px auto 0;
  border-radius:2px;
  background:var(--red);
}

.section .sub{
  max-width:640px;
  margin:0 auto clamp(24px,4vw,36px);
  color:var(--muted);
  font-size:clamp(13.5px,2.2vw,15px);
  text-align:center;
}

/* ---- お知らせ一覧。1行1LP ---- */
.news{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--border);
}

.news li{border-bottom:1px solid var(--border);}

.news a{
  display:flex;
  align-items:baseline;
  gap:clamp(10px,2.4vw,20px);
  /* 指で押せる高さを確保する */
  min-height:56px;
  padding:12px 4px;
  color:var(--ink);
  text-decoration:none;
  flex-wrap:wrap;
}

.news a:hover{background:#fafbfc;}
.news a:hover .title{color:var(--red);text-decoration:underline;}

.news .date{
  flex:0 0 auto;
  color:var(--muted);
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:13px;
  letter-spacing:.04em;
}

.news .tag{
  flex:0 0 auto;
  padding:2px 10px;
  border:1px solid var(--red);
  border-radius:999px;
  color:var(--red);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.news .title{
  flex:1 1 auto;
  min-width:0;
  font-size:clamp(14.5px,2.4vw,16px);
  font-weight:600;
}

.news .client{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
}

.news .empty{
  padding:40px 0;
  color:var(--muted);
  font-size:14px;
  text-align:center;
}

@media(max-width:600px){
  .news a{
    align-items:flex-start;
    gap:6px 12px;
  }
  .news .title{flex:1 1 100%;order:3;}
  .news .client{order:4;}
}

/* ---- フッター ---- */
.lp-footer{
  padding:28px 0;
  background:var(--ink);
  color:#cbd2d9;
  font-size:.9rem;
  text-align:center;
}

.lp-footer a{color:#fff;}
.lp-footer p{margin:0;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}