:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#5d6b7a;
  --primary-400:#7cc7ff;
  --primary-500:#3ea8ff;
  --primary-600:#157fff;
  --accent:#00c2a8;
  --surface:#f7fafc;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.75;
}

.logo img{
  max-width: 30px;
  width: 100%;
}


.container{width:min(1120px,92%);margin-inline:auto}

.section{padding:64px 0}
.section-title{font-size: clamp(22px, 3.6vw, 32px); margin:0 0 24px; font-weight:900; letter-spacing:.02em}

.lead{font-size:clamp(16px,2.6vw,18px); color:var(--muted)}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #eef2f7;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}

.brand-text{font-size:18px; letter-spacing:.06em}

.nav-toggle{display:none; background:transparent; border:0; padding:6px 4px; cursor:pointer}
.nav-toggle-bar{display:block; width:26px; height:2px; background:#111; margin:5px 0; border-radius:2px}

.nav-menu{display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0}
.nav-menu a{display:block; padding:10px; text-decoration:none; color:#111; font-weight:500}
.nav-menu .cta a{background:var(--primary-600); color:#fff; border-radius:999px; padding:10px 16px; box-shadow:var(--shadow)}

.hero {
  position: relative;
  z-index: 2;  /* ← テキスト・ボタンを最前面に */
  width: 100%;
  min-height: 768px; /* 画像の高さに合わせたい場合 */
  background: url("../img/main.jpg") no-repeat center center;
  background-size: cover; /* 幅100%で高さもカバー */
  display: flex;
  align-items: center;
}
.hero-inner{display:grid; grid-template-columns: 1.15fr .85fr; align-items:center; gap:24px}
.hero-copy h1 {
  font-size: 3.2em;
  line-height: 1.4;
  margin: 0 0 12px;
  letter-spacing: .02em;
  color: #fff;
  padding-top: 200px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6); /* ← シャドウ追加 */
  z-index: 2;
}

.hero .hero-ctas {
  position: relative;
  z-index: 2;  /* ← ボタンも最前面に */
}


.hero-copy p {
  font-size: 1.4em;
  color: #fff; /* 背景が暗い/明るい場合は白字に */
  margin: 0 0 20px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5); /* ← シャドウ追加 */
  z-index: 2;
}
.hero-ctas{display:flex; gap:20px; flex-wrap:wrap}

.btn{display:inline-block; padding:24px 36px; border-radius:12px; text-decoration:none; font-weight:700; border:2px solid #0000; transition:.2s transform, .2s filter;font-size: 1.4em;}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary-600); color:#fff}
.btn-outline{border-color:var(--primary-600); color:var(--primary-600); background:#fff}

.hero-art{position:relative; min-height:280px}
.hero .blob {
  width: 80%;
  height: auto;
  filter: drop-shadow(0 15px 40px rgba(21,127,255,.25));
  transform: translateY(300px); /* ← 100px下に移動 */
  position: absolute;  /* ← hero 内で絶対配置 */
  top: 30%;
  left: 20%;
  transform: translateX(-50%); /* 中央に配置する例 */
  z-index: 0; /* ← 背面に回す */
}
.hero .blob path {
  fill: rgba(21,127,255,0.4); /* 色＋40%透過 */
}
.stats {
  position: absolute;
  right: 20%;     /* ← inset をバラして書くと分かりやすい */
  bottom: -100px;      /* ← 下から 0 にして一番下へ */
  display: flex;
  gap: 16px;
  transform: translateX(200px) scale(1.3);
  transform-origin: bottom right;
}

.stat {
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px 20px;   /* 内側も広げる */
  text-align:center;
  min-width: 120px;    /* ← 最低幅を設定（例:120px） */
  margin-top: 50px;
}

.stat .num {
  font-size: 32px;  /* 数字を大きく */
  font-weight: 900;
}

.stat .label {
  display: block;
  font-size: 14px;  /* ラベルも少し大きく */
  color: var(--muted);
}

.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
.feature {
  background: var(--surface);
  padding: 18px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-align: center; /* 画像と見出しを中央寄せに */
}

.feature-img {
  width: 100%;
  max-width: 360px; /* ← 画像の最大サイズ（調整可） */
  height: auto;
  margin-bottom: 12px;
  border-radius: 8px; /* 丸みをつけたい場合 */
  display: inline-block;
}
.feature h3{margin:0 0 6px; font-size:18px}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:#fff; border:1px solid #eef2f7; padding:18px; border-radius:16px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px}

.benefits{background:var(--surface)}
.benefit-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; list-style:none; padding:0; margin:10px 0 0}
.badge{display:inline-block; background:var(--primary-500); color:#fff; font-size:12px; padding:2px 8px; border-radius:999px; margin-right:8px}

.message-inner{display:grid; grid-template-columns: .9fr 1.1fr; gap:24px; align-items:center}
.message-photo {
  border-radius: 20px;
  min-height: 240px;
  background: url("../img/doctor.jpg") no-repeat center center;
  background-size: cover;  /* 枠いっぱいに表示 */
  box-shadow: var(--shadow);
}
.values{padding-left: 18px}
.values li{margin:6px 0}

.positions{background:#fff}
.tabs{display:flex; gap:8px; margin:14px 0 18px}
.tab{background:#fff; border:1px solid #dbe5ef; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700}
.tab.is-active{background:var(--primary-600); color:#fff; border-color:var(--primary-600)}

.tabpanels .tabpanel{display:none}
.tabpanels .tabpanel.is-active{display:block; animation: fade .25s ease}
@keyframes fade{from{opacity:.7}to{opacity:1}}

.job-grid{display:grid; grid-template-columns:1fr 2fr; gap:10px 18px; align-items:start; background:#fff; border:1px solid #eef2f7; padding:18px; border-radius:16px; box-shadow:var(--shadow)}
.job-grid dt{font-weight:700}
.job-grid dd{margin:0}
.job-cta{margin-top:14px}

.voices{background:var(--surface)}
.slider{position:relative; overflow:hidden; border-radius:18px; background:#fff; border:1px solid #eef2f7; box-shadow:var(--shadow); padding:26px}
.slide{display:none}
.slide.is-active{display:block}
blockquote{margin:0 0 8px; font-size:18px}
.who{margin:0; color:var(--muted); font-size:14px}
.slider-controls{position:absolute; inset:auto 12px 12px auto; display:flex; gap:8px}
.slider-controls button{border:1px solid #cfd9e4; background:#fff; width:36px; height:36px; border-radius:999px; cursor:pointer; font-size:20px; line-height:1}

.faq .qa{border:1px solid #e6edf5; border-radius:12px; padding:10px 14px; background:#fff; box-shadow:var(--shadow); margin:12px 0}
.faq summary{cursor:pointer; font-weight:700}
.qa[open] summary{color:var(--primary-600)}

.entry{background:#fff}
.entry-form .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.entry-form label{display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:14px}
.entry-form input, .entry-form select, .entry-form textarea{
  width:100%; padding:12px 14px; border:1px solid #dbe5ef; border-radius:12px; font:inherit; background:#fff;
}
.entry-form .req{color:#fff; background:crimson; padding:0 6px; border-radius:6px; font-size:12px; margin-left:8px;max-width: 60px;text-align: center;}
.agree{margin:10px 0}
.form-ctas{display:flex; align-items:center; gap:14px; margin-top:10px}
.note{color:var(--muted); font-size:12px}

.site-footer{padding:24px 0; background:#0b1220; color:#c7d1e0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.back-to-top{color:#c7d1e0; text-decoration:none; border:1px solid #2b364a; padding:8px 10px; border-radius:10px}

.sp-only{display:none}


.clinic-visual {
  height: 400px; /* 高さ400px */
  width: 100%;
  background: url("../img/city.jpg") no-repeat center center;
  background-size: cover;   /* 画像を全面表示 */
  background-attachment: fixed; /* ← スクロール時に背景を固定してパララックス風 */
}

.clinic-visual2 {
  height: 400px; /* 高さ400px */
  width: 100%;
  background: url("../img/fukuri.jpg") no-repeat center center;
  background-size: cover;   /* 画像を全面表示 */
  background-attachment: fixed; /* ← スクロール時に背景を固定してパララックス風 */
}

.points-image {
  margin-top: 30px;          /* 上のカードとの間隔 */
  text-align: center;        /* 中央寄せ */
}

.points-image img {
  max-width: 100%;           /* 横幅いっぱい（親要素に合わせる） */
  height: auto;              /* 縦横比を維持 */
  border-radius: 12px;       /* 角丸にしたい場合 */
  box-shadow: var(--shadow); /* 既存の影と統一感 */
}

.card-img {
  width: 100%;          /* 横幅いっぱい */
  height: auto;         /* アスペクト比維持 */
  border-radius: 8px;   /* 角丸にしたい場合 */
  margin-bottom: 12px;  /* 見出しとの間に余白 */
  display: block;
}


/* ==== Staff Voices (list) ==== */
.voices-list {
  display: grid;
  gap: 16px;
}

.voice {
  display: grid;
  grid-template-columns: 200px 1fr; /* ← 左幅を300pxに固定 */
  gap: 20px;
  align-items: start;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
}


.voice-left {
  text-align: center;
  width: 100%;  
}

.voice-avatar {
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 999px;
  display: block;
  margin: 0 auto 10px;
  background: #eee;
  max-width: 100px;                 /* 似顔絵を大きめに */
  width: 100%;
  margin-bottom: 12px;
}

.voice-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}



.voice-meta .meta-label {
  display: inline-block;
  min-width: 3em;
  font-weight: 700;
  color: var(--text);
  margin-right: .4em;
}

.voice-right blockquote {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
}

/* =============================
   Tablet (<=1024px)
============================= */
@media (max-width: 1024px){

      .hero .blob{
    display: none !important;
  }

  /* Header / Nav */
  .nav-toggle{ display:block; }
  .nav-menu{
    position: fixed;
    inset: 56px 0 auto 0;
    background: #fff;
    border-top: 1px solid #eef2f7;
    flex-direction: column;
    padding: 10px 12px;
    transform: translateY(-120%);
    transition: .2s transform;
    z-index: 100;
  }
  .nav-menu.show{ transform: translateY(0); }
  .nav-menu a{ padding: 14px; }
  .nav-menu .cta a{ padding: 12px 18px; }

  /* Hero */
  .hero{
    min-height: 560px;
    padding: 56px 0 24px;          /* 内側余白で高さを演出 */
    background-position: center top;
    position: relative;
    overflow: hidden;              /* はみ出し防止 */
  }
  .hero-inner{
    grid-template-columns: 1fr;    /* 1カラム */
    gap: 16px;
  }

  /* 前面に出したい塊（テキスト・ボタン） */
  .hero-copy{
    text-align: center;
    position: relative;
    z-index: 2;                    /* 兄弟の hero-art より前 */
    margin-top: 220px;             /* 下げる（必要に応じて調整） */
  }
  .hero-copy h1{
    padding-top: 0;                /* PCの200pxを無効化 */
    font-size: clamp(26px, 4.4vw, 36px);
    line-height: 1.3;
  }
  .hero-copy p{
    font-size: clamp(15px, 2.2vw, 18px);
  }
  .hero-ctas{
    gap: 12px;
    justify-content: center;
  }
  .btn{
    padding: 16px 24px;
    font-size: 1rem;
    border-radius: 12px;
  }

  /* blob を背面へ */
  .hero-art{ position: relative; z-index: 1; }
  .hero .blob{
    position: absolute;
    z-index: 0;                    /* 最背面 */
    left: 50%;
    top: 0;
    width: 68%;
    max-width: 520px;
    transform: translate(-50%, 70px);  /* 位置は1行で指定（上書き安全） */
    pointer-events: none;
    filter: drop-shadow(0 12px 28px rgba(21,127,255,.22));
  }

  /* ヒーロー内の stats は流し込み */
  .stats{
    position: static !important;
    transform: none !important;
    margin-top: 8px;
    justify-content: center;
    gap: 10px;
  }
  .stat{ padding: 10px 12px; }
  .stat .num{ font-size: 22px; }
  .stat .label{ font-size: 12px; }

  /* Section spacing / type scale */
  .section{ padding: 56px 0; }
  .section-title{ font-size: clamp(22px, 3.4vw, 30px); }
  .lead{ font-size: clamp(15px, 2.2vw, 17px); }

  /* About（特徴） */
  .features-grid{ grid-template-columns: repeat(2,1fr); gap: 16px; }
  .feature-img{ max-width: 100%; border-radius: 10px; }

  /* Points（カード） */
  .cards{ grid-template-columns: repeat(2,1fr); gap: 16px; }
  .card-img{ border-radius: 10px; }

  /* パララックス画像は固定を解除（チラつき対策） */
  .clinic-visual, .clinic-visual2{
    background-attachment: scroll;
    height: 360px;
  }

  /* Message */
  .message-inner{ grid-template-columns: 1fr; }
  .message-photo{ min-height: 260px; }

  /* Benefits */
  .benefit-list{ grid-template-columns: repeat(2,1fr); }

  /* Positions（募集要項） */
  .tabs{ flex-wrap: wrap; }
  .tab{ padding: 10px 14px; }
  .job-grid{ grid-template-columns: 1fr; gap: 8px 14px; }

  /* Slider */
  .slider{ padding: 22px; }
  .slider-controls button{ width: 40px; height: 40px; }

  /* Form */
  .entry-form .grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .entry-form input, .entry-form select, .entry-form textarea{ font-size: 16px; }
  .agree{ margin: 12px 0; }
  .form-ctas{ margin-top: 12px; }

.voice {
    grid-template-columns: 140px 1fr;
    gap: 14px;
  }
  .voice-avatar { width: 104px; }
  .voice-right blockquote { font-size: 17px; }


}





/* =============================
   Smartphone (<=600px)
============================= */
@media (max-width: 600px){

    .hero .blob{
    display: none !important;
  }

  /* Base spacing / type */
  .container{ width: min(100%, 92%); }
  .section{ padding: 44px 0; }
  .section-title{ font-size: clamp(20px, 6vw, 26px); }
  .lead{ font-size: 15px; }

  /* Header */
  .header-inner{ padding: 8px 0; }
  .brand-logo{ font-size: 24px; }
  .brand-text{ font-size: 15px; }
  .nav-menu a{ padding: 14px 16px; }
  .nav-menu .cta a{ border-radius: 12px; }

  /* Hero */
  .hero{
    min-height: 250px;             /* ← 高さをさらに縮める */
    padding: 20px 0;               /* 上下の余白も減らす */
    background-size: cover;        /* 縦横比を維持してカバー */
    background-position: center center; /* 中央寄せで左右を強調 */
  }

  .hero-copy {
    margin-top: 60px;   /* ← 中身をさらに下げる */
    text-align: center;
  }


  .hero-copy h1{
    padding-top: 0;          /* ← 200pxを無効化 */
    margin-top: 200px;       /* ← 下にずらす本命 */
    font-size: clamp(22px, 7vw, 30px);
  }
  .hero-copy p{ font-size: 15px; }

  .btn{
    padding: 12px 18px;
    font-size: .95rem;
    border-radius: 10px;
  }

  /* blob サイズ・位置をより安全に */
  .hero .blob{
    width: 84%;
    max-width: 380px;
    transform: translate(-50%, 50px);
  }

  /* stats は自然に縦フロー */
  .stats{
    position: static;
    transform: none;
    margin-top: 10px;
    justify-content: center;
  }
  .stat{ padding: 10px 12px; min-width: 96px; }
  .stat .num{ font-size: 20px; }
  .stat .label{ font-size: 12px; }

  /* About */
  .features-grid{ grid-template-columns: 1fr; }
  .feature{ padding: 14px; }
  .feature h3{ font-size: 17px; }
  .feature-img{ border-radius: 10px; }

  /* Points */
  .cards{ grid-template-columns: 1fr; }
  .card{ padding: 16px; }
  .card h3{ font-size: 17px; }

  /* パララックス（iOS対策で固定無効） */
  .clinic-visual, .clinic-visual2{
    height: 260px;
    background-attachment: scroll !important;
  }

  /* Message */
  .message-inner{ gap: 16px; }
  .message-photo{ min-height: 200px; }
  .values{ padding-left: 0; }
  .values li{ margin: 4px 0; }

  /* Benefits */
  .benefit-list{ grid-template-columns: 1fr; gap: 10px; }
  .badge{ font-size: 11px; }

  /* Positions */
  .tabs{ gap: 6px; }
  .tab{ padding: 8px 10px; font-size: 14px; }
  .job-grid{ grid-template-columns: 1fr; gap: 8px; }
  .job-cta{ margin-top: 10px; }

  /* Voices */
  .slider{ padding: 18px; }
  blockquote{ font-size: 16px; }

  /* FAQ */
  .faq .qa{ padding: 10px 12px; }
  .faq summary{ font-size: 15px; }

  /* Form */
  .entry-form .grid{ grid-template-columns: 1fr; gap: 12px; }
  .entry-form label{ font-size: 14px; }
  .entry-form input, .entry-form select, .entry-form textarea{ font-size: 16px; }
  .agree{ margin: 10px 0 6px; }
  .form-ctas{
    margin-top: 8px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .note{ font-size: 11px; }

  /* Footer */
  .footer-inner{ flex-direction: column; gap: 10px; text-align: center; }
  .back-to-top{ padding: 8px 10px; }

  .voices-list { gap: 12px; }
  .voice {
    grid-template-columns: 100px 1fr; /* 2カラムのまま読みやすく */
    gap: 12px;
    padding: 14px;
  }
  .voice-avatar { width: 84px; }
  .voice-right blockquote { font-size: 16px; }


}