/* 料金表ページ用スタイル（白黒基調・動きあり）
   更新4: 制作フローを縦並びに固定 + 線にドットが流れるアニメーション + フェード入場の強化
   - flow は縦並び（常時）に変更
   - 中央に縦のコネクタラインを表示し、ドットが上から下へ流れるアニメ
   - ステップ毎にフェード入場（遅延あり）
   - 既存スタイルは維持
*/

:root{
  --bg: #ffffff;
  --surface: #fafafa;
  --text: #111111;
  --muted: #666666;
  --accent: #000000; /* 黒をアクセントに */
  --border: #e6e6e6;
  --radius: 12px;
  --glass: rgba(0,0,0,0.04);
  --max-width: 1100px;
  --container-padding: 24px;
  --shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout container */
header[role="banner"], footer[role="contentinfo"]{
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  border-bottom:1px solid var(--border);
}

.container{
  width:100%;
  max-width:var(--max-width);
  margin-left:auto; margin-right:auto;
  padding-left:var(--container-padding);
  padding-right:var(--container-padding);
}

header[role="banner"] .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0;
}

header a[aria-label="トップへ戻る"]{font-weight:800; font-size:1.05rem; color:var(--text)}
nav[aria-label="主要ナビゲーション"] ul{display:flex; gap:12px; list-style:none; margin:0; padding:0}
nav[aria-label="主要ナビゲーション"] a{font-size:0.95rem; color:var(--muted)}

/* Breadcrumb */
nav[aria-label="パンくず"]{font-size:0.9rem; color:var(--muted); padding:12px 0}
nav[aria-label="パンくず"] ol{display:flex; gap:8px; list-style:none; margin:0; padding:0}

/* Main area */
main{padding:28px 0}
main > header{padding:18px 0; text-align:center}
main h1{font-size:2.0rem; margin:6px 0 6px 0; letter-spacing:0.02em}
main p{margin:0 auto 16px auto; color:var(--muted); max-width:840px}

/* Emphasize section headings */
h2, h3{position:relative; font-weight:900; color:var(--text);}

/* Decorative underline for headings */
h2::after, h3::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:-10px;
  width:64px; height:6px; border-radius:6px;
  background:linear-gradient(90deg, rgba(0,0,0,0.95), rgba(0,0,0,0.65));
  opacity:0.95;
  transition:transform 320ms cubic-bezier(.2,.9,.2,1), width 320ms ease;
}
h2:hover::after, h3:hover::after{transform:translateX(-50%) scaleX(1.12); width:88px}

/* Center text inside sections */
section{display:block; text-align:center}
section > *{margin-left:auto; margin-right:auto}

/* Plans section */
#plans .plan-list{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:18px;
}

.plan{
  background:linear-gradient(180deg,var(--surface),#fff);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  transition:transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms ease, border-color 240ms ease, filter 240ms ease;
  transform-origin:center;
  overflow:hidden;
  text-align:center; /* center content inside cards */
}

.plan header h3{margin:0 0 6px 0; font-size:1.2rem}
.plan p{margin:0 0 12px 0; color:var(--muted); max-width:360px}
.plan ul{margin:0 0 12px 0; color:var(--muted); display:inline-block; text-align:left}
.plan a{display:inline-block; margin-top:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-weight:700}

/* subtle floating animation for visuals */
@keyframes floatY {
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

/* fade-in for sections */
@keyframes fadeUp {
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:translateY(0)}
}

/* apply only to larger screens and not to users who prefer reduced motion */
@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  .plan{animation: floatY 6s ease-in-out infinite;}
  .plan:hover{animation-play-state:paused}
}

/* Staggered entrance for plan cards using nth-child */
.plan{opacity:0; transform:translateY(12px); animation: fadeUp 700ms ease forwards}
.plan:nth-child(1){animation-delay:120ms}
.plan:nth-child(2){animation-delay:260ms}
.plan:nth-child(3){animation-delay:400ms}

.plan:hover{transform:translateY(-10px) scale(1.02); box-shadow:0 18px 40px rgba(0,0,0,0.14); border-color:rgba(0,0,0,0.08); filter:brightness(1.01)}

/* Price styling */
.plan [itemprop="offers"]{display:inline-block; background:var(--glass); padding:8px 12px; border-radius:10px; font-weight:800}

/* ========== 比較表（より幅を使って見せる） ========== */
#compare-heading{margin-top:36px}
#compare-heading + table, table.addons-table{width:calc(100% + 48px); margin-left:-24px; border-collapse:collapse; margin-top:12px; background:white; border-radius:10px; overflow:hidden}

