@charset "UTF-8";
/* ============================================================
   薬剤師会向けページ(page-yakuzaishikai.php / 2026リニューアル)
   ・.ph-* 名前空間。基本スタイルはラッパー .ph-lp 配下だけに限定し、
     テーマ共通のヘッダー/フッター(.fp-*)へ影響させない。
   ・アニメーションは js/yakuzaishikai.js(GSAP + ScrollTrigger)。
     JS/GSAP不在・prefers-reduced-motion ではコンテンツは全て可視
     (初期非表示は JS 側でのみ設定する = グレースフルデグラデーション)。
   ============================================================ */
:root{
  --navy:#243b65; --navy-deep:#1b2c4d; --ink:#1b2536; --ink-soft:#4c576c;
  --gold:#b1905a; --gold-soft:#c9ad80; --line:#e6e2d8; --paper:#faf9f6;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --en:"Cormorant Garamond","Times New Roman",serif;
  --min:"Noto Serif JP","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  --wrap:1120px;
}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* 基本スタイルは .ph-lp 配下のみ(テーマの .fp-ヘッダー/フッターに波及させない) */
.ph-lp{background:#fff;color:var(--ink);font-family:var(--sans);line-height:1.9;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.ph-lp *{box-sizing:border-box;}
.ph-lp img{max-width:100%;display:block;}
.ph-lp a{color:inherit;}
.ph-lp .en{font-family:var(--en);}
.ph-lp .mincho{font-family:var(--min);}
.ph-lp .sm-only{display:none;}
@media (max-width:600px){.ph-lp .sm-only{display:inline;}}

.ph-wrap{width:min(var(--wrap),90vw);margin-inline:auto;}

/* 共通見出し */
.ph-head{text-align:center;margin-bottom:clamp(34px,5vw,60px);}
.ph-head__en{margin:0 0 12px;font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
.ph-head__en::after{content:"";display:block;width:34px;height:1px;background:var(--gold);margin:12px auto 0;}
.ph-head__ttl{margin:0;font-family:var(--min);font-weight:600;font-size:clamp(23px,3.4vw,36px);line-height:1.5;color:var(--navy);letter-spacing:.04em;text-wrap:balance;}
.ph-head__lead{margin:18px auto 0;max-width:640px;font-size:15px;line-height:2.1;color:var(--ink-soft);}

/* ===== Hero(深ネイビー) ===== */
.ph-hero{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;padding:clamp(92px,15vw,168px) 0 clamp(72px,11vw,132px);}
.ph-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 82% -8%,rgba(177,144,90,.30),transparent 58%);}
.ph-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,173,128,.5),transparent);}
.ph-hero__inr{position:relative;width:min(var(--wrap),90vw);margin:0 auto;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,72px);align-items:center;}
.ph-hero__copy{position:relative;z-index:2;}
.ph-hero__visual{position:relative;z-index:2;}
.ph-hero__pc{display:block;position:relative;border-radius:8px;outline-offset:4px;}
.ph-hero__pc img{display:block;width:100%;height:auto;border-radius:8px;}
.ph-hero__sp{position:absolute;right:-3%;bottom:-6%;width:22%;min-width:88px;z-index:3;line-height:0;}
.ph-hero__sp img{display:block;width:100%;height:auto;border-radius:14px;}
.ph-hero__en{margin:0 0 22px;font-family:var(--en);font-size:clamp(14px,1.7vw,17px);font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);}
.ph-hero__ttl{margin:0;font-family:var(--min);font-weight:600;font-size:clamp(30px,5.6vw,60px);line-height:1.42;letter-spacing:.04em;text-wrap:balance;}
.ph-hero__ttl b{color:var(--gold-soft);font-weight:600;}
.ph-hero__sub{margin:clamp(26px,4vw,38px) 0 0;max-width:620px;font-size:clamp(14.5px,1.1vw,16px);line-height:2.2;color:rgba(255,255,255,.82);}
.ph-hero__cta{margin-top:clamp(34px,5vw,46px);display:flex;flex-wrap:wrap;gap:16px;}
.ph-hero__trust{margin:clamp(30px,4vw,44px) 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.62);}
.ph-hero__trust b{display:block;font-family:var(--en);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px;font-weight:600;}
.ph-hero__trust span{color:#fff;}

.ph-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;font-size:15px;letter-spacing:.06em;text-decoration:none;transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);}
.ph-btn--gold{background:var(--gold);color:#fff;box-shadow:0 18px 34px -18px rgba(177,144,90,.9);}
.ph-btn--ghost{border:1px solid rgba(255,255,255,.55);color:#fff;}
.ph-btn i{font-style:normal;transition:transform .35s var(--ease);}
@media (hover:hover){
  .ph-btn:hover{transform:translateY(-2px);}
  .ph-btn:hover i{transform:translateX(4px);}
  .ph-btn--ghost:hover{background:#fff;color:var(--navy-deep);}
}

/* ===== 課題 ===== */
.ph-issues{padding:clamp(64px,9vw,110px) 0;background:var(--paper);}
.ph-issues__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.ph-issue{background:#fff;padding:clamp(26px,3.4vw,38px) clamp(22px,3vw,32px);display:flex;gap:16px;align-items:flex-start;}
.ph-issue__q{font-family:var(--en);font-size:26px;line-height:1;color:var(--gold);flex-shrink:0;margin-top:2px;}
.ph-issue__tx{margin:0;font-size:14.5px;line-height:1.95;color:var(--ink);}
.ph-issues__foot{margin:clamp(30px,4vw,44px) auto 0;max-width:660px;text-align:center;font-family:var(--min);font-size:clamp(16px,1.8vw,20px);line-height:1.9;color:var(--navy);}
.ph-issues__foot b{color:var(--gold);font-weight:600;}

/* ===== 強み(選ばれる理由) ===== */
.ph-why{padding:clamp(64px,9vw,112px) 0;}
.ph-why__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(22px,2.6vw,30px);}
.ph-card{position:relative;border:1px solid var(--line);border-radius:10px;padding:clamp(30px,3.4vw,40px) clamp(26px,3vw,34px);background:#fff;overflow:hidden;transition:border-color .45s var(--ease),box-shadow .45s var(--ease);}
.ph-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
@media (hover:hover){.ph-card:hover{border-color:var(--gold);box-shadow:0 26px 50px -34px rgba(27,37,54,.4);}.ph-card:hover::before{transform:scaleX(1);}}
.ph-card__ic{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--gold);margin-bottom:22px;}
.ph-card__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.ph-card__n{font-family:var(--en);font-size:13px;letter-spacing:.16em;color:var(--gold);}
.ph-card__ttl{margin:6px 0 12px;font-family:var(--min);font-weight:600;font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--navy);}
.ph-card__tx{margin:0;font-size:14px;line-height:1.95;color:var(--ink-soft);}

/* ===== 二層構造(4つの柱) ===== */
.ph-layers{padding:clamp(64px,9vw,112px) 0;background:var(--navy-deep);color:#fff;}
.ph-layers .ph-head__ttl{color:#fff;}
.ph-layers .ph-head__lead{color:rgba(255,255,255,.75);}
.ph-layers__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);}
.ph-layer{border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:clamp(28px,3.4vw,40px);background:rgba(255,255,255,.03);}
.ph-layer__en{font-family:var(--en);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);}
.ph-layer__ttl{margin:6px 0 14px;font-family:var(--min);font-weight:600;font-size:clamp(19px,2.3vw,24px);color:#fff;}
.ph-layer__tx{margin:0 0 16px;font-size:13.5px;line-height:1.95;color:rgba(255,255,255,.72);}
.ph-layer ul{list-style:none;margin:0;padding:0;}
.ph-layer ul + .ph-layer__tag{margin-top:20px;}
.ph-layer__tag{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;}
.ph-layer__tag span{font-size:12px;letter-spacing:.03em;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:5px 14px;}
.ph-layer li{position:relative;padding:11px 0 11px 22px;font-size:14.5px;color:rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.12);}
.ph-layer li:first-child{border-top:0;}
.ph-layer li::before{content:"";position:absolute;left:0;top:1.35em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg);}

