@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root{
  --navy: #171c61;
  --blue: #2cace2;
  --blue-dark: #1b98cc;
  --blue-pale: #e4f2fd;
  --blue-pale-2: #dceefb;
  --ink: #1c2333;
  --sub: #5a6376;
  --line: #e4e8f2;
  --white: #ffffff;
  --accent-orange: #ff8a3d;
  --cta-dark: #171c61;
  --radius: 14px;
  --maxw: 1160px;

  /* radius scale */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* shadow scale */
  --shadow-sm: 0 4px 14px rgba(30,42,90,.07);
  --shadow-md: 0 10px 28px rgba(30,42,90,.09);
  --shadow-lg: 0 20px 44px rgba(30,42,90,.14);

  /* section rhythm */
  --section-pad: 96px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Roboto","Noto Sans JP", sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f3f6fd 0%, #ffffff 6%, #ffffff 94%, #f3f6fd 100%);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.brand{font-family:"Roboto","Noto Sans JP",sans-serif; line-height:1.3; letter-spacing:-.01em;}
a{text-decoration:none; color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
section{scroll-margin-top:80px;}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.12s;}
.reveal-delay-2{transition-delay:.24s;}
.reveal-delay-3{transition-delay:.36s;}
.reveal-delay-4{transition-delay:.48s;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:#ffffff;
  border-bottom:1px solid #f0f0f0;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:18px clamp(16px,4vw,40px); gap:12px;}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-mark{
  width:38px; height:38px; border-radius:9px;
  background:linear-gradient(135deg,var(--blue),#3fc7d6);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:18px; flex-shrink:0;
}
.brand-logo-img{height:clamp(26px,8vw,56px); width:auto; max-width:220px; display:block;}
@media (max-width:359px){
  .header-inner{flex-wrap:wrap; justify-content:center; gap:10px; padding:12px 16px;}
}
.brand-text{line-height:1.25;}
.brand-text .en{font-size:16px; font-weight:900; letter-spacing:.03em; color:var(--navy);}
.brand-text .jp{font-size:11px; color:var(--sub); letter-spacing:.04em;}
.nav-actions{
  display:flex; align-items:stretch;
}
.nav-actions .btn{
  border:2px solid var(--blue); margin:0;
  width:150px; flex:none; text-align:center; border-radius:0;
  letter-spacing:.15em;
}
.nav-actions .btn:first-child{border-radius:999px 0 0 999px; margin-right:19px;}
.nav-actions .btn:last-child{border-radius:0 999px 999px 0;}
.nav-actions .btn-primary{background:var(--blue); color:#fff;}
.nav-actions .btn-primary:hover{background:#fff; color:var(--blue);}
.nav-actions .btn-outline{background:#fff; color:var(--blue);}
.nav-actions .btn-outline:hover{background:var(--blue); color:#fff;}
@media (max-width:639px){
  /* below 640px only the primary button is visible (see rule below), so it should be a full pill, not a half pill, and shouldn't be a fixed 150px which is too wide for small phones */
  .nav-actions .btn{width:auto; padding:10px 18px; font-size:12.5px; letter-spacing:.06em;}
  .nav-actions .btn:first-child{border-radius:999px; margin-right:0;}
}
@media (max-width:359px){
  .nav-actions .btn{padding:9px 14px; font-size:11.5px;}
}
.btn{
  display:inline-block;
  padding:12px 26px;
  border-radius:999px; font-weight:700; font-size:14px;
  letter-spacing:.01em;
  border:2px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.98);}
.btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.btn-outline{border-color:var(--blue); color:var(--blue); background:#fff;}
.btn-outline:hover{background:var(--blue-pale);}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-white{background:#fff; color:var(--navy);}
.btn-white:hover{background:#f2f5ff;}
.header-inner .btn-outline{display:none;}
@media (min-width:640px){ .header-inner .btn-outline{display:inline-block;} }

/* ---------- hero (top page) ---------- */
.hero{position:relative; padding:72px 0 0; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:url('assets/illustrations/medical.svg');
  background-repeat:no-repeat;
  background-position:top center;
  background-size:cover;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color:var(--blue); background:var(--blue-pale); padding:7px 14px; border-radius:999px; margin-bottom:20px;
  letter-spacing:.03em;
}
.hero h1{font-size:clamp(34px, 5vw, 52px); font-weight:900; color:var(--navy); line-height:1.22; letter-spacing:-.01em;}
.hero h1 .accent{color:var(--blue);}
.hero p.lead{margin-top:22px; font-size:16px; color:var(--sub); max-width:46ch;}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-cta .btn{padding:15px 32px; font-size:15px;}
.hero .wrap{text-align:center;}
.hero p.lead{margin-left:auto; margin-right:auto;}
.hero-banner{
  --catchH: clamp(190px, 54vw, 780px);
  display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:0; padding:0;
}
.hero-banner img{display:block;}
.hero-banner .catch{height:var(--catchH); z-index:2;}
.hero-banner .men{height:calc(var(--catchH) * 0.885); margin-right:-1.5%; animation:floaty 5s ease-in-out infinite; animation-delay:1.1s;}
.hero-banner .lady{height:calc(var(--catchH) * 0.885); margin-left:-1.5%; animation:floaty 6.5s ease-in-out infinite; animation-delay:.6s;}
@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
@media (prefers-reduced-motion: reduce){ .hero-banner img{animation:none;} }

/* ---------- simple page banner (sub pages) ---------- */
.page-banner{
  position:relative; padding:64px 0 56px; text-align:center; overflow:hidden;
  background:#ffffff;
}
.page-banner::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url('assets/illustrations/medical.svg');
  background-repeat:no-repeat;
  background-position:top center;
  background-size:cover;
}
.page-banner .inner{position:relative; z-index:1;}
.page-banner .tag{display:inline-block; margin-bottom:10px;}
.page-banner h1{font-size:clamp(28px,4vw,38px); font-weight:900; color:var(--navy);}
.page-banner p{margin-top:14px; color:var(--sub); font-size:15px; max-width:680px; margin-left:auto; margin-right:auto;}

/* ---------- logos row ---------- */
.logos-sec{
  padding:4px 0 64px; text-align:center; position:relative;
  background:#ffffff;
}
.logos-sec::before{
  content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(43,79,217,.06), transparent 70%);
  top:-140px; right:10%; z-index:0;
}
.logos-sec .wrap{position:relative; z-index:1;}
.logos-sec h3{font-size:24px; font-weight:700; color:var(--navy); margin-bottom:32px;}
.logo-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px;}
.logo-chip{
  display:flex; align-items:center; justify-content:center;
  padding:10px 18px; height:64px;
  transition:transform .3s ease;
}
.logo-chip img{height:100%; max-width:150px; width:auto; object-fit:contain;}
.logo-chip:hover{transform:translateY(-4px);}

/* ---------- download / resource section ---------- */
.download-sec{padding:var(--section-pad) 0 calc(var(--section-pad) + 20px); position:relative; overflow:hidden; background:#ffffff;}
.download-sec .wrap{position:relative; z-index:1;}
.dl-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;}
@media (max-width:920px){ .dl-grid{grid-template-columns:1fr;} }
.tag{font-size:12.5px; font-weight:800; letter-spacing:.14em; color:var(--blue);}
.dl-grid h2{font-size:clamp(26px,3.4vw,34px); font-weight:900; color:var(--navy); margin:10px 0 18px;}
.dl-grid > div:first-child > p{color:var(--sub); font-size:19px; margin-bottom:28px;}
.checklist{border:none; border-radius:var(--r-lg); padding:32px 34px; background:var(--blue-pale); max-width:none; margin:32px 0 0; box-shadow:none;}
@media (max-width:480px){ .checklist{padding:24px 20px;} }
.checklist h4{text-align:left; color:var(--navy); font-size:20px; font-weight:900; margin-bottom:22px;}
.checklist ul{list-style:none; display:flex; flex-direction:column; gap:18px;}
.checklist li{display:flex; align-items:center; gap:14px; font-weight:700; color:var(--ink); font-size:16px;}
.checklist li .chk{width:28px; height:28px; flex-shrink:0;}
.brochure-stack{position:relative; margin-top:32px; height:150px;}
.brochure-stack .card{
  position:absolute; width:120px; height:150px; border-radius:8px; border:1px solid var(--line);
  background:linear-gradient(160deg,#fff,#eef3ff); box-shadow:0 14px 24px rgba(30,40,90,.12);
  transition:transform .35s ease;
}
.brochure-stack .card b{display:block; font-size:10px; color:var(--blue); padding:10px 10px 0;}
.brochure-stack .card:nth-child(1){left:0; transform:rotate(-9deg);}
.brochure-stack .card:nth-child(2){left:52px; transform:rotate(4deg); z-index:2;}
.brochure-stack .card:nth-child(3){left:104px; transform:rotate(-3deg); z-index:1;}
.brochure-stack:hover .card{transform:rotate(0deg) translateY(-6px);}
.brochure-photo{margin-top:32px; position:relative;}
.brochure-photo img{width:100%; height:auto; display:block; border-radius:14px; transition:transform .4s ease;}
.brochure-photo:hover img{transform:scale(1.035);}

/* ---------- form card (shared: resource + contact) ---------- */
.form-card{background:var(--blue-pale); border-radius:20px; padding:48px 44px 40px; box-shadow:none;}
@media (max-width:480px){ .form-card{padding:32px 22px 28px;} }
.form-card h3{text-align:center; font-size:19px; font-weight:900; color:var(--navy); margin-bottom:26px;}
.form-narrow{max-width:640px; margin:0 auto;}
.field{margin-bottom:24px;}
.field label{display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:8px;}
.req{color:#e0473b; margin-left:2px;}
.field input, .field textarea, .field select{
  width:100%; padding:13px 15px; border-radius:var(--r-sm); border:1.5px solid #d3ddf5; font-size:14px;
  font-family:inherit; background:#fff; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:hover, .field textarea:hover, .field select:hover{border-color:#b7c5f0;}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235a6376' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center;}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(43,79,217,.12);
}
.field textarea{resize:vertical; min-height:96px;}
.checks{display:flex; flex-direction:column; gap:14px; margin-top:4px;}
.check-row{
  display:flex; align-items:center;
  font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; line-height:1.4;
}
.check-row input[type=checkbox]{flex-shrink:0;}
.check-row span{margin-left:16px;}

/* カスタムチェックボックス（ブラウザ間の縦位置ズレを防ぐため、ネイティブ描画に依存しない） */
input[type=checkbox]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:20px; height:20px; margin:0; padding:0; flex-shrink:0;
  border:1.5px solid #c3cee9; border-radius:5px; background:#fff;
  position:relative; cursor:pointer; vertical-align:middle;
  transition:background .18s ease, border-color .18s ease;
}
input[type=checkbox]:checked{background:var(--blue); border-color:var(--blue);}
input[type=checkbox]:checked::after{
  content:""; position:absolute; left:50%; top:44%; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg);
}
input[type=checkbox]:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.privacy-row{display:flex; align-items:center; justify-content:center; gap:12px; margin:22px 0 18px; font-size:13.5px; flex-wrap:wrap; text-align:center;}
.privacy-row input[type=checkbox]{width:20px; height:20px;}
.privacy-row a{color:var(--blue); font-weight:700; text-decoration:underline;}
.submit-btn{
  width:100%; padding:16px; border:none; border-radius:999px; background:var(--navy); color:#fff;
  font-weight:700; font-size:15px; letter-spacing:.02em; transition:background .2s ease;
  position:relative;
}
.submit-btn:hover{background:#0f1340;}
.form-note{text-align:center; font-size:12px; color:var(--sub); margin-top:12px;}
a.submit-btn{display:block; text-align:center; text-decoration:none;}
.download-list{display:flex; flex-direction:column; gap:12px; margin-top:22px;}
.download-list .dl-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1.5px solid #d3ddf5; border-radius:var(--r-sm); padding:14px 18px;
  font-weight:700; font-size:14.5px; color:var(--navy); text-decoration:none;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.download-list .dl-item:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:0 8px 18px rgba(43,79,217,.14);}
.download-list .dl-item svg{flex-shrink:0;}
.download-note{font-size:12px; color:var(--sub); text-align:center; margin-top:18px;}
.success-check{
  width:64px; height:64px; border-radius:50%; background:#34c274; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  animation:pop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{ 0%{transform:scale(0); opacity:0;} 70%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;} }
.submit-btn.loading #submit-label, .submit-btn.loading .submit-label{opacity:0;}
.submit-btn.loading::after{
  content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{transform:rotate(360deg);} }
.shake{animation:shake .4s ease;}
@keyframes shake{ 20%,60%{transform:translateX(-6px);} 40%,80%{transform:translateX(6px);} }

/* ---------- pain point ---------- */
.pain-sec{
  background:#DCEEFB; padding:72px 0 64px; position:relative; overflow:hidden;
}
.pain-sec .wrap{position:relative; z-index:2;}
.pain-sec::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:170px; z-index:1;
  background:#FBDCE7;
  clip-path:polygon(0% 30%, 50% 85%, 100% 30%, 100% 100%, 0% 100%);
}
.pain-sec h2{text-align:center; font-size:clamp(32px,5vw,48px); font-weight:900; color:var(--navy); margin-bottom:40px;}
.pain-sec h2 .accent{
  position:relative; color:var(--blue); padding:0 2px;
}
.pain-sec h2 .dotchar{position:relative; display:inline-block;}
.pain-sec h2 .dotchar::before{
  content:""; position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--blue);
}
.pain-bubbles-img{
  display:block; width:100%; max-width:960px; height:auto; margin:0 auto; position:relative; z-index:2;
}
.pain-doctor-wrap{margin:28px auto 0; position:relative; z-index:2;}
.doctor-anim.pain-doctor-wrap{display:table;}
.pain-doctor-wrap img{display:block; height:280px; width:auto;}
@media (max-width:640px){ .pain-doctor-wrap img{height:200px;} }

/* ---------- doctor idle animation (shared) ---------- */
.doctor-anim{position:relative; display:inline-block;}
.doctor-anim .frame-b{position:absolute; top:0; left:0;}
.doctor-anim .frame-a{animation:doctorFadeA 5s ease-in-out infinite;}
.doctor-anim .frame-b{animation:doctorFadeB 5s ease-in-out infinite;}
@keyframes doctorFadeA{0%,45%{opacity:1;} 55%,100%{opacity:0;}}
@keyframes doctorFadeB{0%,45%{opacity:0;} 55%,100%{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .doctor-anim .frame-a, .doctor-anim .frame-b{animation:none;}
  .doctor-anim .frame-b{opacity:0;}
}

/* ---------- feature section ---------- */
.feature-sec{background:#FBDCE7; padding:0 0 var(--section-pad); position:relative; overflow:hidden;}
.feature-sec .wrap{position:relative; z-index:1;}
.feature-intro{display:flex; align-items:center; gap:36px; margin-bottom:12px;}
.feature-lady-wrap{flex-shrink:0;}
.feature-lady-wrap img{display:block; height:280px; width:auto;}
.feature-copy h2{font-size:clamp(30px,4.6vw,42px); font-weight:900; color:var(--navy); line-height:1.4;}
.feature-copy h2 .accent-red{color:#F25862;}
.feature-copy p{margin-top:12px; color:var(--ink); font-size:19px; line-height:1.8;}
@media (max-width:760px){
  .feature-intro{flex-direction:column; text-align:center; gap:16px;}
  .feature-lady-wrap img{height:200px;}
}
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:640px){ .feat-grid{grid-template-columns:1fr;} }
.feat-card{
  background:#fff; border-radius:20px; padding:44px 32px;
  box-shadow:0 10px 26px rgba(23,28,97,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  scroll-margin-top:100px;
}
@media (max-width:480px){ .feat-card{padding:32px 24px;} }
.feat-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(23,28,97,.12);}
.feat-card img{height:42px; width:auto; max-width:200px; margin-bottom:22px; display:block; object-fit:contain;}
.feat-card p{color:var(--sub); font-size:16.5px; line-height:1.9;}

/* ---------- CTA banner (links to resource/contact from other pages) ---------- */
.cta-banner{background:var(--blue-pale); padding:var(--section-pad) 0; text-align:center;}
.cta-banner h2{font-size:clamp(22px,3.2vw,28px); font-weight:900; color:var(--navy); margin-bottom:14px;}
.cta-banner p{color:var(--sub); font-size:14.5px; margin-bottom:28px;}
.cta-banner .hero-cta{justify-content:center;}

/* ---------- final CTA (dark) ---------- */
.final-cta{background:#ffffff; color:var(--ink); padding:var(--section-pad) 0; text-align:center; position:relative; overflow:hidden;}
.final-cta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url('assets/illustrations/medical.svg');
  background-repeat:no-repeat; background-position:top center; background-size:cover;
}
.final-cta .wrap{position:relative; z-index:1;}
.final-cta h2{font-size:clamp(24px,3.6vw,32px); font-weight:900; color:var(--navy); margin-bottom:36px;}
.final-cta .hero-cta{justify-content:center; gap:24px;}
.final-cta .hero-cta .btn{padding:17px 0; font-size:17px; width:230px; text-align:center;}
@media (max-width:480px){
  .final-cta .hero-cta{gap:14px;}
  .final-cta .hero-cta .btn{width:100%; max-width:280px;}
}
.phone-line{margin-top:38px; font-size:clamp(24px,7vw,32px); font-weight:900; color:var(--navy); display:flex; align-items:center; justify-content:center; gap:12px;}
.phone-line img{width:20px; height:auto; display:block;}
.final-cta .receipt-hours{display:block; text-align:center; color:var(--navy); margin-top:10px; font-size:17px; font-weight:700;}

/* ---------- privacy policy content ---------- */
.policy-sec{padding:var(--section-pad) 0 calc(var(--section-pad) + 20px);}
.policy-doc{max-width:820px; margin:0 auto; color:var(--ink); font-size:14.5px;}
.policy-doc > p.intro{margin-bottom:36px; color:var(--sub); line-height:1.9;}
.policy-article{margin-bottom:34px;}
.policy-article h2{
  display:flex; align-items:center; gap:10px; font-size:17px; font-weight:900; color:var(--navy); margin-bottom:14px;
}
.policy-article h2::before{content:""; width:4px; height:20px; background:var(--blue); border-radius:2px; display:inline-block;}
.policy-article p{color:var(--sub); line-height:1.9;}
.policy-article ul{margin:12px 0 0 4px; padding-left:18px; color:var(--sub); line-height:1.9;}
.policy-contact{background:var(--blue-pale); border-radius:14px; padding:26px 28px; margin-top:40px; font-size:14px; color:var(--ink); line-height:1.9;}
.policy-date{text-align:right; margin-top:36px; color:var(--sub); font-size:13px;}

/* ---------- footer ---------- */
footer{background:var(--blue-pale-2); padding-top:48px;}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; padding-bottom:32px;}
.foot-links-group{display:flex; gap:64px; flex-wrap:wrap;}
.foot-col{display:flex; flex-direction:column; gap:14px; font-size:14px; font-weight:500; color:var(--ink);}
.foot-col a:hover{color:var(--blue);}
.foot-social{display:flex; gap:14px; margin-top:4px; align-items:center;}
.foot-social a{
  display:flex; align-items:center; justify-content:center;
}
.foot-social a:hover{opacity:.7;}
.foot-social img{width:22px; height:22px;}
.copyright{padding:18px 0 32px; font-size:12px; color:var(--sub); text-align:center;}
@media (max-width:560px){
  .foot-top{justify-content:center; text-align:center;}
  .foot-links-group{gap:40px; justify-content:center; width:100%;}
  .foot-col{align-items:center;}
  .foot-social{justify-content:center;}
}