table caption{caption-side:top; text-align:left; font-weight:700; margin-bottom:8px}
thead th{background:#f6f6f6; font-weight:900; padding:18px 14px; text-align:center; border-bottom:1px solid var(--border); font-size:1rem}
tbody td, tbody th{padding:16px 14px; border-bottom:1px solid var(--border); vertical-align:middle; text-align:center; font-size:0.98rem}
tbody th{ text-align:left }

@media (max-width:900px){
  #compare-heading + table, table.addons-table{width:100%; margin-left:0;}
  .container{padding-left:16px; padding-right:16px}
}

/* ========== 追加オプション ========== */
.addons-wrapper{margin-top:12px}
#addons ul{display:grid; grid-template-columns:1fr 140px; gap:10px 18px; align-items:center; list-style:none; padding:0; margin:0 auto; max-width:980px}
#addons li{padding:12px 16px; background:linear-gradient(180deg,#fff,#fbfbfb); border:1px solid var(--border); border-radius:10px; display:flex; justify-content:space-between; align-items:center}
#addons li strong{font-weight:800}
.addons-table{width:calc(100% + 48px); margin-left:-24px; border-collapse:collapse; margin-top:12px}
.addons-table th, .addons-table td{padding:14px 12px; border-bottom:1px solid var(--border);}
.addons-table thead th{background:#f8f8f8; font-weight:800; text-align:left}
.addons-table tbody tr:hover{background:rgba(0,0,0,0.02)}

/* ========== 制作フロー：縦並び + ドットが流れるアニメ ========== */
#flow{padding:28px 0}
.flow-steps{display:flex; gap:24px; align-items:flex-start; justify-content:center; flex-direction:column; position:relative; padding:20px 0; max-width:900px; margin:12px auto}

/* central vertical connector with moving dots */
.flow-steps::before{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:24px; bottom:24px;
  width:4px; border-radius:4px; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  overflow:hidden;
}

/* animated dot overlay */
.flow-steps::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:24px; bottom:24px; width:12px; height:100%; z-index:0; pointer-events:none;
  /* repeating dots via radial-gradient - adjust spacing with background-size */
  background-image: radial-gradient(circle at center, rgba(0,0,0,0.9) 0 2px, transparent 3px), radial-gradient(circle at center, rgba(0,0,0,0.6) 0 1px, transparent 2px);
  background-repeat:repeat-y;
  background-size:12px 36px, 12px 36px;
  background-position: center 0, center 18px;
  opacity:0.85;
  animation: dotsFlow 2.2s linear infinite;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%); /* fade edges */
}

@keyframes dotsFlow{
  from{background-position: center 0, center 18px}
  to{background-position: center 36px, center 54px}
}

/* individual step styles */
.flow-step{background:#fff; border:1px solid var(--border); padding:18px 20px; border-radius:14px; box-shadow:var(--shadow); position:relative; z-index:1; display:flex; gap:16px; align-items:flex-start}
.step-badge{width:56px; height:56px; border-radius:50%; background:linear-gradient(180deg,#000,#333); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.15rem; flex-shrink:0; box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.step-content{text-align:left}
.step-content h4{margin:0 0 6px 0; font-size:1.05rem}
.step-content p{margin:0; color:var(--muted); font-size:0.95rem}

/* connector dot to the marker (align badge to the centerline) */
.flow-step::before{
  content:"";
  position:absolute;
  left:calc(50% - 2px - 40px); /* place between center line and badge */
  top:50%; transform:translateY(-50%);
  width:36px; height:4px; border-radius:4px; background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)); z-index:0;
}

/* remove before for left/right alignment if too tight */
.flow-step:first-child::before{left:calc(50% - 2px - 20px)}

/* Fade in/slide animation for steps */
@keyframes stepFadeIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.flow-step{opacity:0; transform:translateY(14px); animation:stepFadeIn 560ms cubic-bezier(.2,.9,.2,1) forwards}
.flow-step:nth-child(1){animation-delay:120ms}
.flow-step:nth-child(2){animation-delay:260ms}
.flow-step:nth-child(3){animation-delay:420ms}
.flow-step:nth-child(4){animation-delay:560ms}
.flow-step:nth-child(5){animation-delay:700ms}

/* Hover effects */
@media (prefers-reduced-motion: no-preference){
  .flow-step:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(0,0,0,0.12)}
  .step-badge{transition:transform 360ms ease, box-shadow 360ms ease}
  .flow-step:hover .step-badge{transform:scale(1.06); box-shadow:0 10px 30px rgba(0,0,0,0.12)}
}

/* small screens: reduce size */
@media (max-width:680px){
  .flow-steps{padding:12px 0; max-width:520px}
  .flow-step{padding:14px; gap:12px}
  .step-badge{width:48px;height:48px;font-size:1rem}
  .flow-steps::after{left:calc(50%); width:10px}
}

/* FAQ */
#faq article{border-left:3px solid var(--border); padding:14px; margin-bottom:12px; max-width:900px}
#faq h3{margin:0 0 8px 0}

/* Contact */
#contact address{font-style:normal; color:var(--muted); line-height:1.6; display:inline-block; text-align:left}
#contact a[aria-label="お問い合わせフォームへ"]{display:inline-block; margin-top:12px; padding:10px 14px; background:var(--accent); color:var(--bg); border-radius:10px}

/* Aside / notes: center and make compact */
aside[aria-label="注意事項"], aside.u-center{background:linear-gradient(180deg,#fff,#fbfbfb); border:1px solid var(--border); padding:18px; border-radius:10px; margin-top:20px; display:block; max-width:900px; text-align:center}
aside[aria-label="注意事項"] ul{list-style:none; padding:0; margin:0 auto; display:inline-block; text-align:left}

/* Footer */
footer{padding:22px 0; margin-top:30px; border-top:1px solid var(--border)}
footer nav ul{display:flex; gap:12px; list-style:none; padding:0; margin:0 0 8px 0}
footer small{color:var(--muted)}

/* Responsive for plans */
@media (min-width:700px){
  #plans .plan-list{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .container{max-width:1200px}
  #plans .plan-list{grid-template-columns:repeat(3,1fr)}
}

/* Accessibility: focus styles */
:focus{outline:none}
a:focus, button:focus, [tabindex]:focus{box-shadow:0 0 0 4px rgba(0,0,0,0.08); border-radius:8px}

/* Print */
@media print{
  body{color:#000; background:#fff}
  header, nav, footer, aside{display:none}
  .plan, table{box-shadow:none; border:none}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .plan{animation:none; transition:none}
  h2::after, h3::after{transition:none}
  .flow-step{transition:none; animation:none}
  .flow-steps::after{animation:none}
}

/* small utility classes (optional) */
.u-center{text-align:center}
.u-muted{color:var(--muted)}

/* end of updated stylesheet */