/*
Theme Name: 美容情報ポータル
Description: 二重整形クリニック比較サイト用のWordPressテーマ
Version: 1.0
Author: Your Name
*/

:root{
    --bg:#f6eaf8;
    --base:#ffffff;
    --ink:#2e2a33;
    --muted:#7c7483;
    --brand:#e46ab4;
    --brand-d:#c8529d;
    --accent:#7bb7ff;
    --radius:16px;
    --shadow:0 10px 24px rgba(0,0,0,.08);
    --container-max:375px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
    line-height:1.65;
    background: 
      linear-gradient(135deg, #ff9a9e 0%, #fecfef 25%, #fecfef 50%, #fad0c4 75%, #ffd1ff 100%),
      radial-gradient(ellipse 1400px 900px at 15% -5%, rgba(255, 182, 193, 0.4) 0%, transparent 60%),
      radial-gradient(ellipse 1200px 700px at 85% 15%, rgba(255, 192, 203, 0.3) 0%, transparent 55%),
      radial-gradient(ellipse 1000px 600px at 50% 90%, rgba(255, 182, 193, 0.2) 0%, transparent 65%);
    background-attachment: fixed;
    min-height:100vh;
    width:100%;
  }
  a{color:var(--brand);text-decoration:none}
  a:hover{color:var(--brand-d)}
  img{max-width:100%;display:block}
  
  .container{width:100%;margin-inline:auto;background:#ffffff;}
  .section-title{font-size:clamp(18px,4vw,24px);margin:0 0 16px;line-height:1.3}
  .note,.muted{color:var(--muted);font-size:13px}
  
  .site-header{background:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:10}
  .site-header .container{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:wrap}
  .logo{font-weight:700;color:var(--ink);font-size:18px}
  .site-nav{margin-left:auto;display:flex;align-items:center;position:relative}
  
  /* ハンバーガーメニュー */
  .hamburger{display:flex;flex-direction:column;gap:4px;background:none;border:none;padding:8px;cursor:pointer;z-index:1001}
  .hamburger__line{width:24px;height:3px;background:var(--brand);border-radius:2px;transition:all 0.3s ease}
  .hamburger[aria-expanded="true"] .hamburger__line:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
  .hamburger[aria-expanded="true"] .hamburger__line:nth-child(2){opacity:0}
  .hamburger[aria-expanded="true"] .hamburger__line:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
  
  /* ナビゲーションメニュー */
  .nav-menu{position:absolute;top:100%;right:0;background:#fff;box-shadow:var(--shadow);border-radius:12px;padding:16px;min-width:200px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.3s ease;z-index:1000}
  .nav-menu.active{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-menu__list{list-style:none;padding:0;margin:0 0 12px}
  .nav-menu__list li{margin-bottom:8px}
  .nav-menu__list a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none;transition:background-color 0.2s ease}
  .nav-menu__list a:hover{background:var(--bg);color:var(--brand)}
  .btn{display:inline-block;padding:10px 16px;border-radius:10px;border:2px solid var(--brand);font-weight:700;text-align:center;font-size:14px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .btn--primary{background:var(--brand);color:#fff}
  .btn--primary:hover{background:var(--brand-d);border-color:var(--brand-d)}
  .btn--ghost{background:#fff;border-color:var(--brand);color:var(--brand)}
  .btn--block{width:100%}
  .btn--sm{padding:8px 12px;font-size:13px;min-height:36px}
  .btn--xl{padding:14px 20px;font-size:16px;min-height:48px}
  
  .hero{padding:0;margin-bottom:0;border-radius:0}
  .hero__grid{display:block;gap:20px}
  .sp-only{display:inline}
  .eyebrow{color:var(--brand-d);font-weight:700;margin:0 0 8px;font-size:14px}
  .hero__title{font-size:clamp(24px,6vw,32px);line-height:1.2;margin:0 0 12px}
  .hero__badges{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 12px;flex-wrap:wrap}
  .hero__badges li{background:#ffe7f5;border:1px solid #ffd0ec;padding:4px 8px;border-radius:999px;font-weight:700;font-size:12px}
  .hero__desc{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.5}
  .hero__img{margin-top:0}
  .hero__img img{border-radius:0;box-shadow:var(--shadow);width:100%}
  .hero__copy{padding:20px 16px}
  .hero__cta{display:flex;flex-direction:column;gap:8px}
  .hero__cta .btn{margin-right:0;margin-bottom:8px}
  
  .top3{padding:20px 16px;background:#ffffff;border-radius:16px;margin-bottom:20px}
  
  /* スライダー */
  .slider-container{position:relative;overflow:hidden}
  .slider-wrapper{overflow:hidden;border-radius:12px}
  .slider-track{display:flex;transition:transform 0.3s ease;gap:12px}
  .slider-slide{flex:0 0 100%;min-width:0}
  .slider-slide .card{background:var(--base);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;position:relative;margin:0}
  
  /* スライダーコントロール */
  .slider-controls{display:flex;justify-content:center;gap:12px;margin:16px 0}
  .slider-btn{background:var(--brand);color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;box-shadow:var(--shadow)}
  .slider-btn:hover{background:var(--brand-d);transform:scale(1.1)}
  .slider-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
  
  /* スライダードット */
  .slider-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
  .slider-dot{width:8px;height:8px;border-radius:50%;border:none;background:#ddd;cursor:pointer;transition:all 0.3s ease}
  .slider-dot.active{background:var(--brand);transform:scale(1.2)}
  .slider-dot:hover{background:var(--brand-d)}
  
  /* カードスタイル */
  .card{background:var(--base);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;position:relative}
  .card__rank{position:absolute;top:8px;left:8px;background:var(--brand);color:#fff;
    width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:12px;z-index:1}
  .card__thumb{aspect-ratio:16/10;object-fit:cover}
  .card__body{padding:12px}
  .card__title{margin:0 0 8px;font-size:16px;line-height:1.3}
  .meta{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:4px;font-size:13px}
  
  .compare{padding:20px 16px;background:#ffffff;border-radius:16px;margin-bottom:20px}
  .table-scroll{overflow:auto;background:#fff;border-radius:12px;box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
  
  /* 詳細比較表 */
  .comparison-table{width:100%;border-collapse:separate;border-spacing:0;min-width:800px;font-size:13px}
  .comparison-table th,.comparison-table td{padding:12px 8px;border-bottom:1px solid #f0f0f0;text-align:left;vertical-align:top}
  
  /* ヘッダー */
  .comparison-header{background:#fce4ec;font-weight:600;color:var(--ink);width:120px;position:sticky;left:0;z-index:10}
  .clinic-header{background:#fff;text-align:center;padding:16px 8px;position:relative}
  .clinic-header.clinic-1st{border-left:3px solid #ffd700}
  .clinic-header.clinic-2nd{border-left:3px solid #c0c0c0}
  .clinic-header.clinic-3rd{border-left:3px solid #cd7f32}
  
  /* ランキングバッジ */
  .ranking-badge{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
  .ranking-1st{background:linear-gradient(135deg,#ffd700,#ffed4e);color:#333}
  .ranking-2nd{background:linear-gradient(135deg,#c0c0c0,#e8e8e8);color:#333}
  .ranking-3rd{background:linear-gradient(135deg,#cd7f32,#daa520);color:#fff}
  
  /* クリニックロゴ */
  .clinic-logo{margin:8px 0}
  .logo-icon{width:32px;height:32px;background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;margin:0 auto 4px}
  .logo-sub{font-size:10px;color:var(--muted);margin-top:2px}
  .clinic-name{font-weight:600;font-size:14px;color:var(--ink);line-height:1.2}
  
  /* 比較項目ラベル */
  .comparison-label{background:#fce4ec;font-weight:600;color:var(--ink);position:sticky;left:0;z-index:10;min-width:100px}
  
  /* クリニックデータ */
  .clinic-data{background:#fff;padding:8px}
  
  /* 評価 */
  .rating{display:flex;align-items:center;gap:4px}
  .stars{color:#ffc107;font-size:14px}
  .score{font-weight:600;color:var(--ink)}
  
  /* 特徴アイテム */
  .feature-item{display:flex;align-items:flex-start;gap:8px}
  .feature-item.feature-highlight{background:#fff5f5;padding:8px;border-radius:8px;border-left:3px solid var(--brand)}
  .feature-icon{color:var(--brand);font-size:16px;flex-shrink:0;margin-top:2px}
  .feature-text{flex:1;line-height:1.4}
  .feature-text div{margin-bottom:2px}
  
  /* 価格 */
  .price{font-weight:600;color:var(--ink);font-size:14px}
  .price-highlight{color:#e53e3e;font-weight:600;font-size:12px}
  .price-note{color:var(--muted);font-size:11px}
  
  /* クリニック数 */
  .clinic-count{text-align:center}
  .clinic-count div{font-weight:600;margin-bottom:4px}
  .clinic-link{color:var(--brand);text-decoration:none;font-size:11px;border-bottom:1px solid var(--brand)}
  .clinic-link:hover{color:var(--brand-d)}
  
  /* ボタン */
  .btn--full{width:100%;display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 12px;font-size:12px}
  .btn-icon{font-size:14px}
  
  /* PC表示時の制限 */
  @media (min-width: 1080px) {
    .container {
      max-width: 375px;
    }
  }
  
  /* 症例スライダー */
  .case-slider-container{position:relative;overflow:hidden;margin:20px 0}
  .case-slider-wrapper{overflow:hidden;border-radius:12px}
  .case-slider-track{display:flex;transition:transform 0.3s ease;gap:12px}
  .case-slide{flex:0 0 100%;min-width:0}
  .case-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;position:relative}
  .case-image{aspect-ratio:4/3;overflow:hidden}
  .case-image img{width:100%;height:100%;object-fit:cover}
  .case-content{padding:16px}
  .case-title{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--ink)}
  .case-clinic,.case-price{font-size:14px;margin:0 0 4px;color:var(--muted)}
  .case-comment{font-size:13px;line-height:1.4;margin:8px 0 0;color:var(--ink)}
  .case-badge{position:absolute;top:8px;right:8px;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600}
  .case-badge-before{background:#ff6b6b;color:#fff}
  .case-badge-after{background:#51cf66;color:#fff}
  .case-slider-controls{display:flex;justify-content:center;gap:12px;margin:16px 0}
  .case-slider-btn{background:var(--brand);color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;box-shadow:var(--shadow)}
  .case-slider-btn:hover{background:var(--brand-d);transform:scale(1.1)}
  .case-slider-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
  .case-slider-empty{text-align:center;padding:40px 20px;color:var(--muted);background:#f8f9fa;border-radius:12px}
  
  .cases{padding:20px 16px;background:#ffffff;border-radius:16px;margin-bottom:20px}
  
  .features{padding:16px 16px;background:#ffffff;border-radius:16px;margin-bottom:20px}
  .pill-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:8px 0 0}
  .pill-list li{background:#fff;border:1px dashed #ffc6e9;border-radius:999px;padding:6px 10px;font-size:12px}
  
  .ranking{padding:20px 0;background:#ffffff;border-radius:16px;margin-bottom:20px}
  .clinic{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
  .clinic__head{display:flex;gap:12px;align-items:center}
  .clinic__logo{border-radius:8px;width:60px;height:60px;object-fit:cover}
  .clinic__name{margin:0 0 4px;font-size:16px;line-height:1.3}
  .chips{display:flex;gap:6px;list-style:none;padding:0;margin:8px 0;flex-wrap:wrap}
  .chips li{background:#fff0fa;border:1px solid #ffd0ec;border-radius:999px;padding:4px 8px;font-size:11px}
  .clinic__points{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0}
  .point{background:#fff; border:1px solid #f1d6e9;border-radius:12px;padding:10px}
  .point h4{font-size:14px;margin:0 0 4px}
  .point p{font-size:13px;margin:0;line-height:1.4}
  .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0}
  .cta-row{display:flex;flex-direction:column;gap:8px}
  
  .faq{padding:20px 16px;background:#ffffff;border-radius:16px;margin-bottom:20px}
  .qa{background:#fff;border:1px solid #eee;border-radius:10px;padding:10px;margin-bottom:8px}
  .qa>summary{cursor:pointer;font-weight:700;font-size:14px;padding:4px 0}
  .qa>p{margin:6px 0 0;font-size:13px;line-height:1.4}
  
  .cta{padding:24px 16px;background:#ffffff;border-radius:16px}
  .cta__box{background:linear-gradient(180deg,#fff0fa,#fff);border:1px solid #ffd2ec;border-radius:16px;padding:20px;text-align:center;box-shadow:var(--shadow)}
  .cta__title{margin:0 0 8px;font-size:clamp(18px,4vw,24px);line-height:1.3}
  .cta__text{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.4}
  .cta__actions{display:flex;flex-direction:column;gap:8px}
  
  .site-footer{background:#7f6a8a;color:#fff;padding:20px 0;margin-top:16px}
  .footer__inner{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
  .footer-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .footer-nav a{color:#fff;background:rgba(255,255,255,.15);padding:6px 8px;border-radius:999px;font-size:12px}
  .copyright{opacity:.85;font-size:12px}
  
  /* アニメーション */
  .site-header {
    transition: transform 0.3s ease;
  }
  
  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
  }
  
  .table-scroll.active {
    cursor: grabbing;
  }
  
  .lazy {
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .lazy.loaded {
    opacity: 1;
  }
  
  /* フォームエラー */
  .error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
  }
  
  /* ローディング状態 */
  .loading {
    position: relative;
    pointer-events: none;
  }
  
  .loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--brand);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* アクセシビリティ */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  /* フォーカス表示 */
  a:focus,
  button:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  
  /* 高コントラストモード対応 */
  @media (prefers-contrast: high) {
    :root {
      --shadow: 0 10px 24px rgba(0,0,0,.3);
    }
  }
  
  /* モーション軽減 */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }