/* PlumChan トップページ / PHOTO IMMERSIVE
   全セレクタを #pi で囲い、SWELLより詳細度を高くしています */

/* --- SWELLの記事内タイポグラフィ装飾を剥がす（#pi の中だけ） --- */
#pi :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,figure,table,button,time,nav,section,article){
  background:none; border:0; padding:0; margin:0; list-style:none;
  font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit;
  text-align:inherit; text-decoration:none; counter-increment:none;
}
#pi :where(*)::before, #pi :where(*)::after{ content:none; }
#pi :where(strong,b){ font-weight:700; }

/* ============================================================
   PHOTO IMMERSIVE — Tokens
   ============================================================ */
:root{
  --c-ink:#1A1917; --c-ink-sub:#6E6C66; --c-line:#E2E0DB;
  --c-base:#FFFFFF; --c-base-alt:#F6F5F2;
  --c-invert:#FFFFFF; --c-invert-sub:rgba(255,255,255,.72);
  --c-line-invert:rgba(255,255,255,.24);

  /* 明るい被写体（白衣）が中段に来る写真用に中間部を持ち上げた縦スクリム */
  --scrim-hero:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.86) 100%);
  /* 文字を置く左側だけを沈める横スクリム（縦と2枚重ね） */
  --scrim-hero-x:linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.20) 48%, rgba(0,0,0,0) 72%);
  --scrim-band:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.05) 100%);
  --scrim-card:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%);
  --scrim-flat:rgba(0,0,0,.62);

  --font:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --fs-display:clamp(30px,5.4vw,56px);
  --fs-h2:clamp(24px,3.2vw,36px);
  --fs-h3:20px;
  --fs-lead:clamp(16px,1.6vw,18px);
  --fs-body:16px; --fs-small:14px; --fs-eyebrow:11px;
  --lh-display:1.42; --lh-heading:1.5; --lh-body:1.95;
  --ls-display:.02em; --ls-body:.04em; --ls-eyebrow:.20em;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --pad-section:clamp(72px,9vw,128px);
  --pad-inline:clamp(20px,5vw,48px);
  --w-max:1120px; --w-text:660px;

  --radius:4px;
  --border:1px solid var(--c-line);
  --border-invert:1px solid rgba(255,255,255,.55);
  --shadow:none;

  --ratio-card:3 / 2;
  /* ヒーロー高。画面いっぱいだと上が空くためやや低く、高解像度では760pxで頭打ち */
  --h-hero:min(84svh, 760px);
  --h-header:68px;

  --dur:220ms; --ease:cubic-bezier(.2,.6,.2,1);
}

#pi, #pi *{box-sizing:border-box}
html{scroll-behavior:smooth}
#pi{margin:0;font-family:var(--font);background:var(--c-base);color:var(--c-ink);
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased}
#pi img{display:block;max-width:100%}
#pi a{color:inherit}
#pi h1, #pi h2, #pi h3, #pi h4, #pi p, #pi ul, #pi ol, #pi figure{margin:0}
#pi ul{padding:0;list-style:none}

#pi .wrap{max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad-inline)}
#pi .section{padding-block:var(--pad-section)}
#pi .section--alt{background:var(--c-base-alt)}
#pi .section--line{border-top:var(--border)}

/* --- 共通パーツ --- */
#pi .eyebrow{display:block;font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink-sub)}
#pi .eyebrow--invert{color:var(--c-invert-sub)}

#pi .head{margin-bottom:var(--s7);max-width:var(--w-text)}
#pi .head__title{font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);margin-top:var(--s3)}
#pi .head__lead{color:var(--c-ink-sub);margin-top:var(--s4);line-height:var(--lh-body)}

#pi .btn{display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:var(--radius);font-family:var(--font);
  font-size:var(--fs-small);font-weight:700;letter-spacing:var(--ls-body);
  text-decoration:none;cursor:pointer;border:1px solid transparent;box-shadow:var(--shadow);
  transition:opacity var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
#pi .btn--solid{background:var(--c-ink);color:var(--c-invert)}
#pi .btn--solid:hover{opacity:.82}
#pi .btn--outline{background:transparent;color:var(--c-ink);border-color:var(--c-ink)}
#pi .btn--outline:hover{background:var(--c-ink);color:var(--c-invert)}
#pi .btn--onphoto{background:var(--c-invert);color:var(--c-ink)}
#pi .btn--onphoto:hover{opacity:.85}
#pi .btn--ghost{background:transparent;color:var(--c-invert);border:var(--border-invert)}
#pi .btn--ghost:hover{background:rgba(255,255,255,.14)}
#pi .btn--wide{width:100%}
#pi .btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
#pi a:focus-visible, #pi button:focus-visible, #pi summary:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px}

/* ============================================================
   ヒーロー
   ============================================================ */
#pi .hero{position:relative;display:grid;align-items:end;min-height:var(--h-hero);overflow:hidden;isolation:isolate}
#pi .hero__media{position:absolute;inset:0;z-index:-2;background:var(--c-ink)}
#pi .hero__media img{width:100%;height:100%;object-fit:cover;object-position:78% 45%}
@media(max-width:640px){#pi .hero__media img{object-position:60% 35%}}
#pi .hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--scrim-hero-x),var(--scrim-hero)}
#pi .hero__inner{max-width:var(--w-max);width:100%;margin-inline:auto;
  padding:var(--s8) var(--pad-inline) var(--s8)}
#pi .hero__title{color:var(--c-invert);font-size:var(--fs-display);font-weight:700;
  line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:var(--s4) 0 var(--s5);max-width:16em}
#pi .hero__lead{color:var(--c-invert-sub);font-size:var(--fs-lead);line-height:var(--lh-body);
  max-width:var(--w-text);margin-bottom:var(--s7)}
#pi .hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
#pi .hero__note{color:var(--c-invert-sub);font-size:12px;letter-spacing:.08em;margin-top:var(--s5)}
#pi .hero__scroll{position:absolute;right:var(--pad-inline);bottom:var(--s7);
  color:var(--c-invert-sub);font-size:9.5px;letter-spacing:.3em;writing-mode:vertical-rl}
@media(max-width:860px){#pi .hero__scroll{display:none}}

/* ============================================================
   共感（問題提起）
   ============================================================ */
#pi .symptom{border-top:var(--border)}
#pi .symptom li{border-bottom:var(--border);padding:var(--s5) 0 var(--s5) var(--s7);
  position:relative;font-size:var(--fs-lead);line-height:1.85}
#pi .symptom li::before{content:"";position:absolute;left:0;top:calc(var(--s5) + 12px);
  width:22px;height:1px;background:var(--c-ink)}
#pi .symptom__after{margin-top:var(--s7);max-width:var(--w-text);color:var(--c-ink-sub)}

/* ============================================================
   写真バンド
   ============================================================ */
#pi .band{position:relative;display:grid;align-items:center;min-height:min(76svh,540px);
  overflow:hidden;isolation:isolate}
#pi .band__media{position:absolute;inset:0;z-index:-2;background:var(--c-ink)}
#pi .band__media img{width:100%;height:100%;object-fit:cover}
#pi .band__scrim{position:absolute;inset:0;background:var(--scrim-band);z-index:-1}
#pi .band__inner{max-width:var(--w-max);width:100%;margin-inline:auto;padding:var(--s8) var(--pad-inline)}
#pi .band__title{color:var(--c-invert);font-size:var(--fs-h2);font-weight:700;
  line-height:var(--lh-display);letter-spacing:var(--ls-display);margin-top:var(--s3);max-width:17em}
#pi .band__text{color:var(--c-invert-sub);margin-top:var(--s5);max-width:30em;line-height:var(--lh-body)}

/* ============================================================
   提供するもの（カード）
   ============================================================ */
#pi .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:var(--s6)}
#pi .card{border:var(--border);border-radius:var(--radius);background:var(--c-base);
  overflow:hidden;box-shadow:var(--shadow)}
#pi .card__media{position:relative;aspect-ratio:var(--ratio-card)}
#pi .card__media img{width:100%;height:100%;object-fit:cover;transition:transform 480ms var(--ease)}
#pi .card:hover .card__media img{transform:scale(1.03)}
#pi .card__body{padding:var(--s5)}
#pi .card__title{font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-heading);margin-bottom:var(--s3)}
#pi .card__text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-ink-sub)}

/* ============================================================
   進め方（順序があるので番号を使う）
   ============================================================ */
