/* =========================================================
   Ds クリニック — スマホ版 共通シェル（sp.css）
   mobile.css を .m 配下にスコープ化したもの。
   PC版 .stage と同一HTMLに同居させ、900px以下でPC版を隠しSP版を出す。
   PC版(style.css)には一切干渉しない。
   ========================================================= */
:root{
  --cream:#FFF8EC; --cream2:#FBF0DC; --blue:#DCF3FF; --blue-d:#3977C6;
  --orange:#F0831E; --orange-l:#FFAC47; --teal:#30A796; --purple:#93A0FF;
  --pink:#FFE6EE; --text:#4a4136; --text-l:#7a7064; --line:#EADFCB;
  --f:"Zen Maru Gothic",sans-serif; --fd:"DynaPuff",cursive;
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,48 L0,24 C170,4 330,30 540,22 C760,13 900,2 1120,18 C1270,29 1360,12 1440,20 L1440,48 Z' fill='%23000'/%3E%3C/svg%3E");
}

.m{display:none;}

@media (max-width:900px){
  html,body{overflow-x:hidden;}
  .stage{display:none!important;}
  .m{display:block;}
  .m *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  body{font-family:var(--f);color:var(--text);background:var(--cream);line-height:1.8;overflow-x:hidden;padding-bottom:64px;}
  .m img{max-width:100%;display:block;}
  .m a{color:inherit;text-decoration:none;}
  .m ul, .m ol{list-style:none;}
  .m .wrap{max-width:430px;margin:0 auto;background:#fff;min-height:100vh;position:relative;overflow:hidden;}
  .m .bg-w{background:#ffffff;}
  .m .bg-o{background:#FFF1E2;}
  .m .bg-b{background:#E9F5FB;}
  .m .sec::before, .m .recruit::before{content:"";position:absolute;left:0;top:0;width:100%;height:26px;transform:translateY(-25px);z-index:0;
  -webkit-mask:var(--wave) no-repeat bottom/100% 100%;mask:var(--wave) no-repeat bottom/100% 100%;}
  .m .sec.bg-o::before{background:#FFF1E2;}
  .m .sec.bg-b::before{background:#E9F5FB;}
  .m .sec.bg-w::before, .m .recruit.bg-w::before{background:#ffffff;}
  .m .sec, .m .recruit{position:relative;}
  .m .sec>*, .m .recruit>*{position:relative;z-index:1;}
  .m .mh{position:relative;z-index:20;background:#FFF8EC;height:92px;overflow:visible;}
  .m .mh-gorilla{position:absolute;left:-6px;top:4px;width:120px;height:auto;z-index:21;}
  .m .mh-logo{position:absolute;left:122px;right:82px;top:10px;z-index:2;display:flex;justify-content:center;}
  .m .mh-logo img{width:100%;max-width:200px;height:auto;display:block;}
  .m .burger{position:absolute;right:0;top:0;width:74px;height:70px;background:var(--orange);border:0;cursor:pointer;
  border-radius:0 0 0 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:3;padding-left:8px;}
  .m .burger span{width:26px;height:2.5px;background:#fff;border-radius:2px;transition:.2s;}
  .m .mnav{position:fixed;inset:0 0 0 30%;background:#fff;z-index:300;transform:translateX(100%);transition:.25s;padding:70px 24px;box-shadow:-8px 0 30px rgba(0,0,0,.15);max-width:430px;margin-left:auto;}
  .m .mnav.open{transform:translateX(0);}
  .m .mnav a{display:block;padding:15px 6px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;}
  .m .mnav .x{position:absolute;top:18px;right:20px;font-size:26px;color:var(--text-l);background:none;border:0;}
  .m .mask{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:250;opacity:0;visibility:hidden;transition:.25s;}
  .m .mask.open{opacity:1;visibility:visible;}
  .m .hero{background:var(--cream);padding:6px 0 8px;position:relative;}
  .m .hero-photo{position:relative;}
  .m .hero-photo>img{width:100%;height:auto;display:block;}
  /* ヒーロー右下＝皮膚科外来バッジ（PC版と揃え。ふわふわ浮遊はstyle.cssのbadgeFloat） */
  .m .hero-photo>a.hero-badge{position:absolute;right:10px;bottom:3%;width:34%;z-index:3;display:block;}
  .m .hero-photo>a.hero-badge img{width:100%;height:auto;display:block;}
  .m .hero-catch{margin:18px auto 0;text-align:center;}
  .m .hero-catch img{width:86%;max-width:360px;height:auto;display:inline-block;}
  .m .sec{padding:38px 16px;}
  .m .sec-h{display:block;margin:0 auto 6px;height:42px;width:auto;}
  .m .sec-h-info{height:auto;width:92%;max-width:400px;margin-bottom:22px;}
  .m .sec-sub{text-align:center;font-weight:700;font-size:14px;color:var(--text);margin-bottom:24px;position:relative;display:block;}
  .m .sec-sub::before, .m .sec-sub::after{content:"";display:inline-block;width:18px;height:2px;background:var(--orange-l);vertical-align:middle;margin:0 10px;}
  .m .center{text-align:center;}
  .m .btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;font-weight:700;
  padding:13px 38px;border-radius:999px;box-shadow:0 5px 0 rgba(192,103,18,.3);font-size:15px;}
  .m .btn::after{content:"→";}
  .m .newsbar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:10px 16px;margin:6px 16px 0;
  box-shadow:0 4px 14px rgba(0,0,0,.07);}
  .m .newsbar .b{background:var(--orange-l);color:#fff;font-weight:700;font-size:11px;padding:5px 14px;border-radius:999px;flex:none;}
  .m .newsbar .t{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .m .banners{display:flex;flex-direction:column;gap:14px;padding:24px 16px 34px;}
  .m .banners img{width:100%;border-radius:18px;}
  /* バナー1枚目の位置＝3動物イラスト（枠なしの装飾として中央に置く） */
  .m .banners img.ban-animals{width:62%;align-self:center;border-radius:0;margin-bottom:2px;}
  .m .info-wave{width:100%;margin-bottom:-1px;}
  .m .news-list{margin:0 2px;}
  .m .news-list a{display:block;padding:15px 4px;border-bottom:1px dashed var(--line);}
  .m .news-list .row{display:flex;align-items:center;gap:10px;margin-bottom:5px;}
  .m .nl-date{font-weight:700;color:var(--text-l);font-size:13px;font-family:'Inter',sans-serif;}
  .m .nl-cat{color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:999px;}
  .m .c-orange{background:var(--orange-l);}
  .m .c-blue{background:var(--blue-d);}
  .m .c-teal{background:var(--teal);}
  .m .nl-txt{font-size:14.5px;}
  .m .access{background:#fff;border-radius:28px;margin:0 12px;padding:28px 16px;}
  .m .clinic-name{display:block;width:60%;max-width:230px;height:auto;margin:0 auto 18px;}
  .m .map img{width:100%;border-radius:16px;border:1px solid var(--line);}
  .m .htbl-img{width:100%;height:auto;margin-top:18px;}
  .m .ttbl-img{width:92%;height:auto;margin:14px auto 0;}
  .m .hcaution{font-size:12.5px;color:var(--text-l);background:var(--blue);padding:10px 14px;border-radius:12px;margin-top:12px;}
  .m .addr{margin-top:18px;font-size:14px;}
  .m .addr p{display:flex;align-items:center;gap:8px;margin:6px 0;}
  .m .acards{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
  .m .acards img{width:100%;border-radius:16px;}
  .m .acard{position:relative;line-height:0;}
  .m .acard .cicon{position:absolute;left:16.4%;top:64%;width:19.5%;transform:translate(-50%,-50%);border-radius:0;}
  .m .greet-photo{width:62%;margin:0 auto 20px;border-radius:24px;overflow:hidden;}
  .m .greet-txt p{margin-bottom:14px;color:var(--text-l);font-size:14.5px;}
  .m .greet-txt .sign{text-align:right;font-weight:700;color:var(--text);font-size:16px;}
  .m .greet-banners{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
  .m .greet-banners img{width:100%;display:block;border-radius:8px;}
  .m .medical{background:transparent;border-radius:28px;margin:0;padding:8px 0 0;}
  .m .about-illust{width:66%;margin:0 auto 18px;}
  .m .about-lead{font-size:20px;font-weight:900;line-height:1.55;text-align:center;margin-bottom:12px;}
  .m .about-lead mark{background:linear-gradient(transparent 58%,var(--orange-l) 58%);padding:0 .1em;}
  .m .about-body{color:var(--text-l);font-size:14px;text-align:center;margin-bottom:20px;}
  .m .menu{display:grid;grid-template-columns:1fr 1fr;gap:22px 10px;}
  .m .menu a{background:none;border:0;box-shadow:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px;}
  .m .menu .ic{width:112px;height:112px;}
  .m .menu .nm{font-weight:700;font-size:13px;text-align:center;line-height:1.4;color:var(--text);}
  .m .ig-handle{text-align:center;font-weight:700;color:var(--blue-d);font-size:15px;margin-bottom:18px;}
  .m .ig-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .m .ig-grid img{aspect-ratio:1;object-fit:cover;border-radius:12px;}
  .m .blog{background:transparent;border-radius:28px;margin:0;padding:8px 0 0;}
  .m .blog-grid{display:flex;flex-direction:column;gap:16px;}
  .m .bcard{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 16px rgba(57,119,198,.1);}
  .m .bcard .th{aspect-ratio:16/10;overflow:hidden;}
  .m .bcard .th img{width:100%;height:100%;object-fit:cover;}
  .m .bcard .d{color:var(--text-l);font-weight:700;font-size:12px;margin:12px 14px 0;}
  .m .bcard .t{padding:4px 14px 16px;font-size:14px;line-height:1.6;}
  .m .partners{text-align:center;}
  .m .pt-box{position:relative;max-width:360px;margin:0 auto;}
  .m .pt-bg{width:100%;height:auto;display:block;}
  .m .pt-txt{position:absolute;top:2%;left:0;right:0;height:29%;display:flex;flex-direction:column;justify-content:center;padding:0 9%;box-sizing:border-box;}
  .m .pt-lead{font-weight:700;font-size:13px;color:#333;line-height:1.45;margin:0 0 6px;}
  .m .pt-desc{font-size:10.5px;color:#666;line-height:1.65;margin:0;}
  .m .recruit{padding:0 16px;}
  .m .recruit a{display:block;position:relative;border-radius:22px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.14);}
  .m .recruit img{width:100%;height:220px;object-fit:cover;}
  .m .rc-ov{position:absolute;inset:0;background:linear-gradient(120deg,rgba(240,131,30,.88),rgba(255,172,71,.5));
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 26px;color:#fff;}
  .m .rc-ov .t{font-weight:900;font-size:26px;}
  .m .rc-ov .s{font-size:13px;}
  .m .rc-ov .b{align-self:flex-start;background:#fff;color:var(--orange);font-weight:700;padding:9px 22px;border-radius:999px;font-size:13px;margin-top:4px;}
  .m .fixbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;z-index:400;
  display:flex;box-shadow:0 -3px 14px rgba(0,0,0,.14);}
  .m .fixbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 4px;color:#fff;font-weight:700;font-size:12px;line-height:1.1;text-align:center;}
  .m .fixbar .ico{font-size:19px;line-height:1;}
  .m .fixbar .web{background:var(--orange);}
  .m .fixbar .tel{background:#5B6CC4;}
  .m .fixbar .line{background:var(--teal);}
  /* 2026-07-29 ボス指示: LINE=公式緑#06C755(支給画像から実測)・インスタ=淡い紫。
     var()でなく実色指定（キャッシュ等でvar未解決だと透明になる事故の防止） */
  .m .fixbar .line{background:#06C755;}
  .m .fixbar .insta{background:#B9A7E0;}
  .m .fixbar a{font-size:15px;padding:19px 4px;}
  .m .mftr{background:var(--orange);color:#fff;padding:36px 20px 24px;margin-top:38px;}
  .m .mftr .name{font-weight:700;font-size:18px;margin-bottom:8px;}
  .m .mftr .addr{font-size:12.5px;color:#fff3e8;line-height:1.9;margin-bottom:22px;}
  .m .mftr .menu2{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin-bottom:22px;}
  .m .mftr .menu2 a{font-size:13px;color:#fff;}
  .m .mftr .cta{display:flex;flex-direction:column;gap:10px;}
  .m .mftr .fb{padding:12px;border-radius:999px;font-weight:700;text-align:center;font-size:14px;}
  .m .mftr .web{background:#fff;color:var(--orange);}
  .m .mftr .line{background:var(--teal);}
  .m .mftr .contact{background:#5B6CC4;}
  .m .mftr .copy{text-align:center;font-size:11.5px;color:#fff3e8;margin-top:24px;}

  /* ================= サブページ共通パーツ ================= */
  .m .pgttl{text-align:center;padding:30px 16px 6px;background:var(--cream);}
  .m .pgttl h1{font-size:26px;font-weight:700;color:var(--orange);line-height:1.4;}
  .m .pgttl .en{display:block;font-family:var(--fd);font-size:12px;color:var(--orange-l);margin-top:2px;letter-spacing:.05em;}
  .m .crumb{font-size:11px;color:var(--text-l);text-align:center;background:var(--cream);padding:2px 16px 16px;}
  .m .crumb a{color:var(--text-l);text-decoration:underline;}
  .m .phero{background:var(--cream);line-height:0;}
  .m .phero img{width:100%;height:170px;object-fit:cover;}

  /* 汎用ブロック（写真＋番号＋見出し＋本文＋ボタン） */
  .m .mblk{position:relative;margin-bottom:38px;}
  .m .mblk:last-child{margin-bottom:0;}
  .m .mblk .photo{position:relative;border-radius:20px;overflow:visible;}
  .m .mblk .photo>img:first-child{width:100%;border-radius:20px;}
  .m .mblk .ani{position:absolute;width:36%;bottom:-16px;right:-4px;z-index:2;}
  .m .mblk .ani.l{right:auto;left:-4px;}
  .m .mblk .num{font-family:var(--fd);font-size:32px;color:var(--orange-l);line-height:1;margin:22px 0 2px;}
  .m .mblk h2{font-size:21px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.5;}
  .m .mblk p{font-size:14.5px;color:var(--text-l);margin-bottom:18px;white-space:pre-wrap;}
  .m .mblk .center{text-align:center;}

  /* 本文ユーティリティ */
  .m .lead{font-size:19px;font-weight:700;line-height:1.7;text-align:center;margin-bottom:16px;}
  .m .body{font-size:14.5px;color:var(--text-l);margin-bottom:16px;white-space:pre-wrap;}
  .m .card{background:#fff;border-radius:18px;padding:20px 16px;margin-bottom:16px;box-shadow:0 4px 14px rgba(0,0,0,.05);}
  .m .card h3{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--orange);}
  .m .figimg{width:100%;border-radius:16px;margin-bottom:16px;}
}

/* news 一覧カード（1列積み） */
@media (max-width:900px){
  .m .newscard{display:block;width:min(88%,340px);margin:0 auto 18px;}
  .m .newspager{display:block;width:200px;margin:8px auto 0;}
}

/* 下層ページ共通：D型ヒーロー写真（トップの.hero-photoと同モチーフ・2026-07-28追加） */
@media (max-width:900px){
  .m .phero-d{background:var(--cream);padding:6px 0 0;}
  .m .phero-d img{width:100%;height:auto;display:block;}
}