/* ===== できること(機能) ===== */
.ph-features{padding:clamp(64px,9vw,112px) 0;}
.ph-features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.4vw,26px);}
.ph-feat{display:flex;gap:16px;align-items:flex-start;padding:22px 20px;border-radius:8px;transition:background .4s var(--ease);}
@media (hover:hover){.ph-feat:hover{background:var(--paper);}}
.ph-feat__ic{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:10px;color:var(--gold);}
.ph-feat__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.ph-feat__ttl{margin:0 0 5px;font-family:var(--min);font-size:16px;font-weight:600;color:var(--navy);}
.ph-feat__tx{margin:0;font-size:13px;line-height:1.85;color:var(--ink-soft);}

/* ===== 制作の流れ ===== */
.ph-flow{padding:clamp(64px,9vw,112px) 0;background:var(--paper);}
.ph-flow__list{counter-reset:step;display:grid;gap:clamp(16px,2vw,22px);max-width:840px;margin-inline:auto;}
.ph-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,32px);align-items:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:clamp(22px,3vw,30px) clamp(24px,3.2vw,34px);}
.ph-step__n{counter-increment:step;font-family:var(--en);font-size:clamp(28px,4vw,40px);line-height:1;color:var(--gold);min-width:48px;}
.ph-step__n::before{content:counter(step,decimal-leading-zero);}
.ph-step__ttl{margin:0 0 6px;font-family:var(--min);font-weight:600;font-size:clamp(17px,2vw,20px);color:var(--navy);}
.ph-step__tx{margin:0;font-size:14px;line-height:1.9;color:var(--ink-soft);}

