@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================================
   スタジオハーツ リニューアルデモ 専用CSS
   参照: design-ref/studio-hearts-site-pink/style.css を .sh-demo スコープへ移植
   ヘッダー/フッターはSWELL本体を使用するため移植対象外。
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&family=Montserrat:wght@600;700&display=swap');

:root{
  --sh-ink:#43201a;
  --sh-paper:#ffffff;
  --sh-cream:#e6f6fd;
  --sh-heart:#e4007f;
  --sh-heart-deep:#b30064;
  --sh-sun:#ffd93b;
  --sh-night:#401909;
  --sh-line:#f6d3e6;
  --sh-radius:18px;
}

/* 追従CTAバーの高さぶん本文下に余白 */
body{padding-bottom:74px}

/* 各ページ先頭のヒーロー/ページヒーローをヘッダー直下にflush表示
   （SWELLの .l-container 上余白を除去。全ページ先頭が全幅の帯のため） */
.l-content.l-container{padding-top:0 !important}

/* 下層ページはデザイン側でページヒーロー＋パンくずを持つため、
   SWELL既定のページタイトル・パンくずを非表示にして重複を防ぐ */
.c-pageTitle,
.p-breadcrumb{display:none !important}

/* ---- 本文ラッパ ---- */
/* SWELLは1カラムでもmainをmax-width:900pxに制限し中央寄せするため、
   ラッパ自体を画面全幅(100vw)に解放してSWELLのコンテンツ幅制限を打ち消す。
   これで帯セクション・.wrap がすべて画面基準で中央揃えになる。 */