#pi .steps{border-top:var(--border)}
#pi .step{display:grid;grid-template-columns:88px 1fr;gap:var(--s5);
  border-bottom:var(--border);padding:var(--s6) 0}
#pi .step__num{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--c-ink-sub);padding-top:5px}
#pi .step__title{font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-heading);margin-bottom:var(--s3)}
#pi .step__text{color:var(--c-ink-sub);max-width:34em;line-height:var(--lh-body)}
@media(max-width:640px){
  #pi .step{grid-template-columns:1fr;gap:var(--s3)}
  #pi .step__num{padding-top:0}
}

/* ============================================================
   プロフィール
   ============================================================ */
#pi .profile{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:820px){#pi .profile{grid-template-columns:1fr}}
#pi .profile__media{aspect-ratio:4 / 5;border-radius:var(--radius);overflow:hidden}
#pi .profile__media img{width:100%;height:100%;object-fit:cover}
#pi .profile__name{font-size:var(--fs-h2);font-weight:700;line-height:1.4;margin:var(--s3) 0 var(--s2)}
#pi .profile__role{font-size:var(--fs-small);color:var(--c-ink-sub);letter-spacing:.1em;margin-bottom:var(--s6)}
#pi .profile__body p{color:var(--c-ink-sub);line-height:var(--lh-body);max-width:36em}
#pi .profile__body p + p{margin-top:var(--s4)}
#pi .facts{margin-top:var(--s7);border-top:var(--border)}
#pi .facts div{display:grid;grid-template-columns:130px 1fr;gap:var(--s4);
  border-bottom:var(--border);padding:var(--s4) 0;font-size:var(--fs-small);line-height:1.85}
#pi .facts dt{color:var(--c-ink-sub);letter-spacing:.08em}
@media(max-width:520px){#pi .facts div{grid-template-columns:1fr;gap:2px}}

/* ============================================================
   最終CTA
   ============================================================ */
#pi .cta{position:relative;display:grid;align-items:center;min-height:min(80svh,600px);
  overflow:hidden;isolation:isolate;text-align:center}
#pi .cta__media{position:absolute;inset:0;z-index:-2;background:var(--c-ink)}
#pi .cta__media img{width:100%;height:100%;object-fit:cover}
#pi .cta__scrim{position:absolute;inset:0;background:var(--scrim-flat);z-index:-1}
#pi .cta__inner{max-width:var(--w-max);width:100%;margin-inline:auto;padding:var(--s9) var(--pad-inline)}
#pi .cta__title{color:var(--c-invert);font-size:var(--fs-h2);font-weight:700;
  line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:var(--s4) auto var(--s5);max-width:16em}
#pi .cta__lead{color:var(--c-invert-sub);max-width:30em;margin:0 auto var(--s7);line-height:var(--lh-body)}
#pi .cta__note{color:var(--c-invert-sub);font-size:12px;letter-spacing:.08em;margin-top:var(--s5)}

/* ============================================================
   スクロール表示
   ============================================================ */
#pi .reveal{opacity:0;transform:translateY(10px);
  transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
#pi .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  #pi, #pi *, #pi *::before, #pi *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #pi .reveal{opacity:1;transform:none}
  #pi .card:hover .card__media img{transform:none}
  #pi .postcard:hover .postcard__media img{transform:none}
}

/* ===== 追加：コラム（カード） ===== */
#pi .postcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
@media(max-width:860px){#pi .postcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){#pi .postcards{grid-template-columns:1fr}}
#pi .postcard{display:block;border:var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--c-base);text-decoration:none;color:inherit;box-shadow:var(--shadow);
  transition:opacity var(--dur) var(--ease)}
#pi .postcard:hover{opacity:.86}
#pi .postcard__media{aspect-ratio:var(--ratio-card);overflow:hidden;background:var(--c-base-alt)}
#pi .postcard__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 480ms var(--ease)}
#pi .postcard:hover .postcard__media img{transform:scale(1.03)}
#pi .postcard__body{padding:var(--s4) var(--s4) var(--s5)}
#pi .postcard__date{display:block;font-size:11.5px;letter-spacing:.1em;
  color:var(--c-ink-sub);margin-bottom:var(--s2)}
