/* 症例写真（/case/・お悩み別・詳細・施術ページの症例欄）。2026-10-27 症例ページ 第1段・第2段（inc/case-display.php）
   表示イメージ v2（STG /mock/case-display-20261026/）の見た目。今のサイトの CSS と干渉しないよう .lcx の中だけに効かせる */
.lcx{--m:#50b3b0;--d:#247f89;--l:#dbf6f1;--ll:#f2fbfa;--t:#333;--g:#6b7373;--b:#d9eceb;--line:#06c755;
  color:var(--t);font-family:"Noto Sans JP",sans-serif;font-size:15px;line-height:1.75;max-width:1040px;margin:0 auto;padding:8px 0 40px;text-align:left}
.lcx *{box-sizing:border-box}
/* :where() で詳細度を下げ、各部品の余白が効くように */
.lcx :where(ul,ol,dl,dd,p,h1,h2,h3,h4,figure,table){margin:0;padding:0}
.lcx :where(h1,h2,h3,h4){background:none;border:0;font-weight:inherit}
.lcx :where(h1,h2,h3,h4)::before,.lcx :where(h1,h2,h3,h4)::after{content:none}
.lcx ul{list-style:none}
.lcx a{text-decoration:none}
.lcx img{max-width:100%;height:auto;display:block}
.lcx-lead{font-size:13px;color:var(--g);margin:0 0 20px}
.lcx-small{font-size:11.5px;color:var(--g);margin-top:4px!important}
.lcx-sec{margin:0 0 44px}
.lcx-head{text-align:center;margin:0 0 18px}
.lcx-en{font-family:"Libre Bodoni",serif;color:var(--m);font-size:34px;line-height:1.1;letter-spacing:.02em}
.lcx .lcx-h2{font-family:"Noto Serif JP",serif;font-weight:500;font-size:19px;line-height:1.5;letter-spacing:.06em;margin-top:4px;color:var(--t);text-align:center}
.lcx-sub{font-size:12.5px;color:var(--g);margin-top:4px!important}
.lcx-note{font-size:12px;color:var(--g);margin-top:10px!important}
/* お悩みボタン */
.lcx-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lcx-btns a{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:8px 18px 8px 10px;border:1px solid var(--m);border-radius:8px;background:#fff;color:var(--t);text-align:center;line-height:1.4;position:relative}
.lcx-btns a span{font-size:13.5px;font-weight:700}
.lcx-btns a small{font-size:11.5px;color:var(--m)}
.lcx-btns a::after{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--m);border-bottom:1.5px solid var(--m);transform:translateY(-70%) rotate(45deg)}
/* カテゴリの欄 */
.lcx-cat{padding:22px 0 6px;border-top:1px solid var(--b);scroll-margin-top:100px}
.lcx-cat__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 12px;padding-left:12px;border-left:4px solid var(--m)}
.lcx .lcx-cat__head h2,.lcx .lcx-cat__head h3{font-family:"Noto Serif JP",serif;font-size:18px;font-weight:600;line-height:1.4;color:var(--t)}
.lcx-cat__head span{font-size:12px;color:var(--g)}
.lcx-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.lcx-cards .lcx-card{flex:0 0 86%;scroll-snap-align:center}
.lcx-cards.n1 .lcx-card{flex-basis:100%}
.lcx-swipe{font-size:11.5px;color:var(--g);text-align:center;margin:2px 0 0!important}
.lcx-swipe::before{content:"← "}.lcx-swipe::after{content:" →"}
.lcx-empty{font-size:13px;color:var(--g);background:var(--ll);border-radius:8px;padding:14px;text-align:center;width:100%}
/* 写真（術前・術後の2枚／1枚にまとめた画像） */
.lcx-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.lcx-ph{position:relative;background:#f3f3f3;overflow:hidden}
.lcx-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lcx-ph--one img{aspect-ratio:1/1;object-fit:contain}
.lcx-ph__band{position:absolute;left:6px;top:6px;z-index:1;background:rgba(36,127,137,.9);color:#fff;font-size:11px;line-height:1.6;padding:1px 9px;border-radius:20px;letter-spacing:.03em}
/* カード */
.lcx-card{background:#fff;border:1px solid var(--b);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;flex-direction:column}
.lcx-card__img{display:block;background:#f3f3f3}
.lcx-card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.lcx .lcx-card__ttl{font-size:15px;font-weight:700;line-height:1.5;color:var(--t);text-align:left;font-family:inherit;letter-spacing:0}
.lcx-card__ttl a{color:inherit}
.lcx-tags{display:flex;flex-wrap:wrap;gap:5px}
.lcx-tags li{font-size:11.5px;line-height:1.5;padding:1px 9px;border-radius:20px;background:var(--l);color:#2a6f6c}
.lcx-tags li.is-doc{background:#fff;border:1px solid var(--b);color:var(--g)}
.lcx-gl{font-size:12.5px;line-height:1.6;border-top:1px dashed var(--b);padding-top:8px!important}
.lcx-gl>div{display:grid;grid-template-columns:5.2em 1fr;gap:6px;margin-bottom:4px}
.lcx-gl dt{color:var(--g);font-weight:700}
.lcx-gl dd{color:var(--t);text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:normal;letter-spacing:0}
.lcx-risk summary{list-style:none;cursor:pointer}
.lcx-risk summary::-webkit-details-marker{display:none}
.lcx-risk__o{color:var(--m);font-weight:700;margin-left:4px;white-space:nowrap}
.lcx-risk[open] summary{display:none}
.lcx-card__link{margin-top:auto;align-self:flex-end;font-size:13px;font-weight:700;color:var(--m)!important}
.lcx-card__link::after{content:" →"}
/* もっと見る・戻る */
.lcx-more{display:block;max-width:420px;margin:14px auto 0;padding:12px 16px;border:1.5px solid var(--m);border-radius:40px;background:#fff;color:var(--m)!important;font-weight:700;font-size:14px;text-align:center;line-height:1.5}
.lcx-more::after{content:" →"}
.lcx-back{display:block;text-align:right;font-size:12px;color:var(--g)!important;margin:10px 0 0}
.lcx-back::before{content:"↑ "}
.lcx-link{text-align:center;margin-top:18px!important}
/* 一覧（すべての症例） */
.lcx-list{display:grid;gap:16px}
.lcx-pager{margin-top:20px}
/* 絞り込み（たたんだ状態で下に置く） */
.lcx-filter{border:1px solid var(--b);border-radius:10px;background:#fff;margin:0 0 28px}
.lcx-filter summary{cursor:pointer;padding:14px 16px;font-weight:700;color:var(--m);font-size:14px}
.lcx-filter__body{display:grid;gap:10px;padding:0 16px 16px}
.lcx-filter label{display:grid;gap:4px;font-size:12.5px;color:var(--g)}
.lcx-filter select,.lcx-filter input[type=text]{width:100%;padding:10px;border:1px solid var(--b);border-radius:8px;background:#fff;font-size:14px;color:var(--t)}
.lcx-btn{display:block;text-align:center;padding:13px 16px;border:0;border-radius:40px;background:var(--m);color:#fff!important;font-weight:700;font-size:14.5px;line-height:1.5;cursor:pointer;width:100%}
.lcx-btn.is-dark{background:var(--d)}
.lcx-btn.is-line{background:var(--line)}
.lcx-btn.is-outline{background:#fff;color:var(--d)!important;border:1.5px solid var(--d)}
/* 予約 */
.lcx-cta{background:var(--ll);border-radius:12px;padding:20px 16px;text-align:center}
.lcx-cta__ttl{font-family:"Noto Serif JP",serif;font-size:15.5px;margin-bottom:12px!important}
.lcx-cta__btns{display:grid;gap:10px}
/* お悩み別：絞り込みのボタン */
.lcx-chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px!important;margin:0 0 18px!important}
.lcx-chips li a{display:block;white-space:nowrap;font-size:12.5px;padding:6px 12px;border:1px solid var(--b);border-radius:20px;color:var(--t);background:#fff}
.lcx-chips li a small{color:var(--g);margin-left:4px}
.lcx-chips li.is-on a{background:var(--m);border-color:var(--m);color:#fff}
.lcx-chips li.is-on a small{color:#e8fbf9}
/* 詳細 */
.lcx--single{padding-top:16px}
.lcx-detail{display:grid;gap:18px;margin-bottom:32px}
.lcx-ph--detail img{aspect-ratio:auto;object-fit:contain}
.lcx-viewer__tabs{display:none;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.lcx-viewer.is-js .lcx-viewer__tabs{display:flex}
.lcx-tab{font:inherit;font-size:12.5px;line-height:1.5;padding:5px 12px;border:1px solid var(--b);border-radius:20px;background:#fff;color:var(--t);cursor:pointer}
.lcx-tab.is-on{background:var(--m);border-color:var(--m);color:#fff}
.lcx-tab[hidden]{display:none}
.lcx-viewer__pane{margin-bottom:8px}
.lcx-viewer.is-js .lcx-viewer__pane{display:none}
.lcx-viewer.is-js .lcx-viewer__pane.is-on{display:block}
.lcx-detail__info{display:flex;flex-direction:column;gap:14px}
.lcx-info{border-top:1px solid var(--b)}
.lcx-info>div{display:grid;grid-template-columns:7.5em 1fr;gap:10px;padding:10px 2px;border-bottom:1px solid var(--b);font-size:14px}
.lcx-info dt{color:var(--g);font-weight:700;font-size:13px}
.lcx-info dd{word-break:break-word}
.lcx-info dd p{margin:0 0 6px}
.lcx-price{width:100%;border-collapse:collapse;font-size:13.5px}
.lcx-price th,.lcx-price td{border:0;border-bottom:1px dotted var(--b);padding:4px 0;text-align:left;vertical-align:top;font-weight:400;background:none}
.lcx-price td{text-align:right;white-space:nowrap;padding-left:10px;font-weight:700}
.lcx-price th span{color:var(--g);margin-left:6px;font-size:12px}
.lcx-price th small{display:block;color:var(--g);font-size:11.5px}
.lcx-inline{color:var(--m)!important;font-size:12.5px;text-decoration:underline!important}
.lcx-comment{background:var(--ll);border-radius:10px;padding:14px 16px;font-size:14px}
.lcx-comment__ttl{font-weight:700;color:var(--d);margin-bottom:4px!important}
.lcx-actions{display:grid;gap:10px}
.lcx-body{margin-bottom:32px}
.lcx-related{border-top:1px solid var(--b);padding-top:28px}
/* 施術ページの症例欄 */
.lcx--menu{margin:48px auto 24px;padding:0 16px;overflow:hidden}

@media (min-width:768px){
  .lcx{font-size:15px;padding:16px 0 60px}
  .lcx-en{font-size:42px}
  .lcx .lcx-h2{font-size:22px}
  .lcx-btns{grid-template-columns:repeat(3,1fr);gap:10px}
  .lcx-btns a{min-height:70px}
  .lcx-btns a span{font-size:14.5px}
  .lcx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;overflow:visible;margin:0;padding:0}
  .lcx-cards .lcx-card,.lcx-cards.n1 .lcx-card{flex:none}
  .lcx-cards.n1{grid-template-columns:minmax(0,360px)}
  .lcx-cards.n2{grid-template-columns:repeat(2,minmax(0,360px))}
  .lcx-swipe{display:none}
  .lcx-cat{padding-top:30px}
  .lcx .lcx-cat__head h2,.lcx .lcx-cat__head h3{font-size:20px}
  .lcx-list{grid-template-columns:repeat(3,1fr);gap:18px}
  .lcx-filter__body{grid-template-columns:repeat(4,1fr);align-items:end}
  .lcx-filter__body .lcx-btn{grid-column:1/-1;max-width:360px;margin:6px auto 0}
  .lcx-cta__btns{grid-template-columns:1fr 1fr;max-width:640px;margin:0 auto}
  .lcx-detail{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start}
  .lcx--menu{margin-top:64px;padding:0;overflow:visible}
}
@media (max-width:767px){
  .lcx-list{grid-template-columns:1fr}
}