/* ===== 料金・運用 ===== */
.ph-cost{padding:clamp(64px,9vw,112px) 0;}
.ph-cost__box{max-width:820px;margin-inline:auto;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:8px;padding:clamp(34px,5vw,56px);text-align:center;background:#fff;}
.ph-cost__lead{margin:0 0 20px;font-family:var(--min);font-size:clamp(18px,2.4vw,24px);line-height:1.8;color:var(--navy);}
.ph-cost__tx{margin:0 auto;max-width:600px;font-size:14.5px;line-height:2.05;color:var(--ink-soft);}
.ph-cost__note{margin:26px auto 0;max-width:600px;font-size:13px;line-height:1.9;color:var(--ink-soft);background:var(--paper);border-radius:8px;padding:18px 22px;text-align:left;}

/* ===== 代表プロフィール ===== */
.ph-rep{padding:clamp(64px,9vw,112px) 0;background:var(--paper);}
.ph-rep__inr{display:grid;grid-template-columns:200px 1fr;gap:clamp(28px,5vw,60px);align-items:center;max-width:900px;margin-inline:auto;}
.ph-rep__pic{position:relative;border-radius:50%;overflow:hidden;width:200px;height:200px;background:#fff;border:3px solid var(--navy);}
.ph-rep__pic img{width:100%;height:100%;object-fit:cover;}
.ph-rep__en{margin:0;font-family:var(--en);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);}
.ph-rep__nm{margin:6px 0 4px;font-family:var(--min);font-size:clamp(24px,3vw,30px);color:var(--navy);letter-spacing:.08em;}
.ph-rep__lic{margin:0 0 18px;font-size:13px;letter-spacing:.06em;color:var(--ink-soft);}
.ph-rep__tx{margin:0;font-size:14.5px;line-height:2.05;color:var(--ink);}

/* ===== CTA ===== */
.ph-cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(64px,10vw,120px) 0;text-align:center;}
.ph-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% -10%,rgba(177,144,90,.28),transparent 60%);}
.ph-cta__inr{position:relative;width:min(760px,90vw);margin:0 auto;}
.ph-cta__en{margin:0 0 14px;font-family:var(--en);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);}
.ph-cta__ttl{margin:0 0 18px;font-family:var(--min);font-weight:600;font-size:clamp(22px,3.4vw,34px);line-height:1.6;text-wrap:balance;}
.ph-cta__tx{margin:0 0 clamp(30px,4vw,40px);font-size:15px;line-height:2;color:rgba(255,255,255,.82);}
.ph-cta__btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}

/* ===== デモリンク(4つの柱で使用) ===== */
.ph-demolink{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;letter-spacing:.04em;color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .3s var(--ease);}
.ph-demolink i{font-style:normal;transition:transform .3s var(--ease);}
@media (hover:hover){.ph-demolink:hover{border-color:var(--gold);}.ph-demolink:hover i{transform:translate(2px,-2px);}}
.ph-democred{margin:12px 0 0;font-size:12.5px;line-height:1.85;letter-spacing:.02em;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:11px 15px;word-break:break-all;}
.ph-democred span{display:block;font-family:var(--en);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.ph-democred b{font-weight:500;color:var(--navy);}

/* ===== 実績 ===== */
.ph-works{padding:clamp(64px,9vw,112px) 0;background:var(--navy-deep);color:#fff;}
.ph-works .ph-head__ttl{color:#fff;}
.ph-works .ph-head__lead{color:rgba(255,255,255,.75);}
.ph-works__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,30px);max-width:860px;margin-inline:auto;}
.ph-work{display:block;border:1px solid rgba(255,255,255,.16);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);text-decoration:none;transition:border-color .45s var(--ease),transform .45s var(--ease);}
@media (hover:hover){.ph-work:hover{border-color:var(--gold-soft);transform:translateY(-3px);}}
.ph-work__shot{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1);}
.ph-work__shot img{display:block;width:100%;height:auto;transition:transform .6s var(--ease);}
@media (hover:hover){.ph-work:hover .ph-work__shot img{transform:scale(1.05);}}
.ph-work__body{padding:clamp(24px,3.2vw,34px);}
.ph-work__en{margin:0 0 12px;font-family:var(--en);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);}
.ph-work__nm{margin:0 0 6px;font-family:var(--min);font-weight:600;font-size:clamp(20px,2.4vw,25px);color:#fff;letter-spacing:.04em;}
.ph-work__pref{margin:0;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.6);}
.ph-work__more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:12.5px;letter-spacing:.06em;color:var(--gold-soft);}
.ph-work__more i{font-style:normal;transition:transform .3s var(--ease);}
@media (hover:hover){.ph-work:hover .ph-work__more i{transform:translate(2px,-2px);}}

/* レスポンシブ */
@media (max-width:900px){
  .ph-hero__inr{grid-template-columns:1fr;gap:clamp(38px,7vw,54px);}
  .ph-hero__visual{max-width:540px;width:100%;margin-inline:auto;}
  .ph-hero__sub{max-width:none;}
}
@media (max-width:768px){
  .ph-issues__grid{grid-template-columns:repeat(2,1fr);}
  .ph-layers__grid{grid-template-columns:1fr;}
  .ph-rep__inr{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .ph-step{grid-template-columns:1fr;gap:8px;}
  .ph-step__n{min-width:0;}
}
@media (max-width:500px){
  .ph-issues__grid{grid-template-columns:1fr;}
}