#pi .postcard__title{font-size:15px;font-weight:700;line-height:1.75;letter-spacing:.02em}
#pi .posts__more{margin-top:var(--s7)}

/* ===== 追加：お知らせ ===== */
#pi .news{border-top:var(--border);max-width:820px}
#pi .news a{display:grid;grid-template-columns:104px 1fr;gap:var(--s5);align-items:baseline;
  border-bottom:var(--border);padding:var(--s4) 0;text-decoration:none;color:inherit;
  transition:opacity var(--dur) var(--ease)}
#pi .news a:hover{opacity:.6}
#pi .news time{font-size:11.5px;letter-spacing:.1em;color:var(--c-ink-sub);white-space:nowrap}
#pi .news h3{font-size:15px;font-weight:700;line-height:1.75;letter-spacing:.02em}
@media(max-width:560px){#pi .news a{grid-template-columns:1fr;gap:var(--s2)}}
#pi .news__more{margin-top:var(--s5);font-size:var(--fs-small)}
#pi .news__more a{color:var(--c-ink-sub);text-decoration:none;
  border-bottom:1px solid var(--c-line);padding-bottom:2px}
#pi .news__more a:hover{color:var(--c-ink);border-color:var(--c-ink)}
#pi .news__empty{color:var(--c-ink-sub);font-size:var(--fs-small);padding:var(--s5) 0;
  border-bottom:var(--border)}

/* ===== 追加：会社概要 ===== */
#pi .company{border-top:var(--border);max-width:820px}
#pi .company div{display:grid;grid-template-columns:150px 1fr;gap:var(--s5);
  border-bottom:var(--border);padding:var(--s4) 0;font-size:var(--fs-small);line-height:1.9}
#pi .company dt{color:var(--c-ink-sub);letter-spacing:.08em}
#pi .company dd{margin:0}
#pi .company dd small{display:block;color:var(--c-ink-sub);font-size:11.5px;line-height:1.8;margin-top:4px}
#pi .company a{color:inherit;text-decoration:none;border-bottom:1px solid var(--c-line);padding-bottom:1px}
#pi .company a:hover{border-color:var(--c-ink)}
@media(max-width:560px){#pi .company div{grid-template-columns:1fr;gap:2px}}

/* ===== 追加：無料診断への導線 ===== */
#pi .diagnose{border:var(--border);border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);margin-top:var(--s8);
  display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:center}
@media(max-width:760px){#pi .diagnose{grid-template-columns:1fr;gap:var(--s5)}}
#pi .diagnose__title{font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-heading);margin:var(--s3) 0 var(--s3)}
#pi .diagnose__text{color:var(--c-ink-sub);font-size:var(--fs-small);line-height:1.9;max-width:34em}
#pi .diagnose__note{margin-top:var(--s3);font-size:12px;color:var(--c-ink-sub);letter-spacing:.06em}

/* ===== 追加：理念型トップ用 ===== */
#pi .creed{border-top:var(--border)}
#pi .creed__row{border-bottom:var(--border);padding:var(--s6) 0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:baseline}
@media(max-width:720px){#pi .creed__row{grid-template-columns:1fr;gap:var(--s2)}}
#pi .creed__a{font-size:clamp(18px,2.2vw,24px);font-weight:700;line-height:1.65;letter-spacing:.02em}
#pi .creed__b{color:var(--c-ink-sub);line-height:var(--lh-body)}
#pi .creed__after{margin-top:var(--s7);max-width:var(--w-text);color:var(--c-ink-sub);line-height:var(--lh-body)}

#pi .proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:var(--border)}
#pi .proof__cell{border-bottom:var(--border);padding:var(--s6) var(--s6) var(--s6) 0}
#pi .proof__num{font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1.15;letter-spacing:.01em}
#pi .proof__lbl{margin-top:var(--s3);font-size:var(--fs-small);line-height:1.85}
#pi .proof__src{margin-top:var(--s3);font-size:11.5px;color:var(--c-ink-sub);line-height:1.7}

#pi .clients{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
#pi .clients span{border:var(--border);border-radius:var(--radius);padding:9px 16px;
  font-size:var(--fs-small);letter-spacing:.06em}

#pi .org{display:grid;grid-template-columns:320px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
/* 中身が position:absolute のみなので、幅を明示しないと列が0に潰れる */
#pi .org__media{position:relative;width:100%;max-width:320px;aspect-ratio:4 / 5;
  border-radius:var(--radius);overflow:hidden;margin-inline:auto}
