@charset "UTF-8";
/* 共通デザイン：色・見出し・余白はこのファイルで編集します。 */

/* 共通ヘッダー：現在のデザインを保持して統合 */

/* ページ側の旧 #head 指定より共通ヘッダーを優先します。 */
/* A案：白い背景・細い区切り線・赤い下線の共通ヘッダー */
#head { position: relative; z-index: 1000; }
:is(body, #head) #site-header { position: relative; z-index: 1000; color: #111; background: #fff; font: 14px/1.6 "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; text-align: left; }
:is(body, #head) #site-header * { box-sizing: border-box; }
:is(body, #head) #site-header header { height: auto; background: #fff; }
:is(body, #head) #site-header ul, :is(body, #head) #site-header li { list-style: none; margin: 0; padding: 0; }
:is(body, #head) #site-header img { display: block; border: 0; max-width: 100%; height: auto; margin: 0; }
:is(body, #head) #site-header a { color: #111; text-decoration: none; }
:is(body, #head) #site-header a:hover img { opacity: .85; }
:is(body, #head) #site-header a:focus-visible, :is(body, #head) #site-header button:focus-visible { outline: 2px solid #c00; outline-offset: 4px; }
:is(body, #head) #site-header #newinfo { margin: 0; padding: 5px 16px 0; }
:is(body, #head) #site-header h1 { margin: 0; padding: 0; font-size: 10px; font-weight: 400; line-height: 1.8; text-align: center; }
:is(body, #head) #site-header header .inner { position: static; display: flex; align-items: center; justify-content: space-between; width: 1000px; max-width: 100%; min-height: 145px; margin: 0 auto; background: #fff; }
:is(body, #head) #site-header #logo { display: block; float: none; position: static; width: 280px; margin: 0; padding: 0; }
:is(body, #head) #site-header #logoimg { width: 100%; height: auto; margin: 0; }
:is(body, #head) #site-header #contact { display: flex; align-items: center; justify-content: flex-end; gap: 30px; float: none; width: 400px; margin: 0; padding: 0; border: 0; background: #fff; }
:is(body, #head) #site-header .reservation-image { width: 104px; }
:is(body, #head) #site-header .contact-image { width: 236px; }
/* 6つのメニューを均等に並べます。 */
:is(body, #head) #site-header #menubar { display: block; position: static; height: auto; clear: both; overflow: visible; border: 0; border-bottom: 1px solid #ededed; background: #fff; }
:is(body, #head) #site-header #menubar ul { display: flex; width: 1000px; max-width: 100%; margin: 0 auto; padding: 0; overflow: visible; }
:is(body, #head) #site-header #menubar li { position: relative; flex: 1; float: none; width: auto; height: auto; border: 0; text-align: center; background: #fff; }
:is(body, #head) #site-header #menubar li + li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: #d6d6d6; z-index: 1; pointer-events: none; }
:is(body, #head) #site-header nav { font-family: inherit; font-variant: normal; }
:is(body, #head) #site-header nav a { position: relative; display: block; margin: 0; padding: 12px 4px 16px; font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: 0; text-align: center; text-shadow: none; border: 0; border-radius: 0; background: #fff; transition: color .2s, background .2s; }
:is(body, #head) #site-header nav a span { display: block; color: #c00; font-size: 12px; font-weight: 500; line-height: 1.6; text-shadow: none; }
:is(body, #head) #site-header nav a::after { content: ""; position: absolute; right: 24%; bottom: 4px; left: 24%; height: 2px; background: #c00; transform: scaleX(0); transition: transform .2s; }
:is(body, #head) #site-header nav a[aria-current="page"]::after, :is(body, #head) #site-header nav a:hover::after, :is(body, #head) #site-header nav a:focus-visible::after { transform: scaleX(1); }
:is(body, #head) #site-header nav a:hover { color: #c00; background: #fffafa; }
:is(body, #head) #site-header #menubar-s, :is(body, #head) #site-header #menubar_hdr { display: none; }
:is(body, #head) #site-header [hidden] { display: none !important; }
:is(body, #head) #site-header #menubar_hdr { cursor: pointer; width: 48px; height: 48px; padding: 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; z-index: 1001; }
:is(body, #head) #site-header #menubar_hdr span { display: block; height: 2px; margin: 5px 0; border: 0; background: #111; }
/* 本文の既存の余白に合わせて、小さな画面ではヘッダーを固定します。 */
@media screen and (max-width: 1366px) {
  :is(body, #head) #site-header header .inner { position: fixed; top: 0; left: 0; width: 100%; min-height: 100px; height: 100px; padding: 8px 24px; border-bottom: 1px solid #eee; z-index: 1000; }
  :is(body, #head) #site-header #newinfo, :is(body, #head) #site-header #contact, :is(body, #head) #site-header #menubar { display: none; }
  :is(body, #head) #site-header #logo { width: 170px; max-width: calc(100% - 80px); }
  :is(body, #head) #site-header #menubar_hdr { display: block; position: fixed; top: 26px; right: 24px; }
  :is(body, #head) #site-header #menubar-s { display: block; position: fixed; top: 100px; right: 0; left: auto; width: 300px; max-width: 100%; max-height: calc(100dvh - 100px); margin: 0; overflow-y: auto; border: 1px solid #eee; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); z-index: 1000; }
  :is(body, #head) #site-header #menubar-s li { float: none; width: auto; height: auto; border: 0; border-bottom: 1px solid #eee; background: #fff; }
  :is(body, #head) #site-header #menubar-s li:last-child { border-bottom: 0; }
  :is(body, #head) #site-header #menubar-s a { padding: 12px 24px; text-align: left; font-size: 17px; }
  :is(body, #head) #site-header #menubar-s a::after { right: auto; left: 24px; width: 32px; bottom: 5px; }
}
@media screen and (max-width: 600px) {
  :is(body, #head) #site-header header .inner { height: 80px; min-height: 80px; padding: 8px 16px; }
  :is(body, #head) #site-header #logo { width: 132px; }
  :is(body, #head) #site-header #menubar_hdr { top: 16px; right: 16px; }
  :is(body, #head) #site-header #menubar-s { top: 80px; max-height: calc(100dvh - 80px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(body, #head) #site-header nav a, :is(body, #head) #site-header nav a::after { transition: none; }
}


/* css/home-design.css から共通ファイルへ統合 */

/* トップページ本文専用。ヘッダーとその重なり順は変更しません。 */
.home-page #contents{padding-bottom:45px;color:var(--school-ink);line-height:1.9}
.home-page #contents #mainimg{margin-bottom:35px;display:flow-root}
.home-page #contents #mainimg #contents3{border-radius:10px;overflow:hidden;margin-bottom:24px}
.home-page #contents #mainimg>div:last-child{display:flow-root;padding:18px 16px;background:var(--school-cream);border:1px solid var(--school-line);border-radius:10px}
.home-page #contents #mainimg>div:last-child>a img{border-radius:6px;max-width:48%;height:auto;margin-top:14px}
.home-page #contents #contents-inner{box-sizing:border-box;width:740px;float:left;margin:0}
.home-page #contents #main{box-sizing:border-box;float:none;width:100%;padding:0}
.home-page #contents #new{box-sizing:border-box;padding:28px 26px;background:#fffdf8;border:1px solid var(--school-line);border-top:3px solid var(--school-red);border-radius:10px;text-align:left}
.home-page #contents .home-eyebrow{font-size:10px;letter-spacing:.16em;color:var(--school-red);font-weight:bold;margin:0 0 7px;padding:0}
.home-page #contents #new h2{left:auto;font-size:24px;padding:0 0 20px;margin-bottom:22px;border-bottom:1px solid var(--school-line)}
.home-page #contents #new h2:before{display:none}
.home-page #contents #new #newinfo2{box-sizing:border-box;padding:0 12px 0 0;width:100%;font-size:14px;line-height:1.95;scrollbar-width:thin;scrollbar-color:#cbb9ad #f5efe7;overflow-wrap:anywhere}
.home-page #contents #new #newinfo2 .news-line{float:none;clear:both;width:auto;max-width:100%}
.home-page #contents #new #newinfo2 .news-date{margin:28px 0 12px;padding-top:20px;border-top:1px solid var(--school-line);color:#a50010;font-size:13px;font-weight:bold}
.home-page #contents #new #newinfo2 .news-line:first-child{color:#a50010;font-size:13px}
.home-page #contents #new #newinfo2 p{padding:0 0 12px;margin:0;line-height:1.95}
.home-page #contents #new #newinfo2 img{display:block;max-width:100%;height:auto;margin:12px auto 20px;border-radius:7px}
.home-page #contents #new #newinfo2 a{text-underline-offset:4px}
.home-page #contents #new #newinfo2 a:hover{color:var(--school-red)}
.home-page #contents #side{box-sizing:border-box;width:236px;float:right;border:1px solid var(--school-line);border-radius:10px;background:var(--school-cream);padding:22px 18px;text-align:left}
.home-page #contents #side .box1{padding:0;background:none;border:0;box-shadow:none;color:var(--school-ink)}
.home-page #contents #side h3{background:none;border:0;border-bottom:1px solid #dfcfc4;font-size:21px;color:var(--school-ink);padding:0 0 13px;margin:0 0 16px}
.home-page #contents #side .white{color:#5f554e;font-size:12px}
.home-page #contents #side iframe{display:block;box-sizing:border-box;width:100%;height:260px;border-radius:7px;margin:18px 0}
.home-page #contents #side a[href="kyujin.html"]{display:block;padding:10px;text-align:center;background:white;border:1px solid #d7c2b4;border-radius:5px;color:#a50010;font-size:13px}
@media(max-width:1366px){
.home-page #contents{max-width:1060px;width:calc(100% - 40px);margin-left:auto;margin-right:auto}
.home-page #contents #contents-inner{width:calc(100% - 270px)}
.home-page #contents #mainimg{display:none}
.home-page #contents #mainimg-s{padding-bottom:25px;margin-bottom:30px;border-bottom:1px solid var(--school-line)}
.home-page #contents #mainimg-s>div>div>img:first-child{border-radius:9px}
.home-page #contents #mainimg-s a img{border-radius:6px}
}
@media(max-width:800px){
.home-page #contents{width:calc(100% - 28px);padding-bottom:35px}
.home-page #contents #contents-inner{width:100%;float:none;padding:0;margin:0}
.home-page #contents #new{padding:22px 16px;border-radius:8px}
.home-page #contents #new h2{font-size:21px;padding-bottom:16px;margin-bottom:20px}
.home-page #contents #new #newinfo2{padding:0;height:auto;max-height:none;overflow:visible;font-size:14px}
.home-page #contents #new #newinfo2 br+br{display:none}
.home-page #contents #side{float:none;width:100%;margin:30px 0 0;padding:24px 20px}
.home-page #contents #side iframe{height:280px}
.home-page #contents #side .white{font-size:14px}
.home-page #contents #mainimg-s{margin-bottom:24px;padding-bottom:20px}
}

/* css/vocal-design.css から共通ファイルへ統合 */

/* ボーカルページ本文のデザイン。ヘッダー・他ページには適用しません。 */
.vocal-page #contents{padding-bottom:50px;background:linear-gradient(#fff 0%,#fffdf9 100%)}
.vocal-page #main{max-width:1060px;width:calc(100% - 48px);color:var(--school-ink);line-height:1.95}
.vocal-page #main>section>h2{position:relative;left:auto;font-size:30px;letter-spacing:.06em;padding:25px 0 22px;margin:0 0 28px;border-bottom:1px solid var(--school-line)}
.vocal-page #main>section>h2:before{left:0;bottom:-2px;width:100px;height:3px;background:var(--school-red)}
.vocal-page #main p{padding:0 0 20px;margin:0;font-size:15px;line-height:2}
.vocal-page #main img{height:auto;max-width:100%}
.vocal-page #main>section>p img{display:block;margin:0 auto;border-radius:10px}
.vocal-page #main .vocal-story{margin:38px 0 44px;padding:30px;background:var(--school-cream);border:1px solid var(--school-line);border-radius:12px}
.vocal-page #main .vocal-story h3{margin:0 0 24px;padding:0 0 15px;background:none;border:0;border-bottom:1px solid #dfcfc4;font-size:21px;line-height:1.7;color:#8e0010}
.vocal-page #main .vocal-story h3::first-letter{padding:0;border:0}
.vocal-page #main .vocal-story h3 strong{display:block;margin:8px 0 0!important;font-size:15px;font-weight:500;color:var(--school-muted)}
.vocal-page #main .vocal-story>img{display:block;margin:0 auto 25px;border-radius:8px}
.vocal-page #main .vocal-story p img{border-radius:8px;margin-bottom:16px;object-fit:contain}
.vocal-page #main .vocal-story h3:has(a img){border:0;text-align:center;padding:0;margin-bottom:28px}
.vocal-page #main .vocal-story h3 a img{width:431px!important;max-width:100%;height:auto!important;border-radius:6px}
.vocal-page #main .marker-yellow{background:linear-gradient(transparent 65%,#f2dfad 65%);font-weight:bold}
.vocal-page #main .vocal-pricing>p>img{display:block;margin:0 auto 25px;border-radius:10px}
.vocal-page #main .single-heading{font-size:23px;color:#8e0010;border-top:1px solid var(--school-line);padding-top:28px;margin:32px 0 12px}
.vocal-page #main .single-description{font-size:13px;color:var(--school-muted)}
.vocal-page #main .vocal-pricing>p>a>img{border-radius:8px;border:1px solid var(--school-line);margin:0 5px 14px 0;box-sizing:border-box;max-width:calc(50% - 10px)}
.vocal-page #main>section>h3{font-size:22px;background:var(--school-cream);border:1px solid var(--school-line);border-left:4px solid var(--school-red);padding:16px 22px;border-radius:5px;margin:32px 0 24px}
.vocal-page #main>section>h3::first-letter{border:0;padding:0}
@media(max-width:700px){
.vocal-page #main{width:calc(100% - 32px)}
.vocal-page #main>section>h2{font-size:24px;padding-top:18px;margin-bottom:22px}
.vocal-page #main p{font-size:14px;line-height:1.95}
.vocal-page #main .vocal-story{padding:20px 16px;margin:26px 0;border-radius:9px}
.vocal-page #main .vocal-story h3{font-size:18px;margin-bottom:19px}
.vocal-page #main .vocal-story h3 strong{font-size:13px}
.vocal-page #main .vocal-story p img{width:100%!important;display:block;margin:0 auto 14px}
.vocal-page #main .single-heading{font-size:21px}
.vocal-page #main .vocal-pricing>p>a>img{max-width:100%;width:100%!important;margin-right:0}
.vocal-page #main>section>h3{font-size:19px;padding:14px 16px}
}

/* 料金・カード：courseとボーカルで同じデザイン */
:root { --red:var(--school-red);--ink:var(--school-ink);--muted:var(--school-muted);--cream:var(--school-cream);--line:var(--school-line);--width:var(--school-width) }
:is(body.course-page, #main .vocal-fees) * { box-sizing:border-box }
body.course-page { margin:0;color:var(--ink);background:#fff;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.8 }
:is(body.course-page, #main .vocal-fees) a { color:inherit;text-decoration:none }
:is(body.course-page, #main .vocal-fees) img { max-width:100%;height:auto;vertical-align:middle }
:is(body.course-page, #main .vocal-fees) h1,
:is(body.course-page, #main .vocal-fees) h2,
:is(body.course-page, #main .vocal-fees) h3,
:is(body.course-page, #main .vocal-fees) p { margin:0 }
:is(body.course-page, #main .vocal-fees) a:focus-visible,
:is(body.course-page, #main .vocal-fees) [tabindex]:focus-visible { outline:3px solid var(--school-red);outline-offset:4px }
:is(body.course-page, #main .vocal-fees) .button { display:inline-flex;justify-content:center;align-items:center;gap:26px;background:var(--red);color:white;border:1px solid var(--red);padding:13px 23px;border-radius:5px;font-size:14px;font-weight:bold;transition:background .2s }
:is(body.course-page, #main .vocal-fees) .button:hover { background:#8d0010 }
:is(body.course-page, #main .vocal-fees) .container { max-width:var(--width);margin:auto }
:is(body.course-page, #main .vocal-fees) .breadcrumb { font-size:11px;color:var(--muted);padding:24px 0 }
:is(body.course-page, #main .vocal-fees) .intro { padding:24px 0 46px;border-bottom:1px solid var(--line) }
:is(body.course-page, #main .vocal-fees) .eyebrow { font-size:11px;letter-spacing:.16em;color:var(--red);font-weight:bold }
:is(body.course-page, #main .vocal-fees) .intro h1 { font-size:38px;letter-spacing:.08em;margin:9px 0 18px }
:is(body.course-page, #main .vocal-fees) .intro>p:last-of-type { color:var(--muted);font-size:15px }
:is(body.course-page, #main .vocal-fees) .jump-links { display:flex;gap:12px;flex-wrap:wrap;margin-top:28px }
:is(body.course-page, #main .vocal-fees) .jump-links a { padding:9px 19px;background:var(--cream);border:1px solid var(--line);border-radius:30px;font-size:13px }
:is(body.course-page, #main .vocal-fees) .jump-links a:hover { border-color:var(--red);color:var(--red) }
:is(body.course-page, #main .vocal-fees) .course-list { padding:36px 0 12px }
:is(body.course-page, #main .vocal-fees) .course-list h2 { font-size:18px;margin-bottom:19px }
:is(body.course-page, #main .vocal-fees) .subjects { display:grid;grid-template-columns:repeat(6,1fr);gap:15px }
:is(body.course-page, #main .vocal-fees) .subjects a { padding:12px 8px;background:var(--cream);border:1px solid var(--line);border-radius:8px;text-align:center;transition:transform .2s }
:is(body.course-page, #main .vocal-fees) .subjects a:hover { transform:translateY(-3px);border-color:var(--red) }
:is(body.course-page, #main .vocal-fees) .subjects img { width:110px;height:90px;object-fit:contain;mix-blend-mode:multiply }
:is(body.course-page, #main .vocal-fees) .subjects span { display:block;font-size:12px;margin-top:7px;font-weight:bold }
:is(body.course-page, #main .vocal-fees) .course-section { margin-top:58px }
:is(body.course-page, #main .vocal-fees) .section-heading { display:flex;align-items:flex-start;gap:18px;margin-bottom:24px }
:is(body.course-page, #main .vocal-fees) .section-number { font-family:Georgia,serif;font-size:46px;line-height:1.3;color:#d9c8b7 }
:is(body.course-page, #main .vocal-fees) .section-heading h2 { font-size:26px;line-height:1.6 }
:is(body.course-page, #main .vocal-fees) .section-heading p:last-child:not(.eyebrow) { font-size:14px;color:var(--muted);margin-top:7px }
:is(body.course-page, #main .vocal-fees) .pill { display:inline-block;vertical-align:middle;font-size:11px;color:var(--red);border:1px solid #e2b7b9;padding:2px 12px;border-radius:30px;margin-left:8px;font-weight:normal }
:is(body.course-page, #main .vocal-fees) .enrollment { background:var(--cream);border-left:3px solid var(--red);padding:15px 20px;font-size:13px;margin-bottom:24px }
:is(body.course-page, #main .vocal-fees) .enrollment s { color:var(--muted);margin-left:10px }
:is(body.course-page, #main .vocal-fees) .enrollment>span { margin-left:20px }
:is(body.course-page, #main .vocal-fees) .enrollment strong { color:var(--red);font-size:22px }
:is(body.course-page, #main .vocal-fees) .fee-panel { border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff }
:is(body.course-page, #main .vocal-fees) .panel-heading { background:var(--red);color:white;display:flex;justify-content:space-between;align-items:center;padding:18px 28px }
:is(body.course-page, #main .vocal-fees) .panel-heading h2 { font-size:21px;letter-spacing:.05em }
:is(body.course-page, #main .vocal-fees) .panel-heading>span { font-size:12px;color:#ffe4e4 }
:is(body.course-page, #main .vocal-fees) .fee-group { padding:25px 28px 0 }
:is(body.course-page, #main .vocal-fees) .fee-group h3 { font-size:21px;color:var(--red);margin-bottom:10px }
:is(body.course-page, #main .vocal-fees) .fee-group h3 small { font-size:12px;font-weight:normal;color:var(--muted);margin-left:14px }
:is(body.course-page, #main .vocal-fees) .table-wrap { overflow-x:auto;border:1px solid #ecd6d3;border-radius:6px }
:is(body.course-page, #main .vocal-fees) table { width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums;text-align:center;font-size:18px }
:is(body.course-page, #main .vocal-fees) th,
:is(body.course-page, #main .vocal-fees) td { padding:15px 6px;border-right:1px solid #ecd6d3;border-bottom:1px solid #ecd6d3 }
:is(body.course-page, #main .vocal-fees) tr>:last-child { border-right:0 }
:is(body.course-page, #main .vocal-fees) tbody tr:last-child>* { border-bottom:0 }
:is(body.course-page, #main .vocal-fees) thead th { font-size:14px;color:#8d1520;background:#fcf0ee;font-weight:600 }
:is(body.course-page, #main .vocal-fees) thead th:first-child { width:23% }
:is(body.course-page, #main .vocal-fees) thead small { display:block;font-size:10px;font-weight:normal }
:is(body.course-page, #main .vocal-fees) tbody th { background:#fdf8f5;font-size:24px;color:var(--red) }
:is(body.course-page, #main .vocal-fees) tbody th span { font-size:14px;margin-left:4px }
:is(body.course-page, #main .vocal-fees) td { font-weight:600;white-space:nowrap }
:is(body.course-page, #main .vocal-fees) .popular { background:#fffaf5;color:var(--red) }
:is(body.course-page, #main .vocal-fees) .badge { display:block;width:max-content;margin:3px auto 0;background:var(--red);color:white;border-radius:3px;font-size:9px;padding:0 7px;font-weight:normal;line-height:1.7 }
:is(body.course-page, #main .vocal-fees) .fee-note { padding:19px 28px 24px;color:var(--muted);font-size:11px;text-align:right }
:is(body.course-page, #main .vocal-fees) .materials-note { font-size:12px;color:var(--muted);margin-top:18px }
:is(body.course-page, #main .vocal-fees) .prime-panel { display:grid;grid-template-columns:1fr 1fr;background:var(--cream);border-radius:10px;overflow:hidden;border:1px solid var(--line) }
:is(body.course-page, #main .vocal-fees) .prime-panel>img { width:100%;height:100%;object-fit:cover }
:is(body.course-page, #main .vocal-fees) .prime-details { padding:32px }
:is(body.course-page, #main .vocal-fees) .prime-details h3 { font-size:23px;margin:8px 0 22px }
:is(body.course-page, #main .vocal-fees) .single-fee { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--line) }
:is(body.course-page, #main .vocal-fees) .single-fee>span { font-size:14px }
:is(body.course-page, #main .vocal-fees) .single-fee strong { font-size:28px }
:is(body.course-page, #main .vocal-fees) .single-fee small { font-size:11px;margin-left:4px }
:is(body.course-page, #main .vocal-fees) .prime-details>p:not(.eyebrow) { font-size:11px;color:var(--muted);margin-top:20px }
:is(body.course-page, #main .vocal-fees) .text-link { display:inline-block;font-size:13px;color:var(--red);font-weight:bold;margin-top:10px }
:is(body.course-page, #main .vocal-fees) .cta { margin:64px 0;background:var(--cream);text-align:center;padding:42px 20px;border-radius:10px;border-top:3px solid var(--red) }
:is(body.course-page, #main .vocal-fees) .cta h2 { font-size:25px;margin:10px 0 }
:is(body.course-page, #main .vocal-fees) .cta>p:not(.eyebrow) { font-size:13px;color:var(--muted) }
:is(body.course-page, #main .vocal-fees) .cta>div { display:flex;justify-content:center;gap:14px;margin-top:24px }
:is(body.course-page, #main .vocal-fees) .outline { color:var(--red);background:white }
:is(body.course-page, #main .vocal-fees) .outline:hover { background:#fceceb }
:is(body.course-page, #main .vocal-fees) footer { text-align:center;padding:35px 20px;background:var(--school-ink);color:#f4eee7 }
:is(body.course-page, #main .vocal-fees) footer>a { font-family:Georgia,serif;font-size:22px }
:is(body.course-page, #main .vocal-fees) footer p { font-size:11px;margin:10px 0 }
:is(body.course-page, #main .vocal-fees) footer small { font-size:9px;color:#c7bbb0 }
:is(body.course-page, #main .vocal-fees) .back-top { position:fixed;bottom:20px;right:20px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:white;box-shadow:0 3px 10px #0002 }
@media(max-width:1120px) {
:is(body.course-page, #main .vocal-fees) .container { margin-left:24px;margin-right:24px }
}
@media(max-width:700px) {
:is(body.course-page, #main .vocal-fees) .container { margin-left:18px;margin-right:18px }
:is(body.course-page, #main .vocal-fees) .breadcrumb { padding:18px 0 }
:is(body.course-page, #main .vocal-fees) .intro { padding:16px 0 30px }
:is(body.course-page, #main .vocal-fees) .intro h1 { font-size:30px }
:is(body.course-page, #main .vocal-fees) .intro>p:last-of-type { font-size:13px }
:is(body.course-page, #main .vocal-fees) .jump-links { gap:8px;margin-top:22px }
:is(body.course-page, #main .vocal-fees) .jump-links a { font-size:11px;padding:7px 11px }
:is(body.course-page, #main .vocal-fees) .subjects { grid-template-columns:repeat(3,1fr);gap:9px }
:is(body.course-page, #main .vocal-fees) .subjects img { height:72px;width:92px }
:is(body.course-page, #main .vocal-fees) .subjects span { font-size:11px }
:is(body.course-page, #main .vocal-fees) .course-list h2 { font-size:16px }
:is(body.course-page, #main .vocal-fees) .course-section { margin-top:40px }
:is(body.course-page, #main .vocal-fees) .section-heading { gap:12px;margin-bottom:18px }
:is(body.course-page, #main .vocal-fees) .section-number { font-size:36px }
:is(body.course-page, #main .vocal-fees) .section-heading h2 { font-size:21px }
:is(body.course-page, #main .vocal-fees) .section-heading p:last-child:not(.eyebrow) { font-size:12px }
:is(body.course-page, #main .vocal-fees) .eyebrow { font-size:9px }
:is(body.course-page, #main .vocal-fees) .enrollment { padding:12px 14px }
:is(body.course-page, #main .vocal-fees) .enrollment>span { display:block;margin-left:0;font-size:11px }
:is(body.course-page, #main .vocal-fees) .enrollment strong { font-size:20px }
:is(body.course-page, #main .vocal-fees) .panel-heading { padding:16px }
:is(body.course-page, #main .vocal-fees) .panel-heading h2 { font-size:17px }
:is(body.course-page, #main .vocal-fees) .panel-heading>span { display:none }
:is(body.course-page, #main .vocal-fees) .fee-group { padding:19px 12px 0 }
:is(body.course-page, #main .vocal-fees) .fee-group h3 { font-size:18px }
:is(body.course-page, #main .vocal-fees) .fee-group h3 small { font-size:10px;margin-left:9px }
:is(body.course-page, #main .vocal-fees) table { font-size:12px }
:is(body.course-page, #main .vocal-fees) th,
:is(body.course-page, #main .vocal-fees) td { padding:12px 2px }
:is(body.course-page, #main .vocal-fees) thead th { font-size:11px }
:is(body.course-page, #main .vocal-fees) thead th:first-child { width:25% }
:is(body.course-page, #main .vocal-fees) thead small { font-size:8px }
:is(body.course-page, #main .vocal-fees) tbody th { font-size:20px }
:is(body.course-page, #main .vocal-fees) tbody th span { font-size:11px;margin-left:2px }
:is(body.course-page, #main .vocal-fees) .fee-note { padding:17px 14px;font-size:10px;text-align:left }
:is(body.course-page, #main .vocal-fees) .prime-panel { grid-template-columns:1fr }
:is(body.course-page, #main .vocal-fees) .prime-panel>img { max-height:260px;object-position:center 35% }
:is(body.course-page, #main .vocal-fees) .prime-details { padding:24px }
:is(body.course-page, #main .vocal-fees) .cta { margin:42px 0;padding:30px 15px }
:is(body.course-page, #main .vocal-fees) .cta h2 { font-size:20px }
:is(body.course-page, #main .vocal-fees) .cta>div { flex-direction:column;gap:10px }
:is(body.course-page, #main .vocal-fees) .back-top { width:36px;height:36px;right:10px;bottom:10px }
}
@media(prefers-reduced-motion:reduce) {
:is(body.course-page, #main .vocal-fees) * { transition:none!important }
}

/* ===== ここから全ページ共通。普段の調整はこの部分を編集します。 ===== */
:root {
  --school-red: #b90012;
  --school-ink: #302a28;
  --school-muted: #756b65;
  --school-cream: #faf7ef;
  --school-line: #eadfd6;
  --school-width: 1060px;
  --school-title-size: 38px;
  --school-heading-size: 26px;
}
body.school-site {
  margin: 0;
  color: var(--school-ink);
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.9;
}
/* ヘッダーの書体・配置はshared-header.cssで管理します。 */
body.school-site :is(#contents, main.container) { color: var(--school-ink); }
body.school-site #contents { box-sizing: border-box; max-width: var(--school-width); padding-bottom: 48px; }
body.school-site #main { box-sizing: border-box; max-width: 100%; color: var(--school-ink); }
body.school-site:not(.home-page):not(.vocal-page) #contents { width: calc(100% - 48px); margin-left: auto; margin-right: auto; }
body.school-site :is(#contents #main, #contents, #main, main.container) {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  overflow-wrap: break-word;
}
body.school-site :is(#contents #main, #contents, #main, main.container) h2 {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 36px 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--school-ink);
  font-family: inherit;
  font-size: var(--school-heading-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .03em;
  text-shadow: none;
  text-align: left;
}
/* 古いh2の太い赤線・位置ずれをなくします。 */
body.school-site :is(#contents #main, #contents, #main, main.container) h2::before,
body.school-site :is(#contents #main, #contents, #main, main.container) h2::after { content: none; display: none; }
body.school-site :is(#contents #main, #contents, #main, main.container) h2::first-letter { border: 0; padding: 0; }
/* 各ページの最初のh2は、courseのページタイトルに合わせます。 */
body.school-site :is(#contents #main, #contents, #main) h2.page-heading {
  margin: 24px 0 32px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--school-line);
  font-size: var(--school-title-size);
  letter-spacing: .06em;
}
body.school-site :is(#contents #main, #contents, #main, main.container) h3 {
  position: static;
  clear: both;
  margin: 32px 0 20px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--school-line);
  border-radius: 0;
  background: none;
  color: var(--school-red);
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.7;
  text-shadow: none;
}
body.school-site :is(#contents #main, #contents, #main, main.container) h3::first-letter { border: 0; padding: 0; }
body.school-site :is(#main, main.container) p { line-height: 1.9; }
body.school-site #main p { padding: 0 0 18px; margin-top: 0; }
body.school-site #main :is(h2, h3) + p { margin-top: 0; }
body.school-site :is(#contents, main.container) a { text-underline-offset: 4px; }
body.school-site :is(#contents, main.container) a:hover { color: var(--school-red); }
body.school-site #main :is(img, video, iframe) { max-width: 100%; }
body.school-site #main img { height: auto; }
body.school-site #main :is(.ta1, .table-wrap) { border-color: var(--school-line); }
body.school-site #main .ta1 { background: #fff; }
body.school-site #main .ta1 :is(th, td) { border-color: var(--school-line); }
body.school-site #main .ta1 th { background: var(--school-cream); color: var(--school-ink); }
body.school-site :is(#sub, #side) .box1 { box-sizing: border-box; background: var(--school-cream); color: var(--school-ink); border: 1px solid var(--school-line); border-radius: 10px; padding: 20px; }
body.school-site :is(#sub, #side) .white { color: var(--school-muted); }
body.school-site footer, body.school-site #copyright { background: var(--school-ink); color: #f4eee7; }
body.school-site footer { padding: 28px 16px; font-size: 12px; line-height: 1.9; }
body.school-site footer a, body.school-site footer a:hover { color: #f4eee7; }
body.school-site #pagetop a { background: var(--school-red); border-color: var(--school-red); color: #fff; }
body.school-site #pagetop a:hover { background: #fff; color: var(--school-red); }
/* courseとボーカルの料金欄は共通の役割ごとにサイズを揃えます。 */
body.school-site :is(#contents #main, #contents, #main, main.container) .section-heading h2 { margin: 0; padding: 0; border: 0; font-size: 26px; line-height: 1.6; letter-spacing: 0; }
body.school-site :is(#contents #main, #contents, #main, main.container) .panel-heading h2 { margin: 0; padding: 0; border: 0; color: #fff; font-size: 21px; letter-spacing: .05em; }
body.school-site :is(#contents #main, #contents, #main, main.container) .fee-group h3 { clear: none; margin: 0 0 10px; padding: 0; border: 0; color: var(--school-red); }
body.school-site :is(#contents #main, #contents, #main, main.container) .course-list h2 { margin: 0 0 19px; font-size: 18px; }
body.school-site :is(#contents #main, #contents, #main, main.container) .cta h2 { margin: 10px 0; font-size: 25px; }
body.school-site #main .vocal-fees { margin: 45px 0; font-family: inherit; }
body.school-site #main .vocal-fees p { padding: 0; margin: 0; }
body.school-site #main .vocal-fees .monthly-title { font-size: 28px; margin: 8px 0 24px; }
body.school-site #main .vocal-fees .course-section:first-of-type { margin-top: 20px; }
body.school-site #main .vocal-fees .enrollment { padding: 15px 20px; margin-bottom: 24px; }
body.school-site #main .vocal-fees .fee-note { padding: 19px 28px 24px; }
body.school-site #main .vocal-fees .materials-note { margin-top: 18px; }
body.school-site.home-page #main h2.page-heading { font-size: 26px; margin: 0 0 22px; padding-bottom: 20px; letter-spacing: 0; }
body.school-site.home-page #contents #side h3 { margin-top: 0; }
/* 料金ページ：旧ヘッダー用CSSを廃止した分の、本文の上余白です。 */
@media (max-width: 1366px) {
  body.school-site.course-page > .container { padding-top: 100px; }
}
@media (max-width: 700px) {
  :root { --school-title-size: 28px; --school-heading-size: 22px; }
  body.school-site { font-size: 14px; }
  body.school-site:not(.home-page):not(.vocal-page) #contents { width: calc(100% - 32px); }
  body.school-site :is(#contents #main, #contents, #main, main.container) h2 { margin-top: 28px; margin-bottom: 18px; }
  body.school-site :is(#contents #main, #contents, #main) h2.page-heading { margin: 18px 0 24px; padding-bottom: 20px; }
  body.school-site :is(#contents #main, #contents, #main, main.container) h3 { font-size: 18px; margin: 26px 0 18px; }
  body.school-site :is(#contents #main, #contents, #main, main.container) .section-heading h2 { margin: 0; font-size: 21px; }
  body.school-site :is(#contents #main, #contents, #main, main.container) .panel-heading h2 { margin: 0; font-size: 17px; }
  body.school-site :is(#contents #main, #contents, #main, main.container) .fee-group h3 { margin: 0 0 10px; }
  body.school-site :is(#contents #main, #contents, #main, main.container) .course-list h2 { margin: 0 0 19px; font-size: 16px; }
  body.school-site :is(#contents #main, #contents, #main, main.container) .cta h2 { margin: 10px 0; font-size: 20px; }
  body.school-site #main .vocal-fees .enrollment { padding: 12px 14px; }
  body.school-site #main .vocal-fees .fee-note { padding: 17px 14px; }
  body.school-site #main .vocal-fees .monthly-title { font-size: 24px; }
}
@media (max-width: 600px) {
  body.school-site.course-page > .container { padding-top: 80px; }
}

/* 講座ページに残っている固定幅も画面内へ収めます。 */
body.school-site #contents :is(div, section) { box-sizing: border-box; max-width: 100%; min-width: 0; }
body.school-site #contents img { max-width: 100%; height: auto; }
body.school-site :is(#contents #main, #contents, #main) h2.page-heading { text-wrap: balance; }
/* 旧テンプレートの空ラベルは、不要な横スクロールを作らないよう非表示。 */
body.school-site :is(.osusume, .sumi, .date):empty { display: none; }
@media (max-width: 700px) {
  /* 画像に直書きされた左右余白より、スマホの本文幅を優先します。 */
  body.school-site #main img { margin-left: 0 !important; margin-right: 0 !important; }
}

/* メニューの7ページ：パンくず・英語表記・ページタイトル */
body.school-site :is(#contents #main, #contents, #main, main.container) .page-breadcrumb {
  display: block; margin: 0; padding: 24px 0; color: var(--school-muted);
  font-family: inherit; font-size: 11px; line-height: 1.8; text-align: left;
}
body.school-site .page-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  list-style: none; margin: 0; padding: 0;
}
body.school-site .page-breadcrumb li { list-style: none; margin: 0; padding: 0; }
body.school-site .page-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--school-muted); }
body.school-site .page-breadcrumb a { color: inherit; text-decoration: none; }
body.school-site .page-breadcrumb a:hover { color: var(--school-red); text-decoration: underline; }
body.school-site :is(#contents #main, #contents, #main, main.container) .page-intro {
  padding: 24px 0 28px; margin: 0 0 32px;
  border-bottom: 1px solid var(--school-line); text-align: left;
}
body.school-site :is(#contents #main, #contents, #main, main.container) .page-intro .eyebrow {
  margin: 0; padding: 0; color: var(--school-red); font: 700 11px/1.8 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; letter-spacing: .16em;
}
body.school-site :is(#contents #main, #contents, #main, main.container) .page-intro h1.page-heading {
  position: static; margin: 9px 0 0; padding: 0; border: 0; background: none;
  color: var(--school-ink); font-family: inherit; font-size: 38px;
  font-weight: 700; line-height: 1.6; letter-spacing: .06em; text-wrap: balance;
}
body.school-site.course-page main.container .page-intro { margin-bottom: 0; padding-bottom: 46px; }
body.school-site.course-page main.container .page-intro h1.page-heading { margin-bottom: 18px; }
@media (max-width: 700px) {
  body.school-site :is(#contents #main, #contents, #main, main.container) .page-breadcrumb { padding: 18px 0; }
  body.school-site :is(#contents #main, #contents, #main, main.container) .page-intro { padding: 16px 0 24px; margin-bottom: 24px; }
  body.school-site :is(#contents #main, #contents, #main, main.container) .page-intro .eyebrow { font-size: 9px; }
  body.school-site :is(#contents #main, #contents, #main, main.container) .page-intro h1.page-heading { font-size: 30px; }
  body.school-site.course-page main.container .page-intro { margin-bottom: 0; padding-bottom: 30px; }
}

/* 講師の役職と氏名は、単語の途中で改行しないようにします。 */
body.school-site .page-intro .title-part { display: inline-block; white-space: nowrap; }

/* 講師紹介：日本語タイトルの下に添えるローマ字氏名 */
body.school-site :is(#contents #main, #contents, #main, main.container) .page-intro .instructor-name-en {
  margin: 8px 0 0; padding: 0; color: var(--school-muted);
  font: 400 15px/1.8 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: .05em;
}
@media (max-width: 700px) {
  body.school-site :is(#contents #main, #contents, #main, main.container) .page-intro .instructor-name-en { font-size: 13px; }
}

/* 指定ページのパンくずをcourse.htmlの本文開始位置に統一 */
body.school-site.breadcrumb-aligned #contents {
  width: auto; max-width: var(--school-width); margin: 0 auto;
  padding: 0 0 48px;
}
body.school-site.breadcrumb-aligned #main {
  position: static; top: auto; width: 100%; max-width: 100%;
  margin: 0; padding: 0;
}
@media (max-width: 1366px) {
  body.school-site.breadcrumb-aligned #contents { padding-top: 100px; }
}
@media (max-width: 1120px) {
  body.school-site.breadcrumb-aligned #contents { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 700px) {
  body.school-site.breadcrumb-aligned #contents { margin-left: 18px; margin-right: 18px; }
}
@media (max-width: 600px) {
  body.school-site.breadcrumb-aligned #contents { padding-top: 80px; }
}

/* 固定フッターの初回予約アイコンを全ページで同じサイズに統一 */
#contact-s a[href="yoyaku.html"] img {
  width: 80px;
  height: auto;
}