@charset "UTF-8";
/* =========================================================
   花蔵ドラム教室
   noahmusic.jp/drums/ の配色・配置を写したもの。
   寸法の大元は html の文字サイズ（1440幅で15px）で、中身は em で組む。
   実測値の出どころは notes.md。
   ========================================================= */

/* Reset ------------------------------------------------ */
*{ box-sizing: border-box; background-repeat: no-repeat; }
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,figure,figcaption,button{ margin: 0; padding: 0; }
ul,ol,li{ list-style: none; }
a{ text-decoration: none; color: inherit; }
img,svg{ vertical-align: bottom; border: none; max-width: 100%; height: auto; }
button{ background-color: inherit; border: none; font: inherit; color: inherit; cursor: pointer; }
table{ border-collapse: collapse; }

:root{
  --c-red: #ce0612;
  --c-red2: #cc0000;
  --c-red-ring: #ff5b5b;
  --c-black: #333;
  --c-grey-txt: #46505a;
  --c-bg-grey: #f6f6f6;
  --c-bg-system: #f0f5fa;
  --c-bg-news: #f9f5ed;
  --c-footer: #222;
  --c-footer-txt: #d2d2d6;
  --c-cyan: #00c7d5;
  --font-en: 'Barlow Condensed', sans-serif;
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-logo: 'Montserrat', sans-serif;
  --inn-w: 1.5em;
}
@media (min-width: 769px){ :root{ --inn-w: 3em; } a[href^="tel:"]{ pointer-events: none; } }
@media (min-width: 960px){ :root{ --inn-w: 4em; } }

/* 寸法の大元 ------------------------------------------- */
.vw_base{ font-size: 3.125vw; }
@media (min-width: 769px){ .vw_base{ font-size: 10px; } }
@media (min-width: 960px){ .vw_base{ font-size: clamp(10px, 1.04166666vw, 15px); } }

body{
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #000;
  background: #fff;
}

.en{ font-family: var(--font-en); }
.ja{ font-family: var(--font-ja); }
.r-over{ transition: opacity .5s; }
.r-over:hover{ opacity: .6; }

/* ロゴ（noah のロゴの代わりの文字組み） */
.logo-main{
  display: block;
  font-family: var(--font-logo);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.02em;
}
.logo-sub{
  display: block;
  font-family: var(--font-en);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .02em;
}