.sh-demo{
  font-family:'Noto Sans JP',sans-serif;color:var(--sh-ink);line-height:1.8;
  -webkit-font-smoothing:antialiased;
  position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;
  overflow-x:clip;
}
.sh-demo *{box-sizing:border-box}
.sh-demo img{max-width:100%;display:block}
.sh-demo a{color:inherit;text-decoration:none}
.sh-demo .wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.sh-demo .eyebrow{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.22em;
  color:var(--sh-heart);text-transform:uppercase;display:flex;align-items:center;gap:10px;
  justify-content:center;margin-bottom:10px;
}
.sh-demo .eyebrow::before,.sh-demo .eyebrow::after{content:"";width:26px;height:2px;background:var(--sh-sun);border-radius:2px}
.sh-demo h2{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:clamp(24px,5.5vw,34px);text-align:center;margin-bottom:8px;line-height:1.5;color:var(--sh-ink)}
.sh-demo .lead{text-align:center;font-size:14px;color:#6b7280;margin-bottom:34px}

/* 帯セクションはラッパ(=100vw)いっぱいに広げる（中の.wrapが画面中央で1060px制限） */
.sh-demo .page-hero,
.sh-demo .notice,
.sh-demo .hero,
.sh-demo > section{width:100%}
.sh-demo > section{padding:64px 0}
.sh-demo .rhythm{display:flex;gap:10px;justify-content:center;align-items:flex-end;padding:6px 0 0}
.sh-demo .rhythm span{width:9px;height:9px;border-radius:50%;background:var(--sh-sun)}
.sh-demo .rhythm span:nth-child(3),.sh-demo .rhythm span:nth-child(4){background:var(--sh-heart)}
.sh-demo .rhythm span:nth-child(4){width:13px;height:13px}

/* ---- 下層ページ共通ヒーロー ---- */
.sh-demo .page-hero{
  background:
    linear-gradient(180deg, rgba(95,208,243,.45) 0%, rgba(95,208,243,0) 55%),
    repeating-linear-gradient(90deg,#e4007f 0 14px,#d10073 14px 28px);
  color:#fff;text-align:center;padding:56px 20px 46px;
}
.sh-demo .page-hero .eyebrow{color:var(--sh-sun)}
.sh-demo .page-hero h1{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:clamp(26px,6.4vw,40px);color:#fff}
.sh-demo .page-hero p{font-size:13px;color:#f4dcec;margin-top:8px}
.sh-demo .breadcrumb{font-size:11px;color:#9aa0ae;padding:12px 0}
.sh-demo .breadcrumb a{color:var(--sh-heart)}

/* ---- トップヒーロー ---- */
.sh-demo .hero-visual{
  position:relative;min-height:min(78vh,560px);display:flex;align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(95,208,243,.55) 0%, rgba(95,208,243,0) 34%),
    repeating-linear-gradient(90deg,#e4007f 0 14px,#d10073 14px 28px);
  color:#fff;overflow:hidden;
}
.sh-demo .hero-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(64,25,9,.55) 100%);
}
.sh-demo .photo-note{
  position:absolute;top:14px;right:14px;font-size:11px;letter-spacing:.08em;
  background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.5);
  padding:5px 10px;border-radius:8px;color:#fff;z-index:2;
}
.sh-demo .hero-in{position:relative;z-index:2;width:100%;padding:80px 20px 42px;max-width:1060px;margin:0 auto}
.sh-demo .hero-badge{display:inline-flex;align-items:center;gap:7px;background:var(--sh-heart);font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;margin-bottom:16px;color:#fff}
.sh-demo .hero-visual h1{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:clamp(30px,7.6vw,54px);line-height:1.35;letter-spacing:.02em;color:#fff}
.sh-demo .hero-visual h1 em{font-style:normal;color:var(--sh-sun)}
.sh-demo .hero-visual p.sub{margin-top:14px;font-size:clamp(13px,3.6vw,16px);color:#f4dcec}
.sh-demo .hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sh-demo .hero-chips span{font-size:12px;font-weight:700;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);padding:6px 12px;border-radius:999px}

/* ---- お知らせバー ---- */
.sh-demo .notice{background:var(--sh-sun);padding:12px 0}
.sh-demo .notice .wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
.sh-demo .notice b{font-size:13px}
.sh-demo .notice .tag{background:var(--sh-ink);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}

/* ---- カード類 ---- */
.sh-demo .classes{background:var(--sh-cream)}
.sh-demo .class-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:760px){.sh-demo .class-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.sh-demo .class-card{
  background:#fff;border-radius:var(--sh-radius);padding:22px 16px 20px;text-align:center;
  border:1px solid var(--sh-line);box-shadow:0 4px 14px rgba(38,48,74,.05);transition:transform .18s ease;display:block;
}
.sh-demo .class-card:hover{transform:translateY(-4px)}
.sh-demo .class-card .icon{font-size:34px;line-height:1;margin-bottom:10px}
.sh-demo .class-card h3{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:16px;margin-bottom:5px}
.sh-demo .class-card p{font-size:12px;color:#6b7280;line-height:1.65}
.sh-demo .class-card.star{border:2px solid var(--sh-heart);position:relative}
.sh-demo .class-card.star::after{
  content:"いちばん人気";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--sh-heart);color:#fff;font-size:10px;font-weight:700;padding:3px 11px;border-radius:999px;white-space:nowrap;
}

/* ---- クラス詳細 ---- */
.sh-demo .class-detail{display:grid;gap:20px;margin-bottom:26px;background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-radius);overflow:hidden}
@media(min-width:760px){.sh-demo .class-detail{grid-template-columns:300px 1fr}}
.sh-demo .class-detail .ph{
  min-height:190px;background:linear-gradient(150deg,#5a2a12,#401909);
  display:grid;place-items:center;color:#e6b8cf;font-size:12px;letter-spacing:.1em;text-align:center;
}
.sh-demo .class-detail .body{padding:22px 22px 24px}
.sh-demo .class-detail h3{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:20px;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sh-demo .class-detail h3 .icon{font-size:26px}
.sh-demo .class-detail .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sh-demo .class-detail .meta span{font-size:11px;font-weight:700;background:var(--sh-cream);color:var(--sh-heart-deep);padding:4px 11px;border-radius:999px}
.sh-demo .class-detail p{font-size:13.5px;color:#4b5563}

/* ---- 理由 ---- */
.sh-demo .reason-list{display:grid;gap:14px}
@media(min-width:760px){.sh-demo .reason-list{grid-template-columns:repeat(3,1fr);gap:18px}}
.sh-demo .reason{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-radius);padding:20px 18px}
@media(min-width:760px){.sh-demo .reason{flex-direction:column;align-items:center;text-align:center;padding:26px 20px}}
.sh-demo .reason .num{flex:none;width:46px;height:46px;border-radius:50%;background:var(--sh-night);color:var(--sh-sun);display:grid;place-items:center;font-size:22px}
.sh-demo .reason h3{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:15px;margin-bottom:4px}
.sh-demo .reason p{font-size:13px;color:#6b7280}

/* ---- インストラクター ---- */
.sh-demo .teacher{background:var(--sh-night);color:#fff}
.sh-demo .teacher .eyebrow{color:var(--sh-sun)}
.sh-demo .teacher-card{display:grid;gap:22px;align-items:center}
@media(min-width:760px){.sh-demo .teacher-card{grid-template-columns:340px 1fr;gap:40px}}
.sh-demo .teacher-photo{
  aspect-ratio:4/5;border-radius:var(--sh-radius);position:relative;
  background:linear-gradient(150deg,#5a2a12,#401909);
  display:grid;place-items:center;color:#e6b8cf;font-size:13px;letter-spacing:.1em;text-align:center;
  border:1px dashed rgba(255,255,255,.35);
}
.sh-demo .teacher h2{text-align:left;margin-bottom:4px;color:#fff}
.sh-demo .teacher .role{color:var(--sh-sun);font-weight:700;font-size:13px;margin-bottom:14px}
.sh-demo .teacher p.bio{font-size:14px;color:#f4dcec;margin-bottom:16px}
.sh-demo .teacher ul{list-style:none;display:grid;gap:8px;padding:0}
.sh-demo .teacher li{font-size:13px;display:flex;gap:9px;align-items:center;color:#fbeef5}
.sh-demo .teacher li::before{content:"★";color:var(--sh-sun);font-size:12px}
@media(max-width:759px){.sh-demo .teacher h2{text-align:center}.sh-demo .teacher .role{text-align:center}}

/* ---- スケジュール表 ---- */
.sh-demo .sched-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--sh-radius);border:1px solid var(--sh-line);background:#fff}
.sh-demo table.sched{border-collapse:collapse;width:100%;min-width:640px;font-size:12.5px}
.sh-demo table.sched th,.sh-demo table.sched td{border:1px solid var(--sh-line);padding:10px 8px;text-align:center;vertical-align:middle}
.sh-demo table.sched thead th{background:var(--sh-night);color:#fff;font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13px}
.sh-demo table.sched thead th.off{background:#8a90a3}
.sh-demo table.sched tbody th{background:var(--sh-cream);font-weight:700;white-space:nowrap;font-size:11.5px}
.sh-demo .lesson{display:block;border-radius:10px;padding:7px 6px;font-weight:700;font-size:11.5px;line-height:1.45}
.sh-demo .lesson small{display:block;font-weight:500;font-size:10px;opacity:.85}
.sh-demo .l-tap{background:#ffe1f1;color:var(--sh-heart-deep)}
.sh-demo .l-hip{background:#fde3f1;color:#b30064}
.sh-demo .l-jazz{background:#e6f6fd;color:#0f7fae}
.sh-demo .l-music{background:#fff3d6;color:#8a6200}
.sh-demo .cell-off{background:#f4f4f6;color:#b3b8c4;font-size:11px}
.sh-demo .sched-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px;font-size:11.5px}
.sh-demo .sched-legend span{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.sh-demo .sched-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}

/* ---- 体験フロー ---- */
.sh-demo .flow-list{display:grid;gap:12px;max-width:640px;margin:0 auto}
.sh-demo .flow{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-radius);padding:18px}
.sh-demo .flow .step{flex:none;width:52px;height:52px;border-radius:16px;background:var(--sh-cream);display:grid;place-items:center;font-size:24px}
.sh-demo .flow h3{font-size:15px;font-family:'Zen Maru Gothic',sans-serif;font-weight:700}
.sh-demo .flow h3 small{color:var(--sh-heart);font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.15em;display:block}
.sh-demo .flow p{font-size:12.5px;color:#6b7280}

/* ---- FAQ ---- */
.sh-demo .faq-list{max-width:680px;margin:0 auto;display:grid;gap:12px}
.sh-demo details.faq{background:#fff;border:1px solid var(--sh-line);border-radius:14px;padding:0 18px}
.sh-demo details.faq summary{
  list-style:none;cursor:pointer;font-weight:700;font-size:14px;padding:16px 26px 16px 0;
  position:relative;font-family:'Zen Maru Gothic',sans-serif;
}
.sh-demo details.faq summary::-webkit-details-marker{display:none}
.sh-demo details.faq summary::before{content:"Q.";color:var(--sh-heart);margin-right:8px;font-family:'Montserrat',sans-serif}
.sh-demo details.faq summary::after{content:"＋";position:absolute;right:2px;top:14px;color:var(--sh-heart);font-weight:400}
.sh-demo details.faq[open] summary::after{content:"－"}
.sh-demo details.faq .a{font-size:13px;color:#4b5563;padding:0 0 16px;border-top:1px dashed var(--sh-line);padding-top:12px}
.sh-demo details.faq .a::before{content:"A.";color:#1f7a63;margin-right:8px;font-weight:700;font-family:'Montserrat',sans-serif}

/* ---- アクセス ---- */
.sh-demo .access{background:var(--sh-cream)}
.sh-demo .access-grid{display:grid;gap:20px}
@media(min-width:760px){.sh-demo .access-grid{grid-template-columns:1fr 1fr;align-items:center}}
.sh-demo .map-ph{
  aspect-ratio:16/10;border-radius:var(--sh-radius);border:1px dashed #cbb894;
  background:repeating-linear-gradient(45deg,#f7ecd9,#f7ecd9 12px,#f3e5cd 12px,#f3e5cd 24px);
  display:grid;place-items:center;color:#a08c63;font-size:13px;letter-spacing:.1em;text-align:center;
}
.sh-demo .access-info{background:#fff;border-radius:var(--sh-radius);border:1px solid var(--sh-line);padding:26px 24px}
.sh-demo .access-info h3{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:18px;margin-bottom:14px}
.sh-demo .access-info dl{display:grid;grid-template-columns:78px 1fr;gap:9px 12px;font-size:14px;margin:0}
.sh-demo .access-info dt{font-weight:700;color:var(--sh-heart);font-size:13px;padding-top:1px}
.sh-demo .access-info dd{margin:0}
.sh-demo .access-info dd small{color:#9aa0ae;font-size:11px;display:block}

/* ---- 価格プレースホルダー ---- */
.sh-demo .price-ph{
  max-width:680px;margin:0 auto;border:1px dashed #cbb894;border-radius:var(--sh-radius);
  background:#fffaf1;padding:26px 22px;text-align:center;color:#a08c63;font-size:13px;
}

/* ---- CTAパネル ---- */
.sh-demo .cta-panel{background:var(--sh-night);color:#fff;text-align:center;border-radius:var(--sh-radius);padding:36px 22px;margin-top:44px}
.sh-demo .cta-panel h3{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:20px;margin-bottom:6px;color:#fff}
.sh-demo .cta-panel p{font-size:13px;color:#f0d6e6;margin-bottom:18px}
.sh-demo .cta-panel .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sh-demo .cta-panel a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:13px 22px;border-radius:14px}
.sh-demo .cta-panel .cta-line{background:#06c755;color:#fff}
.sh-demo .cta-panel .cta-app{background:var(--sh-sun);color:var(--sh-ink)}

/* =========================================================================
   全ページ共通 追従CTAバー（SWELL固定フッターはSP限定・2色ボタン非対応のため
   参照デザインを忠実再現する目的で子テーマ側にカスタム実装）
   ========================================================================= */
.sh-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(64,25,9,.96);backdrop-filter:blur(8px);box-shadow:0 -6px 22px rgba(50,20,7,.4);
}
.sh-sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;padding:13px 8px;border-radius:14px;text-decoration:none;line-height:1.3}
.sh-sticky-cta .cta-line{background:#06c755;color:#fff;box-shadow:0 3px 0 #049a42}
.sh-sticky-cta .cta-app{background:var(--sh-sun);color:var(--sh-ink);box-shadow:0 3px 0 #d9b114}
.sh-sticky-cta a:active{transform:translateY(2px);box-shadow:none}
@media(min-width:760px){.sh-sticky-cta{justify-content:center}.sh-sticky-cta a{flex:none;min-width:260px}}
@media (prefers-reduced-motion: reduce){.sh-demo *{transition:none!important}}

/* =========================================================================
   トップ メインビジュアル画像（子テーマ assets/hero.svg・実写差し替え可）
   ========================================================================= */
.sh-demo .hero-visual{
  background:
    linear-gradient(180deg, rgba(64,25,9,0) 55%, rgba(64,25,9,.45) 100%),
    url('assets/hero.svg') center/cover no-repeat,
    #b30064;
}

/* =========================================================================
   Googleマップ埋め込み（プレースホルダー .map-ph の代替 .map-embed）
   ========================================================================= */
.sh-demo .map-embed{
  aspect-ratio:16/10;border-radius:var(--sh-radius);overflow:hidden;
  border:1px solid var(--sh-line);background:#eef1f4;
}
.sh-demo .map-embed iframe{display:block;width:100%;height:100%;border:0}

/* =========================================================================
   写真プレースホルダーのブランド調イラスト化（実写差し替え前提のまま華やかに）
   ========================================================================= */
/* クラス詳細：ジャンル別アイコンをウォーターマーク表示 */
.sh-demo .class-detail .ph{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#f15fae 0%,#e4007f 55%,#b30064 100%);
  color:#ffe3f2;
}
.sh-demo .class-detail .ph::after{
  position:absolute;right:8px;bottom:-10px;font-size:92px;line-height:1;opacity:.30;
  pointer-events:none;
}
.sh-demo #tap .ph::after{content:"👟"}
.sh-demo #hiphop .ph::after{content:"🧢"}
.sh-demo #jazz .ph::after{content:"🩰"}
.sh-demo #drum .ph::after{content:"🥁"}
.sh-demo #piano .ph::after{content:"🎹"}
.sh-demo #mugendai .ph::after{content:"♾️"}

/* 講師プロフィール枠：ダンサーモチーフを添える */
.sh-demo .teacher-photo{position:relative;overflow:hidden}
.sh-demo .teacher-photo::after{
  content:"💃";position:absolute;right:6px;bottom:-6px;font-size:118px;line-height:1;opacity:.20;
  pointer-events:none;
}

/* 教室のようす（school）写真枠：カメラモチーフ */
.sh-demo .class-grid .class-card[style*="aspect-ratio"]{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#eafaff,#e6f6fd)!important;
}
.sh-demo .class-grid .class-card[style*="aspect-ratio"]::after{
  content:"📷";position:absolute;right:8px;bottom:2px;font-size:46px;opacity:.28;pointer-events:none;
}