/* ================================
   オンラインパーソナルトレーナー 個人ブランディングサイト（制作サンプル・架空）
   配色：ミント×ティール（爽やか×柔らかい／文字コントラストは確保）
================================ */
:root{
  --ink:#37424a;        /* 本文：濃いブルーグレー（読みやすさ担保） */
  --ink-d:#2b343c;
  --accent:#3fa796;     /* ティール（青緑） */
  --accent-d:#2f8578;   /* 濃いめ（ボタン・小見出し用） */
  --wash:#e7f4ef;       /* ミントの淡い帯 */
  --paper:#f9fbfa;      /* 白に近いミント */
  --white:#fff;
  --gray:#75808a;
  --line:#d9e8e2;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-size:16px;
}
img{max-width:100%;display:block;}

.pc-only{display:inline;}

.draft-note{
  background:#e3eeea;color:#5f7269;font-size:12px;text-align:center;
  padding:6px 16px;letter-spacing:.04em;
}

/* ---- 共通 ---- */
.section{padding:96px 24px;}
.section__inner{max-width:960px;margin:0 auto;}
.section__title{
  font-size:34px;line-height:1.4;margin-bottom:28px;font-weight:800;color:var(--ink-d);
}
.section__en{
  display:block;font-size:13px;letter-spacing:.35em;color:var(--accent-d);
  font-weight:700;margin-bottom:10px;
}
.btn{
  display:inline-block;background:var(--accent-d);color:var(--white);
  font-weight:700;text-decoration:none;text-align:center;letter-spacing:.06em;
  padding:16px 44px;border-radius:999px;
  box-shadow:0 4px 14px rgba(47,133,120,.3);
  transition:background .2s,transform .15s;
}
.btn:hover{background:#26695f;transform:translateY(1px);}

/* ---- スクロール表示（JSなしでも全部見える） ---- */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
html.js .reveal.is-in{opacity:1;transform:none;}

/* ================================
   ヒーロー
================================ */
.hero{
  position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(155deg,#ffffff 0%,#eef8f4 45%,#def0e8 100%);
  color:var(--ink-d);overflow:hidden;padding:64px 24px 72px;
}
.hero__bg{position:absolute;inset:0;pointer-events:none;}
.hero__word{
  position:absolute;right:-24px;bottom:-30px;
  font-size:170px;font-weight:900;letter-spacing:.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(47,133,120,.13);
  user-select:none;
}
.hero__rings{
  position:absolute;left:-140px;top:-140px;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(63,167,150,.35);
}
.hero__rings::before,.hero__rings::after{
  content:"";position:absolute;inset:46px;border-radius:50%;
  border:1px solid rgba(63,167,150,.22);
}
.hero__rings::after{inset:100px;border-color:rgba(63,167,150,.13);}

.hero__inner{
  position:relative;max-width:960px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
}
.hero__en{font-size:13px;letter-spacing:.4em;color:var(--accent-d);font-weight:700;margin-bottom:18px;}
.hero__catch{font-size:52px;line-height:1.35;font-weight:900;letter-spacing:.02em;margin-bottom:22px;color:var(--ink-d);}
.hero__lead{font-size:15px;color:#54636b;margin-bottom:36px;}
.hero__name{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;}
.hero__name-ja{font-size:26px;font-weight:800;color:var(--ink-d);}
.hero__name-en{font-size:12px;letter-spacing:.28em;color:#93a0a8;}
.hero__name-tag{
  font-size:12px;font-weight:700;color:var(--accent-d);
  border:1px solid rgba(47,133,120,.55);border-radius:999px;padding:3px 12px;background:rgba(255,255,255,.6);
}

/* 写真プレースホルダー（グラデ＋シルエット） */
.hero__photo{
  position:relative;aspect-ratio:5/6;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 70% 12%, rgba(120,210,190,.5), transparent 55%),
    linear-gradient(160deg,#d5ece2 0%,#aed6c8 60%,#8fc4b3 100%);
  display:flex;align-items:flex-end;justify-content:center;
  box-shadow:0 18px 40px rgba(60,130,115,.18);
}
.hero__photo::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px);
  background-size:14px 14px;
  mask-image:linear-gradient(115deg, transparent 55%, #000 85%);
  -webkit-mask-image:linear-gradient(115deg, transparent 55%, #000 85%);
}
.hero__silhouette{width:72%;fill:rgba(35,82,72,.38);}
.hero__photo-note{
  position:absolute;top:14px;left:16px;font-size:11px;letter-spacing:.3em;
  color:rgba(35,82,72,.5);font-weight:700;
}
.hero__scroll{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  font-size:10px;letter-spacing:.3em;color:#7fa79b;text-align:center;
}
.hero__scroll span{
  display:block;width:1px;height:34px;background:linear-gradient(#7fa79b,transparent);
  margin:0 auto 6px;
}

/* ================================
   数字で見る実績
================================ */
.stats{background:var(--wash);padding:0 24px;}
.stats__inner{
  max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
}
.stat{text-align:center;padding:44px 12px 48px;position:relative;}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:30%;height:40%;width:1px;background:rgba(47,133,120,.28);
}
.stat__num{font-size:52px;font-weight:900;color:var(--accent-d);line-height:1.1;letter-spacing:.02em;}
.stat__num span{font-size:26px;margin-left:2px;}
.stat__num--txt{font-size:38px;white-space:nowrap;}
.stat__num--txt span{font-size:24px;}
.stat__label{font-size:13px;color:#4f6a62;margin-top:8px;letter-spacing:.06em;font-weight:600;}

/* ================================
   経歴
================================ */
.story{background:var(--paper);}
.story__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;align-items:start;}
.story__photo{
  position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(110% 80% at 30% 10%, rgba(120,210,190,.4), transparent 55%),
    linear-gradient(200deg,#e6f3ec 0%,#cde4d8 100%);
  display:flex;align-items:flex-end;justify-content:center;
  position:sticky;top:32px;
  box-shadow:0 14px 30px rgba(60,130,115,.14);
}
.story__photo svg{width:70%;fill:rgba(35,82,72,.26);}
.story__photo-note{
  position:absolute;top:12px;left:14px;font-size:11px;letter-spacing:.3em;
  color:rgba(35,82,72,.45);font-weight:700;
}
.tl{display:flex;flex-direction:column;gap:34px;position:relative;padding-left:26px;}
.tl::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--accent), var(--line));
}
.tl__item{position:relative;}
.tl__item::before{
  content:"";position:absolute;left:-26px;top:9px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:3px solid var(--accent);
}
.tl__label{font-size:14px;font-weight:800;color:var(--accent-d);letter-spacing:.08em;margin-bottom:6px;}
.tl__text{font-size:15px;color:#46525a;}

/* ================================
   指導方針
================================ */
.policy{background:var(--white);}
.policy__lead{font-size:16px;color:#46525a;margin:-6px 0 40px;}
.policy__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.policy-card{
  background:var(--paper);border-radius:14px;padding:30px 24px 28px;position:relative;
  border-top:3px solid var(--accent);
}
.policy-card__num{
  font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--accent-d);margin-bottom:12px;
}
.policy-card__title{font-size:19px;font-weight:800;margin-bottom:12px;line-height:1.5;color:var(--ink-d);}
.policy-card__text{font-size:14px;color:#46525a;}

/* ================================
   お客様の声
================================ */
.voice{background:var(--wash);}
.voice__note{font-size:13px;color:#6f8279;margin:-8px 0 28px;}
.voice__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.voice-card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px;
  box-shadow:0 6px 18px rgba(60,130,115,.08);
}
.voice-card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.voice-card__avatar{
  width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;
  background:linear-gradient(160deg,#e6f3ec,#cde4d8);
  display:flex;align-items:flex-end;justify-content:center;
}
.voice-card__avatar svg{width:70%;fill:rgba(35,82,72,.32);}
.voice-card__meta{font-size:13px;font-weight:700;color:#46525a;}
.voice-card__text{font-size:14px;color:var(--gray);}

/* ================================
   お問い合わせ
================================ */
.contact{
  background:linear-gradient(150deg,#44ab99,#2c7f72);color:var(--white);
  text-align:center;padding:96px 24px;
}
.contact__en{font-size:13px;letter-spacing:.35em;color:#cdeee6;font-weight:700;margin-bottom:10px;}
.contact__title{font-size:32px;font-weight:900;margin-bottom:14px;}
.contact__text{font-size:15px;color:#e2f5f0;margin-bottom:34px;}
.contact .btn{background:var(--white);color:var(--accent-d);box-shadow:0 4px 14px rgba(0,0,0,.15);}
.contact .btn:hover{background:#ecf7f4;}
.contact__note{font-size:12px;color:#bfe6dd;margin-top:16px;}

/* ---- フッター ---- */
.footer{background:#e9f1ed;color:#7b8a83;text-align:center;padding:34px 24px;}
.footer__name{font-size:13px;letter-spacing:.35em;color:#50655d;font-weight:700;margin-bottom:8px;}
.footer__copy{font-size:11px;}
.footer__credit{font-size:10px;margin-top:6px;opacity:.85;}
.footer__credit a{color:inherit;}


/* ================================
   日本地図（ドットマトリクス）
   ※色は --accent / --accent-d のみ参照。配色を変えれば地図も追従する
================================ */
.jmap{background:var(--white);}
.jmap__lead{font-size:16px;color:#46525a;margin:-6px 0 36px;}
.jmap__wrap{max-width:400px;margin:0 auto;}
.jmap__canvas{aspect-ratio:300/340;}
.jmap__svg{width:100%;height:auto;display:block;overflow:visible;}
.jmap__land{fill:var(--accent);fill-opacity:.26;stroke:var(--accent);stroke-width:1;stroke-linejoin:round;}
.jmap__inset{fill:none;stroke:var(--accent);stroke-opacity:.4;stroke-width:1;stroke-dasharray:4 3;}
.jmap__on{fill:var(--accent-d);animation:jmapOn 2.8s ease-in-out infinite;}
.jmap__halo{
  fill:var(--accent);opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:jmapHalo 2.8s ease-in-out infinite;
}
@keyframes jmapOn{0%,100%{opacity:.5;}50%{opacity:1;}}
@keyframes jmapHalo{0%,100%{opacity:0;transform:scale(.35);}50%{opacity:.22;transform:scale(1);}}
/* 「視差効果を減らす」設定の人には、拡大縮小するハローだけ止める。
   明滅そのものは位置移動を伴わないので残す（そうしないと何も動かなく見えるため） */
@media (prefers-reduced-motion: reduce){
  .jmap__halo{animation:none;opacity:.14;}
}
.jmap__legend{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:700;color:#46525a;margin-top:14px;
}
.jmap__key{
  width:11px;height:11px;border-radius:50%;background:var(--accent-d);flex:none;
  box-shadow:0 0 0 4px var(--wash);
}
.jmap__note{font-size:12px;color:var(--gray);text-align:center;margin-top:8px;}

/* ================================
   レスポンシブ
================================ */
@media (max-width:820px){
  .pc-only{display:none;}
  .section{padding:64px 20px;}
  .section__title{font-size:26px;}
  .hero{min-height:0;padding:56px 20px 76px;}
  .hero__inner{grid-template-columns:1fr;gap:36px;}
  .hero__catch{font-size:36px;}
  .hero__word{font-size:96px;right:-12px;bottom:-14px;}
  .hero__photo{max-width:320px;margin:0 auto;width:100%;}
  .stats__inner{grid-template-columns:1fr;}
  .stat{padding:26px 12px;}
  .stat + .stat::before{left:30%;top:0;width:40%;height:1px;}
  .story__grid{grid-template-columns:1fr;}
  .story__photo{position:static;max-width:280px;margin:0 auto;}
  .policy__grid,.voice__grid{grid-template-columns:1fr;}
  .contact__title{font-size:26px;}
  .jmap__wrap{max-width:330px;}
  .jmap__lead{font-size:15px;}
}