/* ======================================================================
   パターン⑧ 年表・物語型
   中央の1本の線に沿って、左右交互に年表が並ぶ。見出しは Zen Kaku Gothic New
   ====================================================================== */
body[data-pattern="8"]{--paper:#fdfcfa;--line-c:color-mix(in srgb,var(--navy) 16%,#fff);--sky-pale:color-mix(in srgb,var(--sky) 14%,#fff);background:var(--paper)}
.p8-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important;padding:0!important}

/* ---- ヘッダー ---- */
.p8-header{background:rgba(253,252,250,.95);box-shadow:0 1px 0 var(--line-c)}
.p8-logo__title{font-size:12px;color:var(--muted)}
.p8-logo__name{font-family:var(--hand);font-weight:var(--hand-weight);font-size:22px;color:var(--navy)}
.p8-nav{gap:26px}
.p8-nav a{font-size:14px;font-weight:700}
.p8-nav a.nav__cta{background:var(--navy);color:#fff;box-shadow:none}

/* ---- 物語の始まり ---- */
.p8-hero{text-align:center;padding:120px 20px 40px;background:linear-gradient(180deg,var(--sky-pale),var(--paper))}
.p8-hero .sample-notice{margin-bottom:20px}
.p8-hero__photo{margin:0 auto;width:min(60vw,260px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 14px 40px rgba(0,0,0,.12)}
.p8-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.p8-hero__name{margin-top:22px;font-family:var(--hand);font-weight:var(--hand-weight);font-size:clamp(32px,4vw,48px);color:var(--navy);line-height:1.2}
.p8-hero__name small{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:13px;letter-spacing:.3em;color:var(--muted);margin-top:6px}
.p8-hero__catch{margin:20px auto 0;max-width:760px;font-family:var(--hand);font-weight:var(--hand-weight);font-size:clamp(20px,2.4vw,30px);line-height:1.6;color:var(--navy)}
.p8-hero__catch span{display:block;color:color-mix(in srgb,var(--blue) 85%,#000)}
.p8-hero__hint{margin-top:28px;font-size:14px;color:var(--muted)}
.p8-hero__hint::after{content:"";display:block;width:2px;height:48px;margin:12px auto 0;background:var(--blue)}

/* ---- 年表 ---- */
.p8-timeline-sec{padding:0 0 80px}
.p8-timeline{position:relative;max-width:1100px;margin:0 auto;padding:20px 24px 40px}
.p8-line{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--line-c);border-radius:2px}
.p8-line i{position:absolute;left:0;top:0;width:100%;height:calc(var(--progress,0) * 100%);background:linear-gradient(var(--sky),var(--blue));border-radius:2px;transition:height .15s linear}
.p8-list{list-style:none;position:relative}
.p8-chapter{position:relative;text-align:center;padding:56px 0 24px;z-index:1}
body[data-pattern="8"] .p8-chapter__title{display:inline-flex;align-items:center;gap:12px;background:var(--paper);padding:10px 22px;margin:0;font-family:var(--hand);font-weight:var(--hand-weight);font-size:clamp(22px,2.6vw,30px);color:var(--navy);border:2px solid var(--navy);border-radius:999px}
body[data-pattern="8"] .p8-chapter__title::after{display:none}
.p8-chapter__title span{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:.7em;background:var(--blue);color:#fff;border-radius:999px;padding:2px 10px}
.p8-item{position:relative;width:50%;padding:14px 40px 14px 0}
.p8-item:nth-of-type(even){margin-left:50%;padding:14px 0 14px 40px}
.p8-dot{position:absolute;top:30px;right:-9px;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--blue);z-index:1}
.p8-item:nth-of-type(even) .p8-dot{right:auto;left:-9px}
.p8-item.is-hot .p8-dot{background:var(--yellow);border-color:color-mix(in srgb,var(--blue) 80%,#000)}
.p8-item.is-now .p8-dot{background:var(--blue)}
.p8-card{display:block;background:#fff;border:1px solid var(--line-c);border-radius:16px;padding:20px 22px;box-shadow:0 6px 20px rgba(0,0,0,.04)}
.p8-card--link{transition:transform .2s,box-shadow .2s}
.p8-card--link:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.p8-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:12px}
.p8-when{font-size:13px;font-weight:700;color:color-mix(in srgb,var(--blue) 82%,#000)}
.p8-when b{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:40px;line-height:1;margin:0 4px}
.p8-card h3{font-size:18px;font-weight:800;color:var(--navy);margin:4px 0 6px;line-height:1.5}
.p8-card p{font-size:15px;color:var(--muted);line-height:1.85}
.p8-item.is-hot .p8-card{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
/* 横長の項目（メッセージ・動画）は、線をまたいで中央に置く */
.p8-item--wide{width:100%;padding:14px 0!important;margin-left:0!important}
.p8-item--wide .p8-dot{left:50%!important;right:auto!important;margin-left:-9px;top:-4px}
.p8-item--wide .p8-card{max-width:880px;margin:0 auto}
.p8-message p{font-size:16px;line-height:2;color:var(--text);margin-bottom:1em}
.p8-message h3{font-family:var(--hand);font-weight:var(--hand-weight);font-size:clamp(22px,2.6vw,30px)}
.p8-message__big{font-family:var(--hand);font-weight:var(--hand-weight);font-size:22px!important;color:color-mix(in srgb,var(--blue) 85%,#000)!important}
.p8-sign{text-align:right;font-weight:800;color:var(--navy)!important}
.p8-lead{margin-bottom:20px}
body[data-pattern="8"] .p8-card .cv{margin-top:28px}

/* 演出：項目が線の側から現れる */
body[data-pattern="8"] [data-reveal="side"]{opacity:0;transform:translateX(-30px)}
body[data-pattern="8"] .p8-item:nth-of-type(even)[data-reveal="side"]{transform:translateX(30px)}
body[data-pattern="8"] .p8-item--wide[data-reveal="side"]{transform:translateY(24px)}
body[data-pattern="8"] [data-reveal="side"].is-in{opacity:1;transform:none}

/* ---- ご相談 ---- */
.p8-contact{background:var(--navy);color:#fff;padding:96px 0}
body[data-pattern="8"] .p8-contact__title{color:#fff;font-family:var(--hand);font-weight:var(--hand-weight)}
body[data-pattern="8"] .p8-contact__title::after{background:var(--yellow)}
.p8-contact__lead{margin-bottom:32px;opacity:.95}
.p8-btn{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:800;font-size:17px;padding:16px 44px;border-radius:999px;transition:.2s}
.p8-btn:hover{transform:translateY(-2px)}
.p8-contact__info{margin-top:18px}
.p8-contact__info a{color:#fff}
.p8-sns{display:flex;justify-content:center;gap:16px;margin-top:18px}
.p8-sns__link{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:700}
.p8-sns__link svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}
.p8-motto{margin-top:32px;font-family:var(--hand);font-weight:var(--hand-weight);font-size:18px;opacity:.9}
.p8-footer{padding:48px 0 96px}
.p8-footer__name{font-family:var(--hand);font-weight:var(--hand-weight);font-size:24px;color:#fff}
.p8-footer__office{font-size:13px;margin-top:8px}

/* ---- スマホ：線を左に寄せて、すべて右側に並べる ---- */
@media (max-width:768px){
  .p8-hero{padding-top:96px}
  .p8-timeline{padding:10px 16px 30px}
  .p8-line{left:26px}
  .p8-item,.p8-item:nth-of-type(even){width:100%;margin-left:0;padding:10px 0 10px 40px}
  .p8-dot,.p8-item:nth-of-type(even) .p8-dot{left:1px;right:auto;top:26px}
  .p8-item--wide{padding:10px 0 10px 40px!important}
  .p8-item--wide .p8-dot{left:1px!important;margin-left:0}
  .p8-chapter{text-align:left;padding:40px 0 14px}
  body[data-pattern="8"] [data-reveal="side"],body[data-pattern="8"] .p8-item:nth-of-type(even)[data-reveal="side"]{transform:translateY(20px)}
}