@media(max-width:820px){
  #pi .org{grid-template-columns:1fr}
  #pi .org__media{max-width:280px}
}
@media(max-width:400px){#pi .org__media{max-width:240px}}
/* 全身1024x1536から x200-880 / y215-1065 をバストアップとして切り出す */
#pi .org__media img{position:absolute;left:-29.4%;top:-25.3%;width:150.6%;height:auto;max-width:none}

/* ============================================================
   SWELLの記事レイアウトを打ち消す（トップページのみ読み込まれます）
   ============================================================ */
.p-breadcrumb, #breadcrumb, .p-pageTitle, .c-pageTitle,
.l-mainContent__inner > h1, .p-articleThumb, .c-shareBtns,
.l-sidebar, #sidebar, .l-articleBottom, .p-articleFoot { display:none !important; }

#content, #main_content, #container, main,
.l-content, .l-container, .w-container, .l-mainContent, .l-mainContent__inner,
.post_content, .c-postContent {
  max-width:none !important; width:auto !important;
  padding-inline:0 !important; margin-inline:0 !important; float:none !important; }
.post_content, .l-mainContent, .l-mainContent__inner, #content {
  padding-block:0 !important; margin-block:0 !important; }
.post_content > *, .post_content > * + * { margin-block:0 !important; }

/* ▼ 上で .l-container の左右余白まで消えるため、
      ヘッダー／フッターの内側だけ余白とコンテンツ幅を戻す */
.l-header__inner, .l-fixHeader__inner, .l-footer .l-container {
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 5vw, 48px) !important;
}

/* 保険：幅制限が残っても全幅セクションを画面いっぱいに広げる */
#pi .hero, #pi .band, #pi .cta, #pi .section {
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
body { overflow-x:clip; }

/* ============================================================
   下層ページ用（page-program / page-profile / page-faq / page-tokushoho）
   ============================================================ */
#pi .pagehead{padding-block:var(--s9) var(--s8);border-bottom:var(--border)}
#pi .pagehead__title{font-size:clamp(28px,4.4vw,44px);font-weight:700;
  line-height:1.42;letter-spacing:.02em;margin-top:var(--s3)}
#pi .pagehead__lead{margin-top:var(--s5);max-width:var(--w-text);
  color:var(--c-ink-sub);line-height:var(--lh-body)}

#pi .prose{max-width:var(--w-text)}
#pi .prose p{line-height:var(--lh-body)}
#pi .prose p + p{margin-top:var(--s5)}
#pi .prose strong{font-weight:700;color:var(--c-ink)}

#pi .faq{border-top:var(--border);max-width:var(--w-text)}
#pi .faq details{border-bottom:var(--border)}
#pi .faq summary{cursor:pointer;list-style:none;position:relative;
  padding:var(--s5) var(--s7) var(--s5) 0;font-weight:700;line-height:1.8}
#pi .faq summary::-webkit-details-marker{display:none}
#pi .faq summary::after{content:"";position:absolute;right:6px;top:calc(var(--s5) + 13px);
  width:11px;height:11px;border-right:1px solid var(--c-ink);border-bottom:1px solid var(--c-ink);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
#pi .faq details[open] summary::after{transform:rotate(-135deg)}
#pi .faq p{padding:0 var(--s7) var(--s6) 0;color:var(--c-ink-sub);line-height:var(--lh-body)}

#pi .todo{border:1px dashed #B9B5AC;border-radius:var(--radius);padding:var(--s5);
  background:var(--c-base-alt);font-size:var(--fs-small);line-height:1.9;color:var(--c-ink-sub)}
#pi .todo b{display:block;color:var(--c-ink);font-size:12px;letter-spacing:.14em;margin-bottom:var(--s2)}
#pi .todo + .todo{margin-top:var(--s4)}

#pi .backlink{margin-top:var(--s8)}
#pi .backlink a{font-size:var(--fs-small);color:var(--c-ink-sub);text-decoration:none;
  border-bottom:1px solid var(--c-line);padding-bottom:2px}
#pi .backlink a:hover{color:var(--c-ink);border-color:var(--c-ink)}