/* 仮の画像枠 -------------------------------------------- */
.ph{
  position: relative;
  width: 100%;
  background: #d5d8db;
  overflow: hidden;
}
.ph--dark{ background: linear-gradient(135deg, #5d6166 0%, #2e3135 100%); }
.ph--light{ background: #e3e6e9; }
.ph--white{ background: #fff; border: 1px dashed #d0d4d8; }
.ph--cutout{ background: transparent; border: 1px dashed #c3cad1; }
.ph-label{
  position: absolute;
  left: .8em;
  bottom: .6em;
  font-size: 11px;
  line-height: 1.4;
  color: #7c8288;
  pointer-events: none;
}
.ph--dark .ph-label{ color: rgba(255,255,255,.5); }
.ph > img{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* 共通の枠 --------------------------------------------- */
.sec_bloc{ padding: 3em 0; }
._bottom_w{ padding-bottom: 4em; }
.c_inner{ padding: 0 var(--inn-w); }
.c_wide{ max-width: 97.5em; margin: 0 auto; }
.max900{ max-width: 66.25em; margin: 0 auto; }
.max1000{ max-width: 72.5em; margin: 0 auto; }
.max1100{ max-width: 78.75em; margin: 0 auto; }
.max1300{ max-width: 91.25em; margin: 0 auto; }
.bg_grey{ background-color: var(--c-bg-grey); }
@media (min-width: 769px){
  .sec_bloc{ padding: 4em 0; }
  ._bottom_w{ padding-bottom: 6em; }
  .c_inner_pc{ padding-left: var(--inn-w); padding-right: var(--inn-w); }
}

/* セクション見出し（大）：RECOMMENDED など */
.n-sec-ttl{
  font-size: 4em;
  font-weight: normal;
  margin-bottom: 1em;
  text-align: center;
  position: relative;
}
.n-sec-ttl::after{
  content: "";
  position: absolute;
  bottom: -.5em;
  left: 0; right: 0;
  margin: auto;
  display: block;
  height: 1px;
  width: 1.42105em;
  background-color: var(--c-red);
}
.n-sec-ttl .en{ display: block; font-weight: 500; margin-bottom: .2em; }
.n-sec-ttl .ja{
  display: block;
  font-size: .3em;
  line-height: 1.3;
  letter-spacing: .05em;
  color: var(--c-grey-txt);
  font-weight: 700;
}
@media (min-width: 769px){
  .n-sec-ttl{ font-size: 4.7em; padding-top: .2em; margin-bottom: 1em; }
}

/* セクション見出し（中）：KNOWLEDGE・BLOG など */
.sec_ttl{ font-size: 1em; font-weight: normal; text-align: center; line-height: 1.5; margin: 0 0 2em; }
.sec_ttl .en{ display: block; font-size: 5em; font-weight: 500; line-height: 1.05; letter-spacing: .02em; }
.sec_ttl .ja{ display: block; font-size: 1.3em; font-weight: 500; line-height: 1.5; margin: .4em 0 0; color: #333; }
.sec_ttl._s .en{ font-size: 4em; }
.sec_ttl .small2{ font-size: 2.6em; }

/* 黒い丸ボタン */
.induct-btn{
  display: block;
  max-width: 28em;
  margin: auto;
  font-size: 1.3em;
  font-weight: 600;
  text-align: center;
  padding: 1em 1.5em;
  background-color: #333;
  color: #fff;
  border-radius: 2.5em;
  transition: background-color .3s;
}
.induct-btn:hover{ background-color: var(--c-red2); }
.f-link-bt{ padding: 1em 0; }

/* 丸い矢印のリンク */
.link_circle_arrow{
  display: flex;
  width: fit-content;
  align-items: center;
  font-size: 1rem;
  padding: 1.1em 0;
  transition: transform .2s;
}
.link_circle_arrow._center{ margin: auto; }
.link_circle_arrow .txt{ font-size: 1.2em; font-weight: 600; }
.arrow_circle{
  position: relative;
  display: inline-block;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  margin-left: .8em;
  background-color: #000;
  overflow: hidden;
}
.arrow_circle::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 42%;
  height: 42%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l6 6-6 6M10 4l6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s ease-out;
}
.link_circle_arrow:hover{ transform: translateX(.3em); }

/* =========================================================
   HEADER
   ========================================================= */
.n-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  font-size: .75em;
  color: #fff;
  transition: background-color .5s;
}
.n-header-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 7em;
  padding: 0 1em 0 2em;
}
.white .n-header,
._panel_open .n-header,
._tel_open .n-header{ background-color: rgba(0,0,0,.8); }
.n-head-logo{ font-size: 2em; font-weight: normal; line-height: 1; }
.n-head-logo .logo-main{ font-size: .95em; }
.n-head-logo .logo-sub{ font-size: .47em; }
.reverse .n-header{ color: #000; }
.reverse.white .n-header,
._panel_open .n-header,
._tel_open .n-header{ color: #fff; }

.pc-nav{ display: none; }
.sp-btn{ display: flex; }
.telephone-btn,
.panel-btn{
  position: relative;
  display: block;
  width: 6em;
  height: 7em;
}
.telephone-btn-icon{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.2em;
  height: 3.2em;
  color: currentColor;
}
.panel-btn-icon,
.panel-btn-icon::before,
.panel-btn-icon::after{
  position: absolute;
  left: 0; right: 0;
  margin: auto;
  display: block;
  width: 3.2em;
  height: 1px;
  background-color: currentColor;
  transition: transform .3s, background-color .3s;
}
.panel-btn-icon{ top: 50%; }
.panel-btn-icon::before,
.panel-btn-icon::after{ content: ""; }
.panel-btn-icon::before{ top: -.9em; }
.panel-btn-icon::after{ top: .9em; }
.panel-btn-icon.close{ background-color: transparent; }
.panel-btn-icon.close::before{ top: 0; transform: rotate(45deg); }
.panel-btn-icon.close::after{ top: 0; transform: rotate(-45deg); }

.sp-tel-bloc,
.sp-menu-bloc{
  display: none;
  background-color: rgba(0,0,0,.9);
  color: #fff;
}
.sp-tel-bloc{ padding: 2em 2em 3em; text-align: center; }
.sp-tel-link{
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 3.2em;
  padding: .5em 0;
  border: 1px solid #666;
}
.sp-tel-link .en{ font-size: .5em; margin-right: .5em; }
.sp-tel-note{ font-size: 1.4em; line-height: 1.6; margin-top: 1em; text-align: left; }
.sp-menu-main{ padding: 1em 2em 3em; }
.sp-menu-main-li{ font-size: 2em; }
.sp-menu-main-li a{ display: block; padding: 1.1em 0; border-bottom: 1px solid #666; }
.sp-menu-main-li .en{ font-size: 1.2em; font-weight: 500; margin-right: .6em; }
.sp-menu-main-li .ja{ font-size: .8em; }
.sp-open .sp-tel-bloc,
.sp-open .sp-menu-bloc{ display: block; }

@media (min-width: 769px){
  .n-header{ font-size: 1em; }
  .n-header-inner{ min-height: 5.5em; padding: 0 1.5em; }
  .n-header:hover{ background-color: rgba(0,0,0,.8); color: #fff; }
  .sp-btn,
  .sp-tel-bloc,
  .sp-menu-bloc{ display: none !important; }
  .pc-nav{ display: block; font-size: 1.2em; padding-right: .5em; }
  .pc-menu-main{ display: flex; justify-content: flex-end; align-items: center; }
  .pc-menu-main-li{ font-size: 1.1em; padding-left: 3.6vw; }
  .pc-menu-main-li a{ position: relative; display: block; padding: 1.02em 0; transition: opacity .5s; }
  .pc-menu-main-li a:hover{ opacity: .8; }
  .pc-menu-main-li a::after{
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s;
  }
  .pc-menu-main-li a:hover::after{ transform: scaleX(1); }
  .pc-menu-ttl .en{ display: block; font-weight: 500; line-height: 1.2; }
  .pc-menu-ttl .ja{ display: block; font-size: .65em; font-weight: 500; line-height: 1.5; }
}

/* =========================================================
   KV（ヒーロー）
   ========================================================= */
.gakki_main{ margin-bottom: 2em; }
.inst_kv_wrap{ background-color: var(--c-bg-grey); margin-bottom: 3em; }
.inst_kv{
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 2;
  margin-bottom: 4em;
  background: #2b3a40 url(../images/kv_sp.jpg) center / cover;
}
.ph-label--kv{ left: auto; right: 1.5em; bottom: auto; top: 8em; text-align: right; }
/* 写真の上でも黒い見出しが読めるよう、見出し側を白く霞ませる */
.inst_kv::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.inst_kv_ttl_wrap{
  position: absolute;
  left: 0; right: 0;
  top: 8em;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
.inst_kv_ttl{ font-size: 1em; font-weight: normal; text-align: center; margin-bottom: 2.5em; }
.inst_kv_ttl .en{ display: block; font-size: 6.8em; font-weight: 600; letter-spacing: .03em; line-height: 1.2; }
.inst_kv_ttl .ja{ display: block; font-size: 1.8em; font-weight: 600; }

/* 「選ばれる理由」の帯（元は SVG 画像） */
.inst_kv_ttl_img{ display: block; width: 22em; margin: auto; filter: drop-shadow(0 0 2em #fff3); }
.kv-reason-head{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .25em;
  margin-bottom: .35em;
  white-space: nowrap;
}
.kv-reason-head .logo-main{ font-size: 1.55em; line-height: .9; }
.kv-reason-head .logo-sub{ font-size: 1.15em; line-height: 1; }
.kv-reason-head b{ font-family: var(--font-ja); font-size: 1.05em; font-weight: 700; line-height: 1.1; }
.kv-reason-list li{
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5em;
  margin-bottom: .28em;
  padding-left: 2.4em;
  font-family: var(--font-ja);
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(90deg, #c40d17 0%, #d42a1d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.kv-reason-list li small{ font-size: .62em; margin-left: .3em; }
.kv-reason-list i{
  position: absolute;
  left: .55em;
  top: 0; bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: #fff;
  color: #c40d17;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-size: 1em;
}
.kv-reason-etc{ text-align: right; font-family: var(--font-en); font-weight: 500; font-size: .85em; margin-top: .2em; }

/* キャンペーン枠（元は JPG 画像） */
.kv_banner_block{
  position: absolute;
  z-index: 10;
  bottom: -6%;
  left: 0; right: 0;
  margin: auto;
  width: 93%;
}
.kv-campaign{ display: block; font-family: var(--font-ja); color: #fff; font-size: 1.1em; }
@media (min-width: 769px){ .kv-campaign{ font-size: 1.5em; } }
.kv-campaign-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  height: 2em;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-red);
  background: #e6e6e6;
}
.kv-campaign-head span{
  font-size: .5em;
  letter-spacing: .02em;
  padding: .35em .9em;
  border-radius: 2em;
  background: var(--c-red);
  color: #fff;
}
.kv-campaign-body{
  display: flex;
  padding: .6em 0 .7em;
  background: linear-gradient(90deg, #c50d17 0%, #d4341c 100%);
}
.kv-campaign-item{
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: end;
  justify-content: center;
  column-gap: .3em;
}
.kv-campaign-item + .kv-campaign-item{ border-left: 1px solid rgba(255,255,255,.85); }
.kv-campaign-sub{ grid-column: 1; font-size: .62em; font-weight: 700; letter-spacing: .05em; }
.kv-campaign-sub b{ font-family: 'Roboto', sans-serif; font-size: 1.3em; }
.kv-campaign-sub em{
  display: inline-block;
  font-style: normal;
  font-size: 1.25em;
  padding: .05em .35em;
  background: #fff;
  color: var(--c-red);
}
.kv-campaign-main{ grid-column: 1; font-size: 1.2em; font-weight: 900; letter-spacing: .06em; line-height: 1.2; }
.kv-campaign-zero{
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  font-family: var(--font-en);
  font-size: 4.6em;
  font-weight: 600;
  line-height: .9;
}
.kv-campaign-zero small{ font-family: var(--font-ja); font-size: .3em; font-weight: 900; }
.kv-campaign-zero span{
  position: absolute;
  left: -.15em;
  top: .3em;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: .32em;
  color: rgba(255,255,255,.45);
  transform: rotate(-12deg);
}

/* パンくず */
.breadcrumb{ padding: 1.5em 0; margin-bottom: 3em; }
.breadcrumb ul{ text-align: right; }
.breadcrumb li{ display: inline-block; font-size: .8em; }
.breadcrumb li:not(:last-child)::after{ content: ">"; padding: 0 .3em; }

/* 導入文 */
.inst_intro_block{ padding: 2em 0 3em; }
.inst_intro_ttl{ font-size: 1em; font-weight: normal; margin-bottom: 1em; line-height: 1.6; }
.inst_intro_ttl .en{
  display: block;
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-red);
  margin-bottom: .5em;
}
.inst_intro_ttl .ja{ font-size: 2.2em; font-weight: 600; }
.inst_intro_desc{ font-size: 1.2em; padding: 1em 0 1em 2em; line-height: 1.9; }
.inst_intro_desc p{ padding: .3em 0; }

@media (min-width: 769px){
  .inst_kv{ aspect-ratio: 1.8 / 1; background-image: url(../images/kv_pc.jpg); background-position: 70% 50%; }
  .inst_kv::before{ background: linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.45) 30%, rgba(255,255,255,0) 50%); }
  .ph-label--kv{ top: auto; bottom: 8em; right: 2em; }
  .inst_kv_ttl_wrap{ left: 8em; right: auto; top: 0; bottom: -1em; font-size: 1.1vw; }
  .inst_kv_ttl .en{ font-size: 7.5em; }
  .kv_banner_block{ bottom: -4.5em; left: auto; right: 0; width: 95%; max-width: 40em; }
  .inst_intro_block{ padding: 0 0 6em; }
  .inst_pc_flex{ display: flex; justify-content: center; gap: 5em; }
  .inst_intro_desc{ width: 45%; padding: 2.5em 0 0; }
}

/* =========================================================
   RECOMMENDED
   ========================================================= */
.inst_reco_list{ display: flex; flex-wrap: wrap; gap: 1px; width: 100%; position: relative; z-index: 3; }
.inst_reco_list_box{ position: relative; width: 100%; }
.ph--reco{ aspect-ratio: 530 / 218; }
.inst_reco_list .circle{
  position: absolute;
  top: 0; bottom: 0;
  right: 1.2em;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10em;
  height: 10em;
  text-align: center;
  border: solid .15em var(--c-red-ring);
  border-radius: 50%;
  background: var(--c-red);
}
.inst_reco_list .circle p{ font-size: 1.3em; font-weight: bold; line-height: 1.4; color: #fff; }
@media (min-width: 769px){
  .inst_reco_list_box{ width: calc(50% - .5px); }
}

/* =========================================================
   LESSON INFO
   ========================================================= */
.lesson_genre_block{ background-color: var(--c-bg-grey); }
.inst_lesson_sub{
  font-family: var(--font-en);
  font-size: 2em;
  font-weight: 600;
  text-align: center;
  color: var(--c-red);
  margin: .4em 0;
}
.lesson_info_h2,
.drums-type-wrap h2,
.drums-option-wrap h2{
  text-align: center;
  font-weight: bold;
  font-size: 1.7em;
  line-height: 1.5;
  margin-bottom: 1em;
}
.small4{ display: block; font-size: .6em; margin-top: .5em; }
@media (min-width: 769px){
  .lesson_info_h2,
  .drums-type-wrap h2,
  .drums-option-wrap h2{ font-size: 2.2em; }
}

/* ジャンル */
.lesson_genre_list li{ margin-bottom: 1em; }
.lesson_genre_img{ position: relative; width: 100%; text-align: center; }
.lesson_genre_inner{ width: 100%; aspect-ratio: 1.8 / 1; }
.lesson_genre_inner .ph{ height: 100%; }
.lesson_genre_inner h3{
  position: absolute;
  inset: 0;
  height: fit-content;
  margin: auto;
  padding: .5em;
  font-size: 3.2em;
  font-weight: bold;
  letter-spacing: .02em;
  line-height: 1.15;
  text-align: center;
  color: #fff;
  filter: drop-shadow(0 0 .3em black);
}
.lesson_genre_inner h3 span{ display: block; font-family: var(--font-ja); font-size: 1.3rem; font-weight: bold; }
.lesson_genre_txt{ background: #fff; padding: 1em; font-size: 1.1em; line-height: 1.6; }
@media (min-width: 769px){
  .lesson_genre_list{ display: flex; justify-content: space-between; flex-wrap: wrap; font-size: .9em; padding-top: 1em; }
  .lesson_genre_list li{ display: flex; flex-direction: column; width: 48%; margin-bottom: 0; }
  .lesson_genre_txt{ flex: 1; }
}

/* 機材 */
.drums-type-box{ padding: 1.5em 0; }
.drums-type-box li{ position: relative; margin-bottom: 1.5em; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.25); }
.drums-type-box h3{ padding: .6em 0 .5em; font-size: 4em; font-weight: bold; text-align: center; line-height: 1.2; }
.pearl-box h3{ color: #4d4197; }
.dw-box h3{ color: #ff6800; }
.ludwig-box h3{ color: #e41b5b; }
.pearl-line,.dw-line,.ludwig-line{
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 40%;
  height: 12px;
  margin: 0 auto;
}
.pearl-line{ background: #4d4197; }
.dw-line{ background: #ff6800; }
.ludwig-line{ background: #e41b5b; }
.drums-type-txt-box{ padding: 0 1em 1.4em; font-size: 1.1em; line-height: 1.5; }
.ph--kit{ width: 70%; aspect-ratio: 4 / 3; margin: 0 auto 1em; }
@media (min-width: 769px){
  .drums-type-box{ display: flex; justify-content: space-between; }
  .drums-type-box li{ width: 31.5%; margin-bottom: 0; }
}

/* ポイント */
.drums-option-wrap{ background: var(--c-bg-grey); }
.drums-option-box li{ margin-bottom: 2em; }
.drums-option-point{
  font-family: var(--font-en);
  font-size: 2.2em;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: .1em;
  color: var(--c-red2);
}
.drums-option-txtbox{ position: relative; border: 1px dotted var(--c-red2); background: #fff; padding: 1.2em; }
.drums-option-img{ width: 80%; aspect-ratio: 1 / 1; }
.drums-option-ok{
  position: absolute;
  right: 1em;
  top: 1em;
  z-index: 1;
  width: 25%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-red2);
  border-radius: 50%;
  background: #fff;
  text-align: center;
}
.drums-option-ok span{ font-size: 1.05em; font-weight: bold; line-height: 1.45; letter-spacing: .05em; color: #333; }
.drums-option-ok b{ font-family: 'Roboto', sans-serif; font-style: italic; font-size: 2.1em; line-height: 1.1; color: var(--c-red2); }
.drums-option-ttl{ display: block; font-size: 2em; font-weight: bold; padding: .6em 0 .3em; color: var(--c-red2); text-align: center; }
.drums-option-txt p{ font-size: 1.1em; line-height: 1.5; }
@media (min-width: 769px){
  .drums-option-box{ display: flex; justify-content: space-between; }
  .drums-option-box li{ width: 48%; margin-bottom: 0; }
}

/* ドラム各部の名前 */
.drum_parts_sec{ padding: 4em 1.2em; margin: 0 0 2em; border-bottom: 1px solid #ddd; }
.drums-parts-wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.drums-parts-img{ width: 100%; margin: 1em 0; }
.drums-parts-img .ph{ aspect-ratio: 900 / 725; }
.drums-parts-box{
  width: 31%;
  border: 2px solid var(--c-red2);
  background: #fff;
  padding: .7em;
  font-size: .9em;
  line-height: 1.4;
}
.drums-parts-box h3{ font-size: 1.17em; font-weight: bold; margin-bottom: .5em; color: var(--c-red2); }
@media (min-width: 769px){
  .drums-parts-wrap{ position: relative; display: block; padding: 2em 0; margin-bottom: 3em; }
  .drums-parts-img{ width: 90.5%; margin: 0 auto; }
  .drums-parts-box{ position: absolute; z-index: 1; width: 21%; border-width: 3px; padding: 1em; line-height: 1.5; }
  .parts-1{ left: 0; top: 0; }
  .parts-2{ left: 0; top: 32%; }
  .parts-3{ right: 0; top: 0; }
  .parts-4{ left: 0; bottom: 0; }
  .parts-5{ right: 0; bottom: 0; }
  .parts-6{ right: 0; top: 35%; }
}

/* =========================================================
   INSTRUCTOR
   ========================================================= */
.inst_list{ display: flex; justify-content: center; flex-wrap: wrap; gap: .5px; margin-bottom: 1em; }
.inst_list_box{ width: 47%; margin: 0 0 1em; }
.ph--inst{ aspect-ratio: 282 / 338; }
.inst_list_box .txt{ padding: .6em 0; }
.inst_list_box h2{ font-size: 1.6em; font-weight: 600; letter-spacing: .02em; margin-bottom: .1em; }
.inst_style_tag{ font-size: .9em; font-weight: 300; line-height: 1.5; color: var(--c-red); }
@media (min-width: 769px){
  .inst_list{ padding-top: .5em; gap: 1.5em; }
  .inst_list_box{ width: 24%; max-width: 20em; }
  .inst_style_tag{ font-size: .75em; }
}

/* =========================================================
   選ばれる理由
   ========================================================= */
.reason_ttl{ display: block; width: 28em; margin: 1em auto; font-size: 1em; text-align: center; font-weight: normal; }
.reason_ttl_top{ display: flex; justify-content: center; align-items: flex-end; gap: .2em; }
.reason_ttl_top .logo-main{ font-size: 3em; line-height: .85; }
.reason_ttl_top .logo-sub{ font-size: 2.4em; line-height: .95; }
.reason_ttl_top b{ font-family: var(--font-ja); font-size: 2.3em; font-weight: 900; line-height: 1; }
.reason_ttl_main{
  display: block;
  font-family: var(--font-ja);
  font-size: 3.9em;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
}
.sec_reason{ position: relative; border-top: dotted 1px var(--c-red2); margin-top: 5em; padding-top: 4em; }
.sec_reason:last-child{ padding-bottom: 4.5em; border-bottom: dotted 1px var(--c-red2); }
.reason-head{ position: absolute; left: 0; right: 0; top: -3em; text-align: center; }
.f-reason-txt{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 6em;
  height: 6em;
  padding-top: .2em;
  border-radius: 50%;
  background: var(--c-red2);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
}
.f-reason-txt .pre{ display: block; font-size: 1.2em; padding-top: 4px; line-height: 1; }
.f-reason-txt .num{ display: block; font-family: Geologica, sans-serif; font-size: 3em; line-height: 1; }
.reason-sec-ttl{ text-align: center; font-weight: bold; font-size: 2.3em; line-height: 1.4; padding: .3em 0; margin-bottom: .6em; }
.inst_desc{ font-size: 1.15em; line-height: 1.7; padding: .3em 0; margin-bottom: 1em; }
.inst_desc p{ padding: .2em 0; }
.ph--reason{ aspect-ratio: 620 / 414; margin-bottom: 1.5em; }
@media (min-width: 769px){
  .reason_ttl{ width: 34em; }
  .reason-sec-ttl{ font-size: 2.6em; padding: .6em 0; }
  .reason-row{ display: flex; justify-content: space-between; flex-direction: row-reverse; }
  .reason-col{ width: 47%; }
  .reason-col .inst_desc{ padding-top: 0; margin-bottom: 2em; }
  .ph--reason{ margin-bottom: 0; }
}

/* 理由1：3枚のカード */
.n-system-box{ position: relative; background-color: var(--c-bg-system); margin: 7rem auto 0; padding-top: 4rem; }
.n-system-icon{
  position: absolute;
  top: -4rem; left: 0; right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7em;
  height: 7em;
  border-radius: 50%;
}
.n-system-icon svg{ width: 62%; height: 62%; }
.n-system-box-1 .n-system-icon{ background: var(--c-red); }
.n-system-box-2 .n-system-icon{ background: #be8003; }
.n-system-box-3 .n-system-icon{ background: #0098a5; }
.n-system-ttl{
  font-family: var(--font-ja);
  font-size: 2.6em;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  padding: .2em 0 .5em;
}
.n-system-box-1 .n-system-ttl{ color: var(--c-red); }
.n-system-box-2 .n-system-ttl{ color: #be8003; }
.n-system-box-3 .n-system-ttl{ color: #0098a5; }
.n-system-visual{ display: flex; align-items: center; max-width: 400px; aspect-ratio: 400 / 250; margin: 0 auto; padding: 0 1em; }
.n-system-catch{
  width: 46%;
  padding: .55em 0;
  font-family: var(--font-ja);
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .08em;
  text-align: center;
  color: #555;
  border-top: 2px solid;
  border-bottom: 2px solid;
}
.n-system-box-1 .n-system-catch{ border-color: #e4505a; }
.n-system-box-2 .n-system-catch{ border-color: #d2aa55; }
.n-system-box-3 .n-system-catch{ border-color: #3eb1bb; }
.n-system-visual .ph--cutout{ flex: 1; align-self: stretch; margin: 1em 0 0 1em; }
@media (min-width: 768px){
  .n-system-block{ display: flex; }
  .n-system-box{ width: 32%; margin: 5rem auto 3rem; }
  .n-system-ttl{ padding: .5em 0; }
}

/* 料金の表 */
.system-table{ width: 100%; border-top: solid 1px #ddd; border-left: solid 1px #ddd; font-size: 1em; margin: 2em auto; }
.system-table tr{ border-bottom: solid 1px #ddd; border-right: solid 1px #ddd; }
.system-table td,
.system-table th{ border: solid 1px #ccc; text-align: center; }
.system-table thead{ background: var(--c-bg-grey); }
.system-table thead th{ font-size: 1.3em; font-weight: bold; line-height: 1.6; padding: 1em .3em; }
.system-table thead th em{ font-style: normal; font-size: 1.2em; }
.system-table tbody td{ width: 39%; font-size: 1.25em; font-weight: 600; padding: .6em 0; line-height: 1.4; }
.system-table tbody .studio-td{ width: auto; color: var(--c-red2); font-weight: bold; border: solid 1px #ddd; }
.course-price{ font-family: 'Roboto', sans-serif; font-size: 1.6em; }
.studio-td .sub-txt{ display: block; font-size: .8em; font-weight: normal; color: #333; line-height: 1.5; }
.saiyasu-txt{
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: bold;
  background: var(--c-red2);
  color: #fff;
  padding: .3em .5em;
  margin: .2em 0 0 .5em;
}
.option_table{ width: 100%; margin: 1em auto; font-size: 1.1em; }
.option_table td,
.option_table th{ border: solid 1px #ccc; padding: .8em; text-align: center; }
.option_table thead th{ font-weight: bold; line-height: 1.6; background: var(--c-bg-grey); }
.option_table thead th em{ font-size: 1.2em; font-style: normal; }
.option_table tbody td:first-child{ width: 69%; }
.notice{ font-size: .95em; line-height: 1.5; color: var(--c-red2); }

/* =========================================================
   STUDIO
   ========================================================= */
.sec-common-studio{ padding: 3.5rem 0; }
.n-studio-block{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: calc(97.5em - 8em);
  margin: auto;
  border-top: 1px solid #e0e5ea;
  border-left: 1px solid #e0e5ea;
}
.n-studio-box{ width: 50%; background-color: #fff; border-right: 1px solid #e0e5ea; border-bottom: 1px solid #e0e5ea; }
.studio-clip{ position: relative; padding-top: 58%; }
.studio-clip .ph{ position: absolute; inset: 0; height: 100%; }
.n-studio-inner{ position: relative; padding: .5em 0 3em; }
.n-studio-title{ text-align: center; font-size: 1.7em; letter-spacing: .03em; }
.n-studio-title .ja{ display: block; font-weight: 400; color: #333; margin-bottom: -.2em; }
.n-studio-title .en{ display: block; font-size: .5em; color: #808080; letter-spacing: 0; }
.n-btn-wrap{
  position: absolute;
  bottom: 1em; left: 0; right: 0;
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.n-tel-btn{ font-family: 'Oswald', sans-serif; color: var(--c-cyan); font-size: 1.5em; padding-left: .1em; line-height: 1; }
.n-studio-btn{
  display: block;
  width: 3em;
  font-family: var(--font-en);
  font-size: .9em;
  padding-top: 2.8em;
  text-align: center;
  color: #808080;
}
.n-ac-btn{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 1a9 9 0 0 0-9 9c0 6.5 9 15 9 15s9-8.5 9-15a9 9 0 0 0-9-9z' fill='%23f06c8c'/%3E%3Ccircle cx='10' cy='10' r='3.6' fill='%23fff'/%3E%3C/svg%3E") center .2em / 1.9em no-repeat;
}
.n-line-btn{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19' fill='%2306c755'/%3E%3Ctext x='20' y='24' text-anchor='middle' font-family='Arial' font-weight='700' font-size='10' fill='%23fff'%3ELINE%3C/text%3E%3C/svg%3E") center 0 / 2.4em no-repeat;
}
.n-studio-box-last{ background-color: #444; display: flex; justify-content: center; align-items: center; padding: 1em 0; }
.n-studio-box-last p{ font-size: 1.1em; line-height: 1.6; width: 85%; text-align: justify; color: #fff; }
@media (min-width: 769px){
  .n-studio-box{ width: calc(100% / 6); font-size: .9em; }
  .n-tel-btn{ font-size: 1.35em; }
  .n-studio-title{ font-size: 1.6em; }
  .n-studio-btn{ font-size: .82em; }
}
@media (min-width: 960px){
  .n-studio-box{ width: calc(100% / 7); font-size: .8em; }
}

/* =========================================================
   YOUTUBE・GUIDE（BLOG・KNOWLEDGE の型）
   ========================================================= */
.inst_news_sec{ background: var(--c-bg-news); margin-top: 5em; }
.news-cat-blocks{ padding: 0 0 1em; margin-bottom: 1.5em; }
.news-cat-box{ width: 100%; padding: 1.6em 0; border-bottom: 1px dotted #777; }
.news-cat-box:first-child{ border-top: 1px dotted #777; }
.news-cat-pack{
  display: block;
  width: 100%;
  padding: 0 2.5em 0 .5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3l7 7-7 7M10 3l7 7-7 7' fill='none' stroke='%23ce0612' stroke-width='2.6'/%3E%3C/svg%3E") 99% 50% / 1em 1em no-repeat;
}
.news-block p{ font-size: 1.1em; line-height: 1.6; font-weight: bold; }
.news-block time{ display: block; font-size: 1em; color: #aaa; margin-top: .2em; }
@media (min-width: 769px){
  .news-cat-blocks{ margin-bottom: 2em; }
  .inst_news_sec,
  .inst_know_sec{ padding: 5em 0; }
  .inst_pc_flex .sec_ttl{ text-align: left; }
  .inst_pc_news_left{ width: 35%; }
  .inst_pc_news_right{ width: 65%; }
}

/* YOUTUBE の数字・埋め込み・再生リスト */
.yt-stats{ display: flex; align-items: baseline; gap: .6em; margin-top: 1em; }
.yt-stats-num{ font-family: var(--font-ja); font-size: 2.6em; font-weight: 700; color: var(--c-red); line-height: 1.1; }
.yt-stats-label{ font-size: 1.1em; font-weight: bold; color: var(--c-black); }
.inst_pc_news_left .yt-stats:first-of-type{ margin-top: 1.5em; }
.yt-lede{ font-size: 1.15em; line-height: 1.9; margin: 1.5em 0; }
.yt-player{ position: relative; aspect-ratio: 16 / 9; background: #000; }
.yt-player iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-player-note{ font-size: .95em; color: #777; margin: .6em 0 2.5em; }
.yt-chips-ttl{ font-size: 1.3em; font-weight: bold; padding-bottom: .5em; margin-bottom: 1em; border-bottom: 1px dotted #777; }
.yt-chips-head{ font-size: 1em; font-weight: bold; color: #777; margin: 1.2em 0 .6em; }
.yt-chips{ display: flex; flex-wrap: wrap; gap: .5em; }
.yt-chips a{
  display: block;
  padding: .45em 1em;
  font-size: 1em;
  line-height: 1.4;
  background: #fff;
  border: 1px solid #d8d0c0;
  border-radius: 2em;
  transition: background .3s, color .3s, border-color .3s;
}
.yt-chips a:hover{ background: var(--c-red); border-color: var(--c-red); color: #fff; }
.yt-chips--theme a{ background: transparent; }
.inst_news_sec .f-link-bt{ margin-top: 2.5em; }
@media (min-width: 769px){
  .yt-lede{ margin-top: 0; }
}

/* =========================================================
   ASIDE：LESSON MENU（INSTRUMENTS の型）・SNS（OTHER WORKS の型）
   ========================================================= */
aside.bg_grey{ margin-top: 4em; }
.sec-mi{ padding: 3.5rem 0 6em; }
.n-sec-p{
  font-size: 1.1em;
  line-height: 1.5;
  width: 100%;
  max-width: 54em;
  margin: 0 auto 2rem;
  padding: 0 1.5em;
  text-align: justify;
  color: var(--c-grey-txt);
}
.mi-block{ display: flex; flex-wrap: wrap; overflow: hidden; max-width: 84em; margin: auto; }
.mi-box{ position: relative; width: 50%; aspect-ratio: 8 / 7; overflow: hidden; border: .5px solid #434343; }
.mi-box > .ph{ position: absolute; inset: 0; height: 100%; }
.mi-box-ttl{
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-64%);
  font-size: clamp(3.1rem, 8.85714vw, 4rem);
  font-weight: normal;
  line-height: 1.1;
  color: #fff;
  text-align: center;
  filter: drop-shadow(0 0 .5em #000a);
}
.mi-box-ttl .en{ display: block; font-weight: 500; }
.mi-box-ttl .ja{ display: block; font-size: .42em; font-weight: 700; line-height: 1.6; }
.mi-more-btn{
  position: absolute;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 2.1em;
  font-family: var(--font-en);
  font-size: clamp(1.3rem, 3.714285vw, 1.5rem);
  line-height: 2.1em;
  color: #fff;
  text-align: center;
  background-color: rgba(0,0,0,.6);
  cursor: pointer;
}
.mi-box:nth-child(even) .mi-more-btn{ background-color: rgba(0,0,0,.8); }
.mi-more-detail{
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1rem, 2.857142vw, 1.4rem);
  background-color: rgba(0,0,0,.7);
  color: #fff;
  transform: translateY(10%);
  opacity: 0;
  transition: transform 1s, opacity 1s;
}
.mi-more-detail-txt{ width: 90%; font-size: .9em; line-height: 1.4; padding-bottom: .5em; text-align: justify; }
.mi-more-detail .more-btn{ position: absolute; bottom: .8em; font-size: 1.3em; border-bottom: 1px solid #fff; }
.mi-close-box{ position: absolute; display: none; z-index: 2; right: 0; top: 0; width: 2.6em; height: 2.6em; cursor: pointer; }
.mi-close-btn,
.mi-close-btn::before{
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 16px;
  height: 1px;
  background-color: #fff;
}
.mi-close-btn{ transform: rotate(45deg); }
.mi-close-btn::before{ content: ""; transform: rotate(90deg); }
.mi-open .mi-more-btn{ display: none; }
.mi-open .mi-more-detail{ transform: translateY(0); opacity: 1; z-index: 3; }
.mi-open .mi-close-box{ display: block; z-index: 4; }
@media (min-width: 769px){
  .mi-box{ width: 25%; }
  .mi-box-ttl{ font-size: 2.8em; }
  .mi-more-detail{ font-size: .9em; }
  .mi-more-btn{ font-size: 1.1em; }
  .mi-more-detail .more-btn{ font-size: 1em; }
}
@media (min-width: 960px){
  .mi-box{ width: 20%; }
}

.sec-mi + .otr_wks{ padding-top: 2em; }
.work_list{ display: flex; flex-wrap: wrap; gap: 1px; }
.work_list_box{ width: calc((100% - 1px) / 2); }
.work_list_box a{ display: block; transition: opacity .4s; }
.work_list_box a:hover{ opacity: .7; }
.work_list_img_wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #3c3f43 0%, #111 100%);
}
.work_list_name{ font-family: var(--font-logo); font-weight: 500; font-size: 1.6em; letter-spacing: .04em; color: #fff; }
@media (min-width: 769px){
  .work_list_box{ width: calc((100% - 5px) / 6); }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background-color: var(--c-footer); color: #fff; padding: 1em 0 4em; }
.foot-top-block{ padding: 2em 3%; }
.foot-lede-ttl{ width: fit-content; margin: 0 auto 3em; font-size: 1.6em; }
.foot-lede-ttl .logo-main{ font-size: 1.25em; }
.foot-lede-ttl .logo-sub{ font-size: .62em; }
.foot-lede-desc{ color: var(--c-footer-txt); font-size: .9em; line-height: 1.5; text-align: justify; }
.fnavi-block{ display: grid; grid-template-columns: 1fr 1fr; gap: 2em 1em; margin-top: 3em; }
.fnavi-sec-ttl{ font-size: 1em; font-weight: bold; line-height: 1.45; margin-bottom: .5em; }
.fnavi-list li{ font-size: 1em; line-height: 1.6; }
.fnavi-list li::before{ content: "→ "; }
.fnavi-list a:hover{ text-decoration: underline; }
.copyright{ color: var(--c-footer-txt); font-family: var(--font-en); font-size: 11px; padding: 1.5em 3%; }
@media (min-width: 769px){
  .footer{ font-size: .9em; padding: 4em 0; }
  .foot-top-block{ display: flex; justify-content: space-between; padding: 0; margin-bottom: 2.4em; }
  .foot-lede{ flex-basis: 35%; }
  .foot-lede-ttl{ margin: 0 0 3em; }
  .fnavi{ flex-basis: 62%; }
  .fnavi-block{ display: flex; justify-content: flex-end; gap: 2em; margin-top: 4.4em; }
  .fnavi-sec-ttl,
  .fnavi-list li{ font-size: .8em; }
  .copyright{ padding: 0; margin-top: 4em; }
}
@media (min-width: 960px){
  .foot-top-block{ margin-bottom: 0; }
}

/* =========================================================
   右下の丸いバナー（元は画像）
   ========================================================= */
.top-banner-ul-pc{ display: none; }
.top-banner-ul-pc.is-animation{
  display: block;
  position: fixed;
  right: 1em;
  bottom: 1em;
  z-index: 7;
  width: 10em;
  animation: top-banner-fade .6s linear 1;
}
@keyframes top-banner-fade{ from{ opacity: 0; } to{ opacity: 1; } }
.float-banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #d10a13;
  color: #fff;
  font-family: var(--font-ja);
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 0 0 .12em #fff inset, 0 .2em .6em rgba(0,0,0,.15);
}
.fb-pre{ font-size: .85em; border-bottom: 1px solid #fff; margin-bottom: .35em; padding: 0 .2em .05em; }
.fb-box{ font-size: .72em; background: #fff; color: #d10a13; padding: .1em .3em; margin-bottom: .1em; }
.fb-main{ font-size: 1.55em; letter-spacing: .02em; }
.fb-sub{ font-size: .85em; }
.fb-more{ font-family: var(--font-en); font-size: .62em; font-weight: 500; border-bottom: 1px solid #fff; margin-top: .45em; }

/* =========================================================
   画面に入ったときの演出（fadein.css の写し）
   ========================================================= */
.fadeInLeft,
.fadeInUp{ opacity: 0; }
.fadeInLeft.on{ animation: fadeInLeftAnime 1s forwards; }
.fadeInUp.on{ animation: fadeInUpAnime .7s forwards; }
@keyframes fadeInLeftAnime{
  from{ opacity: 0; transform: translateX(10%); }
  70%{ opacity: 1; }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUpAnime{
  from{ opacity: 0; transform: translateY(20px); }
  70%{ opacity: .9; }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .fadeInLeft, .fadeInUp{ opacity: 1; animation: none !important; }
}

/* =========================================================
   2026-10-19 追加：ロゴ・ページ内スクロール・改行・講師プロフィール・予約
   ========================================================= */
/* ページ内リンクは滑らかに動かし、固定ヘッダーの下に隠れないよう止める */
html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: 6.5rem; }

/* 改行の出し分け：sp-br はスマホだけ、pc-br は PC だけで改行する */
.pc-br{ display: none; }
@media (min-width: 769px){
  .sp-br{ display: none; }
  .pc-br{ display: inline; }
}
/* 文節のかたまり。途中で折り返さない */
.w{ display: inline-block; }
/* 見出しは文節で折り返す（対応ブラウザのみ。Safari は .w と改行の指定で整える） */
h1,h2,h3,.n-system-catch,.circle p,.kv-campaign-main{ word-break: auto-phrase; }
p,li,dd{ text-wrap: pretty; }

/* ロゴ：黒猫屋的の紋章＋教室名 */
.logo{ display: flex; align-items: center; gap: .35em; }
.logo-mark{ width: 1.7em; height: 1.7em; flex: none; }
.logo-txt{ font-family: var(--font-ja); font-weight: 700; font-size: .62em; letter-spacing: .06em; white-space: nowrap; }
.foot-lede-ttl{ display: flex; align-items: center; gap: .4em; }
.foot-lede-ttl .logo-mark{ width: 2.6em; height: 2.6em; }
.foot-lede-ttl .logo-txt{ font-size: 1em; }
.kv-reason-head b{ font-size: 1.35em; }
.reason_ttl_top b{ font-size: 2.6em; }

/* 画像（写真は枠いっぱい、イラストは全体を見せる） */
.ph--illust{ border: none; }
.ph--illust > img{ object-fit: contain; }

/* 機材の注記 */
.equip-note{
  max-width: 46em;
  margin: 0 auto 2em;
  padding: 1em 1.4em;
  font-size: 1.1em;
  line-height: 1.8;
  background: #fff;
  border-left: 4px solid var(--c-red);
}
.equip-note b{ color: var(--c-red); }

/* 選ばれる理由：画像を外したので本文を1段で通す */
.reason-row{ display: block; }
.reason-col{ width: 100%; max-width: 50em; margin: 0 auto; }
.n-system-visual{ aspect-ratio: auto; justify-content: center; padding: 1em; }
.n-system-catch{ width: 80%; }

/* 講師プロフィール（開閉） */
.inst_card{ display: block; }
.inst-profile{ max-width: 46em; margin: 0 auto; padding: 0 1.5em; }
.inst-profile > summary{ list-style: none; cursor: pointer; }
.inst-profile > summary::-webkit-details-marker{ display: none; }
.inst-profile .arrow_circle::after{ transform: rotate(90deg); }
.inst-profile[open] .arrow_circle::after{ transform: rotate(-90deg); }
.inst-profile[open] > summary .txt::after{ content: "を閉じる"; }
.inst-profile-body{ padding: 1.5em 0 1em; line-height: 1.8; }
.inst-profile-dl{ border-top: 1px solid #ddd; }
.inst-profile-dl > div{ display: flex; border-bottom: 1px solid #ddd; padding: .7em 0; }
.inst-profile-dl dt{ flex: none; width: 6.5em; font-weight: bold; color: var(--c-grey-txt); }
.inst-profile-h{ font-size: 1.3em; font-weight: bold; margin: 1.8em 0 .6em; padding-left: .6em; border-left: 4px solid var(--c-red); line-height: 1.4; }
.inst-profile-list li{ position: relative; padding-left: 1.2em; margin-bottom: .4em; }
.inst-profile-list li::before{ content: "■"; position: absolute; left: 0; color: var(--c-red); font-size: .7em; top: .45em; }
.inst-profile-msg{ font-size: 1.05em; }

/* 予約（公式LINEのみ） */
.contact-sec{ text-align: center; }
.contact-lede{ font-size: 1.25em; line-height: 1.9; margin: 1em 0 2em; }
.contact-lede b{ color: var(--c-red); }
.contact-steps{ display: flex; justify-content: center; gap: 1em; margin-bottom: 1.5em; }
.contact-steps li{
  width: 11em;
  padding: 1.2em .5em;
  font-size: 1.05em;
  font-weight: bold;
  line-height: 1.5;
  background: #fff;
  border: 1px solid #ddd;
}
.contact-steps span{
  display: block;
  width: 2em; height: 2em;
  margin: 0 auto .6em;
  line-height: 2em;
  font-family: 'Oswald', sans-serif;
  color: #fff;
  background: var(--c-red);
  border-radius: 50%;
}
.induct-btn--line{ background-color: #06c755; }
.induct-btn--line:hover{ background-color: #05a648; }
.contact-note{ font-size: 1em; color: #555; }
@media (max-width: 768px){
  .contact-steps{ gap: .5em; }
  .contact-steps li{ width: 32%; font-size: 1em; }
}

.contact-steps i{ font-style: normal; }
/* スタジオは1か所なので、写真と所在地の2枚を中央に大きく並べる */
@media (min-width: 769px){
  .n-studio-block{ justify-content: center; }
  .n-studio-box{ width: 26em; font-size: 1em; }
}
/* 短い説明文も文節で折り返す（対応ブラウザのみ） */
.equip-note,.contact-lede,.notice,.drums-option-txt p,.inst-profile-list li,.yt-player-note,.contact-note{ word-break: auto-phrase; }
.sec_reason[id]{ scroll-margin-top: 10rem; }

/* =========================================================
   2026-10-19 午後：写真の上の文字・ポイント・プロフィールの開閉・YouTube の流れるサムネイル
   ========================================================= */
/* 写真の上の見出しは、写真を暗くしてから白文字を載せる */
.lesson_genre_inner .ph::after,
.mi-box > .ph::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
}
.lesson_genre_inner h3,
.mi-box-ttl{ z-index: 1; filter: none; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 1em rgba(0,0,0,.5); }
.lesson_genre_inner h3 span{
  display: inline-block;
  margin-top: .4em;
  padding: .15em .8em;
  font-size: 1.1rem;
  text-shadow: none;
  background: var(--c-red);
}

/* レッスンのポイント：写真の代わりに図と大きな数字 */
.point-visual{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin: 1em 0 .5em;
  padding: 1.4em 1em;
  background: var(--c-bg-grey);
}
.point-icon{ width: 7em; height: auto; flex: none; }
.point-big{ font-size: 1.4em; font-weight: bold; color: #333; line-height: 1.2; }
.point-big b{ display: block; font-family: 'Roboto', sans-serif; font-size: 1.9em; color: var(--c-red); }
.point-checks{ margin-top: .3em; }
.point-checks li{
  position: relative;
  padding: .55em 0 .55em 1.9em;
  font-size: 1.1em;
  line-height: 1.5;
  border-bottom: 1px dotted #ccc;
}
.point-checks li::before{
  content: "";
  position: absolute;
  left: .2em; top: .75em;
  width: 1.1em; height: 1.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ce0612'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* プロフィールの開閉（高さは main.js で動かす） */
.inst-profile-body{ overflow: hidden; }
.inst-profile .arrow_circle::after{ transition: transform .4s ease; }

/* YouTube：見出し・数字・説明は中央、サムネイルは画面幅いっぱいに左右へ流す */
.yt-sec{ text-align: center; }
.yt-stats-row{ display: flex; justify-content: center; gap: 2.5em; margin: 1.5em 0 1em; }
.yt-sec .yt-stats{ flex-direction: column; align-items: center; gap: .3em; margin: 0; }
.yt-sec .yt-stats-label{ line-height: 1.4; }
.yt-sec .yt-lede{ margin: 1em auto 2em; }
.yt-loops{ margin-bottom: 3em; }
.yt-loop{ display: flex; overflow: hidden; margin-top: 6px; }
.yt-loop ul{ display: flex; flex: none; gap: 6px; padding-right: 6px; }
.yt-loop li{ width: 16em; flex: none; aspect-ratio: 16 / 9; }
.yt-loop a{ display: block; height: 100%; transition: opacity .3s; }
.yt-loop a:hover{ opacity: .75; }
.yt-loop img{ width: 100%; height: 100%; object-fit: cover; }
.yt-loop--left ul{ animation: ytLoopLeft 120s linear infinite; }
.yt-loop--right ul{ animation: ytLoopRight 120s linear infinite; }
.yt-loop:hover ul{ animation-play-state: paused; }
@keyframes ytLoopLeft{ from{ transform: translateX(0); } to{ transform: translateX(-100%); } }
@keyframes ytLoopRight{ from{ transform: translateX(-100%); } to{ transform: translateX(0); } }
@media (prefers-reduced-motion: reduce){
  .yt-loop ul{ animation: none; }
  .yt-loop{ overflow-x: auto; }
}
.yt-sec .yt-chips{ justify-content: center; }
.yt-sec .yt-chips-ttl{ max-width: 50em; margin: 0 auto 1em; }
@media (max-width: 768px){
  .yt-loop li{ width: 13em; }
}

/* よくある質問 */
.faq-sec{ background: var(--c-bg-grey); }
.faq-list{ margin-top: 1em; }
.faq-item{ background: #fff; margin-bottom: 1em; padding: 1.2em 1.4em; border-left: 4px solid var(--c-red); }
.faq-item dt{ position: relative; padding-left: 2.2em; font-size: 1.2em; font-weight: bold; line-height: 1.6; word-break: auto-phrase; }
.faq-item dd{ position: relative; padding: .6em 0 0 2.6em; font-size: 1.05em; line-height: 1.8; color: #333; }
.faq-q,.faq-a{
  position: absolute; left: 0; top: .1em;
  width: 1.7em; height: 1.7em;
  font-family: 'Oswald', sans-serif; font-size: .9em; line-height: 1.7em; text-align: center;
  color: #fff; border-radius: 50%;
}
.faq-q{ background: var(--c-red); }
.faq-a{ background: #46505a; top: .75em; font-size: .95em; }
/* 外側の .drums-option-box li（2列）の指定が中の箇条書きに効かないようにする */
.drums-option-box .point-checks li{ width: auto; margin-bottom: 0; }
/* 「OK!」の丸と重ならないよう、図と数字は左に寄せる */
.point-visual{ justify-content: flex-start; padding-right: 8.5em; margin-top: 0; }
/* ジャンルの和文ラベルは英字の下に置く */
.lesson_genre_inner h3 span{ display: table; margin: .4em auto 0; }

/* =========================================================
   2026-10-19 夕：料金の節・スタジオの機材・メニュー一覧のタイル・フッター
   ========================================================= */
.price-sec .system-table{ margin-top: 1.5em; }
.price-sec .notice{ margin-top: 1em; }
.studio-equip{ padding: 0 var(--inn-w) 3em; background: none; }
.studio-equip .equip-note{ margin-top: 1em; }

/* メニュー一覧：タイル全体をリンクにする */
.mi-link{ position: absolute; inset: 0; display: block; color: #fff; }
.mi-link .ph{ position: absolute; inset: 0; height: 100%; }
.mi-link .ph img{ transition: transform .6s ease; }
.mi-link:hover .ph img{ transform: scale(1.06); }
.mi-go{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: .7em 0;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  background: rgba(0,0,0,.55);
  transition: background .3s;
}
.mi-link:hover .mi-go{ background: var(--c-red); }

/* フッター：矢印を付けない */
.fnavi-list li::before{ content: none; }
.fnavi-list li{ margin-bottom: .3em; }
.fnavi-box + .fnavi-box .fnavi-sec-ttl + .fnavi-list + .fnavi-sec-ttl{ margin-top: 1.5em; }
.mi-link .ph::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 100%);
}
.sec-mi .n-sec-p{ text-align: center; }
@media (max-width: 768px){
  /* 5枚目はスマホで横いっぱいにして、空きを作らない */
  .mi-box:last-child{ width: 100%; aspect-ratio: 16 / 7; }
}
/* 「4年生〜」「1対1」「¥2,200」などの大きな数字は途中で折り返さない */
.point-big b{ white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1100px){
  .point-visual{ padding-right: 7.5em; }
  .point-big{ font-size: 1.2em; }
}

/* =========================================================
   2026-10-19 夜：ヒーローを低く・講師写真を大きく・FAQ の開閉・1行の注記
   ========================================================= */
/* ヒーロー：写真の高さを抑え、LINE特典は写真の中に収める */
.inst_kv{ aspect-ratio: 5 / 8; }
@media (min-width: 769px){
  .inst_kv{ aspect-ratio: 2.4 / 1; }
  .inst_kv_ttl_wrap{ font-size: .95vw; top: -.5em; }
  .kv_banner_block{ bottom: 2.5em; right: 2em; max-width: 36em; }
  .inst_kv{ margin-bottom: 2em; }
}

/* 講師の写真を大きく */
.inst_list_box{ width: 80%; max-width: 26em; }
@media (min-width: 769px){
  .inst_list_box{ width: 34%; max-width: 26em; }
}

/* 経歴は1行で収める */
.inst-profile-list li{ white-space: nowrap; font-size: min(1em, 3.6vw); }

/* 料金の注記は1行で（画面が狭いときは文字を縮める） */
.notice--oneline{ white-space: nowrap; font-size: min(.95em, 2.65vw); letter-spacing: -.01em; }

/* よくある質問：開閉式 */
.faq-item{ padding: 0; }
.faq-item > summary{
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.1em 3em 1.1em 3.6em;
  font-size: 1.15em;
  font-weight: bold;
  line-height: 1.6;
  word-break: auto-phrase;
}
.faq-item > summary::-webkit-details-marker{ display: none; }
.faq-item > summary .faq-q{ left: 1.2em; top: 1.15em; }
.faq-toggle{
  position: absolute;
  right: 1.2em; top: 50%;
  width: 1em; height: 1em;
  margin-top: -.5em;
}
.faq-toggle::before,
.faq-toggle::after{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 2px;
  margin-top: -1px;
  background: var(--c-red);
  transition: transform .35s ease;
}
.faq-toggle::after{ transform: rotate(90deg); }
.faq-item[open] .faq-toggle::after{ transform: rotate(0deg); }
.faq-body{ overflow: hidden; }
.faq-body p{ position: relative; margin: 0; padding: 0 1.4em 1.2em 3.9em; font-size: 1.05em; line-height: 1.8; color: #333; }
.faq-body .faq-a{ left: 1.3em; top: .15em; }

/* コピーライトは中央 */
.copyright{ text-align: center; }