/* ============================================================
   医師の履歴書 — DOCTORS CYLINDER / styles（黒背景・映像的）
   ============================================================ */
:root{
  --bg:#f6f8fb;            /* ほぼ白（わずかに青み） */
  --ink:#14161a;          /* 濃いインク */
  --muted:rgba(20,22,26,.56);
  --line:rgba(20,22,26,.1);
  --gold:#a9863f;
  --neon-1:#22d3ee; --neon-2:#c05bff; --neon-3:#4f7bff;
  --cyan:#15c2dd; --teal:#22d3ee;
  --serif:"Shippori Mincho B1","Noto Serif JP",serif;
  --sans:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --latin:"Cormorant Garamond",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}

/* 背景：白（ヒーローは独自の新聞パース背景を持つ） */
.bg-field{position:fixed;inset:0;z-index:-1;background:#fff}
.bg-field span{display:none}
.bg-field .w1{top:6%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220'%3E%3Cpath d='M0 130 C 130 40 260 220 390 130 S 650 40 780 130' fill='none' stroke='%2322d3ee' stroke-width='2.4' opacity='.6'/%3E%3C/svg%3E")}
.bg-field .w2{top:36%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220'%3E%3Cpath d='M0 110 C 130 200 260 20 390 110 S 650 200 780 110' fill='none' stroke='%23c05bff' stroke-width='2.4' opacity='.55'/%3E%3C/svg%3E");animation-duration:32s;animation-direction:reverse}
.bg-field .w3{top:64%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220'%3E%3Cpath d='M0 140 C 130 60 260 230 390 140 S 650 60 780 140' fill='none' stroke='%234f7bff' stroke-width='2' opacity='.5'/%3E%3C/svg%3E");animation-duration:28s}
@keyframes wave{from{background-position-x:0}to{background-position-x:520px}}

/* ===== ヘッダー（ナビ） ===== */
.site-head{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:15px clamp(16px,3vw,40px);transition:background .4s ease,box-shadow .4s ease}
.site-head.show{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:60px;width:auto}
.brand .en{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.14em;line-height:1.45;color:var(--ink);
  border-left:1px solid var(--line);padding-left:16px}
.nav{display:flex;align-items:stretch;gap:0}
.nav a{display:flex;align-items:center;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.1em;
  padding:14px clamp(16px,2vw,30px);transition:background .3s,color .3s}
.nav .b-primary{background:#a9863f;color:#fff}
.nav .b-primary:hover{background:#8f6f23}
.nav .b-dark{background:#34424d;color:#fff;margin-left:10px}
.nav .b-dark:hover{background:#28333c}
.nav .b-outline{border:1px solid var(--ink);color:var(--ink);margin-left:10px}
.nav .b-outline:hover{background:var(--ink);color:#fff}
.nav .burger{margin-left:14px;width:52px;height:52px;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:0}
.nav .burger i{width:20px;height:1.5px;background:var(--ink)}
@media(max-width:860px){ .nav a{display:none} .brand .en{display:none} }

/* ===== ヒーロー（白〜グレーのグラデーション＋流れるライン） ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;
  background:linear-gradient(158deg,#ffffff 0%,#eef1f5 52%,#e2e6ee 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  padding:clamp(100px,15vh,164px) 0 clamp(80px,10vh,120px)}
/* 流れる曲線のアニメーション */
.hero__scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__lines{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);
  transform-origin:center;animation:lineSpin 72s linear infinite}
.hero__lines--b{animation:lineSpin 104s linear infinite reverse;opacity:.65}
.hero__lines svg{width:100%;height:100%;display:block}
.hero__lines [data-l]{fill:none;stroke:rgba(120,134,152,.30);stroke-width:1;vector-effect:non-scaling-stroke}
@keyframes lineSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* 明るいグレーのソフトなグラデーション面 */
.hero__scene::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 54% at 50% 46%, rgba(255,255,255,.82) 12%, rgba(255,255,255,.18) 52%, transparent 76%)}
.hero__sq{position:absolute;z-index:1;border-radius:50%;filter:blur(66px);pointer-events:none}
.hero__sq.s1{width:44vw;height:44vw;top:-14%;right:-8%;background:radial-gradient(circle,rgba(194,205,222,.55),transparent 70%);animation:blob 20s var(--ease) infinite alternate}
.hero__sq.s2{width:36vw;height:36vw;bottom:-16%;left:-10%;background:radial-gradient(circle,rgba(212,218,230,.5),transparent 70%);animation:blob 26s var(--ease) infinite alternate-reverse}
.hero__sq.s3{display:none}
@keyframes blob{from{transform:translate(0,0) scale(1)}to{transform:translate(3vw,-2vw) scale(1.12)}}
/* 見出し（巨大明朝） */
.hero__inner{position:relative;z-index:5;padding:0 24px}
.hero__head{font-family:var(--serif);font-weight:700;color:var(--ink);line-height:1.16;letter-spacing:.02em;
  font-size:clamp(38px,7.6vw,104px);text-shadow:0 2px 30px rgba(255,255,255,.9)}
.hero__head .ln{display:block;padding:0 .04em;white-space:nowrap}
.hero__head .ln b{display:inline-block;font-weight:700}
.hero__logo{width:clamp(320px,46vw,640px);height:auto;filter:drop-shadow(0 18px 50px rgba(0,0,0,.12));transform:translateY(clamp(24px,5vh,60px))}
.hero__head .g{background:linear-gradient(90deg,var(--neon-1),var(--neon-2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* アウトライン大型ロゴ */
.hero__outline{position:absolute;z-index:1;left:clamp(6px,1.6vw,26px);bottom:clamp(28px,7vh,72px);
  display:flex;align-items:flex-end;gap:clamp(4px,1vw,16px);pointer-events:none;
  font-family:"Archivo Black",sans-serif;color:transparent;-webkit-text-stroke:1.4px rgba(20,22,26,.85);
  letter-spacing:.005em;line-height:.8;text-transform:uppercase}
.hero__outline .v{writing-mode:vertical-rl;font-size:clamp(30px,4.6vw,68px)}
.hero__outline .h{font-size:clamp(34px,8vw,128px)}
/* PICK UP カード（斜め・青野医師） */
.hero__pick{position:relative;z-index:6;align-self:flex-end;margin-top:clamp(22px,4.5vh,58px);margin-right:clamp(16px,4vw,64px);
  width:min(34vw,376px);transform:none;background:#fff;border:1px solid var(--line);
  box-shadow:0 34px 80px -34px rgba(20,30,50,.45);padding:20px 22px;transition:transform .5s var(--ease)}
.hero__pick:hover{transform:translateY(-6px)}
.hero__pick .top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:16px}
.hero__pick .top .pl{font-family:var(--sans);font-weight:700;letter-spacing:.16em;font-size:12px;color:var(--ink)}
.hero__pick .top .wm{font-family:var(--latin);letter-spacing:.2em;font-size:10px;color:var(--muted);text-transform:uppercase}
.hero__pick .body{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.hero__pick .body img{width:96px;height:128px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.hero__pick h3{font-family:var(--serif);font-weight:700;font-size:clamp(16px,1.9vw,22px);line-height:1.45;letter-spacing:.03em;color:var(--ink)}
.hero__pick p{font-size:11.5px;line-height:1.85;color:var(--ink-soft);margin-top:9px}
.hero__pick .more{display:inline-block;margin-top:10px;font-family:var(--latin);letter-spacing:.16em;font-size:11px;color:var(--cyan);text-transform:uppercase}
/* スクロール誘導 */
.hero__cue{display:none}
.hero__cue span{font-family:var(--latin);font-size:11px;letter-spacing:.34em;text-transform:uppercase}
.hero__cue i{width:1px;height:48px;background:linear-gradient(180deg,var(--cyan),transparent);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--ink);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{top:-50%}60%,100%{top:120%}}
@media(max-height:680px){
  .hero__head{font-size:clamp(34px,6vw,72px)}
  .hero__pick{width:min(32vw,330px);margin-top:clamp(16px,3vh,36px)}
  .hero__pick .body img{width:80px;height:108px}
}
@media(max-width:760px){
  .hero{min-height:100svh;flex-direction:column;justify-content:flex-start;padding:110px 0 60px}
  .hero__head .ln{white-space:normal}
  .hero__inner{position:static}
  .hero__pick{align-self:center;margin:40px auto 0;transform:none;width:min(86vw,420px)}
  .hero__pick .body{grid-template-columns:78px 1fr;gap:12px}
  .hero__pick .body img{width:78px;height:104px}
  .hero__outline{display:none}
  .hero__cue{display:none}
}

/* Lightning 親テーマのセクション・見出しボーダーを無効化 */
.hero,.concept,.why,.helix,.droster,.contact{border:none !important}
.hero h1,.hero h2,.hero h3,
.concept h1,.concept h2,.concept h3,
.why h1,.why h2,.why h3,
.helix h1,.helix h2,.helix h3,
.droster h1,.contact h1{border:none !important}
.hero hr,.concept hr,.why hr,.helix hr,.droster hr,.contact hr{display:none !important}
.concept h2,.why h2,.droster__head h1,.contact h1{margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important;padding-bottom:0 !important}
.concept p,.why p{margin-top:0 !important;padding-top:0 !important;padding-bottom:0 !important}
.concept__body .lead{margin-bottom:1.1em !important}
.concept__body .body-txt{margin-bottom:0 !important}
.why__body p{margin-bottom:1.6em !important}
.why__body p:last-child{margin-bottom:0 !important}

/* ===== コンセプト（コラージュ風 A） ===== */
.concept{position:relative;background:linear-gradient(180deg,#e2e6ee 0%,#eef1f5 8%,#ffffff 22%,#ffffff 82%,#fbfcfd 100%);padding:clamp(90px,14vh,180px) clamp(24px,6vw,90px) clamp(48px,7vh,90px);overflow:hidden;display:flex;flex-direction:column;align-items:center;perspective:1200px}
.concept__collage{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform}
.concept__collage .cphoto{position:absolute;object-fit:cover;box-shadow:0 30px 60px -34px rgba(20,22,26,.4);filter:grayscale(.12)}
.concept__collage .p1{width:clamp(150px,17vw,290px);aspect-ratio:3/4;top:15%;left:3%}
.concept__collage .p2{width:clamp(120px,13vw,220px);aspect-ratio:3/4;top:52%;left:15%}
.concept__collage .p3{width:clamp(120px,15vw,250px);aspect-ratio:4/5;top:7%;right:7%}
.concept__collage .p4{width:clamp(100px,11vw,190px);aspect-ratio:3/4;top:33%;right:24%}
.concept__head{position:relative;z-index:2;width:100%;max-width:760px}
.concept__ja{font-family:var(--serif);font-weight:700;font-size:clamp(24px,4.6vw,68px);line-height:1.32;letter-spacing:.05em;color:var(--ink);line-break:strict;word-break:normal;overflow-wrap:normal}
.concept__ja .cl{display:block;white-space:nowrap}
.concept__ja .w{display:inline-block;opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.concept__ja .w.gold{background:linear-gradient(90deg,var(--neon-1),var(--neon-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.concept.in .concept__ja .w{opacity:1;transform:none}
.concept__body{position:relative;z-index:2;width:100%;max-width:760px;margin-top:clamp(28px,4vh,52px);
  opacity:0;transform:translateY(28px);transition:opacity 1s ease .2s,transform 1s var(--ease) .2s}
.concept.in .concept__body{opacity:1;transform:none}
.concept__body .lead{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.3vw,28px);line-height:1.95;letter-spacing:.04em;color:var(--ink);margin-bottom:1.1em}
.concept__body .body-txt{font-family:var(--serif);font-size:clamp(14px,1.5vw,16.5px);line-height:2.3;color:var(--ink-soft)}
.concept__body .em{background:linear-gradient(90deg,#e8a200,#f7c400 50%,#b9c400);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;text-shadow:0 0 1px rgba(180,130,0,.25)}
.concept__body .em-soft{font-weight:600;color:var(--ink)}
.concept__body{line-break:strict}

/* ===== Why we do this（2カラム B） ===== */
.why{position:relative;background:linear-gradient(180deg,#fbfcfd 0%,#f4f6fb 14%,#f4f6fb 100%);padding:clamp(40px,6vh,84px) clamp(24px,8vw,140px) clamp(100px,16vh,220px);perspective:1100px}
.why>*{position:relative;z-index:1}
.why__label{font-family:var(--sans);font-weight:700;letter-spacing:.1em;font-size:clamp(15px,1.6vw,19px);
  background:linear-gradient(90deg,#e8a200,#f7c400 50%,#b9c400);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:clamp(28px,4vh,48px);text-shadow:0 0 1px rgba(180,130,0,.25)}
.why__grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,80px);align-items:center;perspective:1100px;perspective-origin:42% 48%;transform-style:preserve-3d}
.why__media{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s var(--ease);transform-style:preserve-3d;will-change:transform}
.why.in .why__media{opacity:1;transform:none}
.why__media .tilt{transform-style:preserve-3d;will-change:transform,filter}
.why__media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;
  box-shadow:-26px 34px 70px -34px rgba(20,30,50,.5),0 10px 30px -20px rgba(20,30,50,.4)}
/* 控えめな映り込み */
.why__media .reflect{margin-top:6px;height:24%;border-radius:6px;overflow:hidden;opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);transform:scaleY(-1)}
.why__media .reflect img{box-shadow:none;border-radius:0}
.why__col{opacity:0;transform:translateY(24px);transition:opacity 1s ease .15s,transform 1s var(--ease) .15s}
.why.in .why__col{opacity:1;transform:none}
.why__head{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,44px);line-height:1.45;letter-spacing:.04em;color:var(--ink)}
.why__en{font-family:var(--latin);font-style:italic;font-size:clamp(13px,1.4vw,17px);letter-spacing:.08em;color:var(--muted);margin:14px 0 clamp(26px,4vh,40px)}
.why__body p{font-family:var(--serif);font-size:clamp(14px,1.5vw,16px);line-height:2.3;color:var(--ink-soft);margin-bottom:1.6em}
.why__body p:last-child{margin-bottom:0}
.why__closing{margin-top:clamp(34px,5vh,54px);padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--line)}
.why__closing p{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.6vw,32px);line-height:1.55;letter-spacing:.04em;color:var(--ink)}
.why__closing p:last-child{background:linear-gradient(90deg,#e8a200,#f7c400 50%,#b9c400);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:.25em;text-shadow:0 0 1px rgba(180,130,0,.22)}
@media(max-width:820px){
  .why__grid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:560px){
  .concept__body{margin-top:26px;max-width:100%}
}
/* モバイル・低速環境では3D演出を簡略化（平面表示にフォールバック） */
@media(max-width:760px){
  .why__grid{perspective:none}
  .why__media .tilt{transform:none !important}
  .why__media .reflect{display:none}
}
@media (prefers-reduced-motion:reduce){
  .why__media .tilt{transform:none !important}
  .concept__collage{transform:none !important}
}

/* ===== 医師一覧（円柱ギャラリー） ===== */
.helix{position:relative;background:transparent;margin-top:0}
.helix-stage{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
/* 選択/ホバー画像の大きな背景プレビュー（低不透明度＋ぼかし） */
.sel-bg{position:absolute;inset:-6%;z-index:0;background-size:cover;background-position:center;
  filter:blur(48px) saturate(1.15);opacity:0;transform:scale(1.06)}
.sel-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent,rgba(246,248,251,.62))}
#helix-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;cursor:pointer;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 88%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 88%, transparent 100%)}
/* タッチ端末：WebGLキャンバス全面へのマスク合成は iOS で負荷が高いため無効化
   （上下端のフェードは JS シェーダー側の uFade でも行われるので見た目は維持される） */
@media (hover: none), (pointer: coarse){
  #helix-canvas{-webkit-mask-image:none;mask-image:none}
}
.helix-head{position:absolute;top:clamp(48px,8vh,92px);left:clamp(20px,5vw,72px);z-index:4;pointer-events:none}
.helix-head .kick{display:flex;align-items:center;gap:10px;font-family:var(--latin);letter-spacing:.4em;
  font-size:12px;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.helix-head .kick i{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--neon-1),var(--neon-2))}
.helix-head h2{font-family:"Archivo Black",var(--sans);font-weight:400;line-height:.9;letter-spacing:-.01em;
  text-transform:uppercase;font-size:clamp(34px,5vw,86px);color:var(--ink)}

.helix-caption{position:absolute;left:50%;bottom:clamp(58px,10vh,104px);z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;pointer-events:none;width:90%}
.helix-caption .hl-name{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.4vw,44px);letter-spacing:.1em;color:var(--ink);line-height:1.1;text-shadow:0 2px 22px rgba(246,248,251,.8)}
.helix-caption .hl-clinic{font-size:clamp(13px,1.6vw,17px);letter-spacing:.12em;color:var(--ink);font-weight:500;text-shadow:0 2px 18px rgba(246,248,251,.85)}
.helix-caption .hl-visit{margin-top:12px;pointer-events:auto;opacity:0;transition:opacity .4s ease;
  font-family:var(--latin);letter-spacing:.2em;font-size:12px;text-transform:uppercase;color:#050507;
  background:var(--gold);padding:11px 26px;border-radius:30px}
.helix-caption .hl-visit:hover{background:var(--neon-3);color:#fff}

.helix-cue{position:absolute;left:50%;bottom:22px;z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);pointer-events:none}
.helix-cue span{font-family:var(--latin);font-size:11px;letter-spacing:.34em;text-transform:uppercase}
.helix-cue i{width:1px;height:40px;background:linear-gradient(180deg,var(--neon-3),transparent);position:relative;overflow:hidden}
.helix-cue i::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--ink);animation:cue 2.2s var(--ease) infinite}

/* ===== フッター ===== */
.site-foot{position:relative;background:transparent;border-top:1px solid var(--line);padding:clamp(70px,10vh,120px) clamp(24px,8vw,140px) 46px;overflow:hidden}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:44px;align-items:center}
.site-foot img{height:50px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,60px)}
.foot-links a{font-family:var(--serif);font-size:15px;letter-spacing:.08em;color:var(--muted);transition:color .4s}
.foot-links a:hover{color:var(--gold)}
.foot-bottom{margin-top:clamp(50px,8vh,90px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:11px;letter-spacing:.12em;color:rgba(20,22,26,.34)}
.foot-bottom span{font-family:var(--latin);letter-spacing:.2em}

@media (max-width:760px){
  .helix-caption .hl-name{font-size:24px}
  .helix-head h2{font-size:clamp(30px,9vw,54px)}
}
@media (prefers-reduced-motion:reduce){
  .helix-cue i::after,.hero__cue i::after,.bg-field span{animation:none}
}