/* ===== 講師ページの雛形（全講師共通・1つの CSS）=====
   色: 赤 #8b0000（トップと同じ）／ベージュ #f5f1ea／文字 #333 */
.serif {
  font-family: "Noto Serif JP", "Noto Serif CJK JP", serif
}

/* 検索の帯（トップの検索を細くした物） */
.crumb {
  font-size: 12px;
  color: #888;
  padding: 10px 0
}

/* 本文＋右の広告 */
.cols {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding-bottom: 60px
}

.main {
  flex: 1;
  min-width: 0
}

.side {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 20px
}

/* ブロック1: 顔（写真＋名前） */
.hero {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/8;
  background: #ddd
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block
}

.hero .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 32px 26px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  color: #fff
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px
}

.tags i {
  font-style: normal;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 20px;
  padding: 0 10px
}

.hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: .06em
}

.hero h1 small {
  display: block;
  font-size: 16px;
  letter-spacing: .1em
}

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  background: #e9e6e1;
  width: 100%;
  height: 100%
}

.sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  flex-wrap: wrap
}

.sub a {
  font-size: 12px;
  text-decoration: none;
  border: 1px solid #d6d2cc;
  border-radius: 20px;
  padding: 2px 12px
}

.sub .sh {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
  color: #8b0000;
  border: 1px solid #8b0000;
  border-radius: 20px;
  padding: 2px 14px
}

/* 見出し（全ブロック共通） */
.blk {
  margin-top: 64px
}

.blk h2 {
  font-family: "Noto Serif JP", "Noto Serif CJK JP", serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 4px solid #8b0000;
  line-height: 1.4
}

.blk h2 small {
  display: block;
  font-family: "Noto Sans JP", "Noto Sans CJK JP";
  font-size: 11px;
  letter-spacing: .2em;
  color: #8b0000
}

/* ブロック2: 講師紹介 */
.prof {
  display: flex;
  gap: 32px;
  align-items: flex-start
}

/* 写真が経歴の長さに引き伸ばされない（写真は 4:5 のまま） */
.prof .pic {
  width: 260px;
  flex-shrink: 0;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden
}

.prof .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.prof .en {
  font-size: 12px;
  letter-spacing: .2em;
  color: #8b0000;
  margin: 0
}

.prof .nm {
  font-family: "Noto Serif JP", "Noto Serif CJK JP", serif;
  font-size: 22px;
  margin: 0
}

.prof .nm small {
  font-size: 13px;
  color: #777;
  margin-left: 8px
}

.prof .txt {
  font-size: 14px
}

/* 経歴は全部見せる（11/8「プロフィールくらい全部表示させれば」） */
.more {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #8b0000;
  border: 1px solid #8b0000;
  border-radius: 20px;
  padding: 2px 16px;
  text-decoration: none
}

/* ブロック3: 自由ブロック（文章＋写真・リンク） */
.free p {
  margin: 0 0 12px
}

.box {
  background: #f5f1ea;
  border-radius: 6px;
  padding: 20px 24px;
  margin-top: 12px
}

.box h3 {
  font-size: 16px;
  margin: 0 0 6px;
  color: #8b0000
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px
}

.links a {
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #8b0000;
  color: #8b0000;
  border-radius: 4px;
  padding: 6px 16px
}

/* ブロック4: 料金表 */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

th,
td {
  border-bottom: 1px solid #e3dfd8;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top
}

th {
  width: 28%;
  background: #f5f1ea;
  font-weight: 700
}

/* ブロック5: 予約・お問い合わせボタン */
.btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px
}

.btns a {
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  padding: 14px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid #8b0000;
  color: #8b0000
}

.btns a.p {
  background: #8b0000;
  color: #fff
}

/* ブロック6: CD・商品 */
.cds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.cds li {
  list-style: none;
  text-align: center;
  font-size: 13px
}

.cds ul {
  padding: 0;
  margin: 0
}

.cds img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

.cds b {
  display: block;
  margin: 8px 0 4px
}

.cds .jk {
  display: block;
  overflow: hidden
}

/* ジャケット写真もリンク（マウスで写真だけ 1.04 倍） */
.cds .jk img {
  transition: transform .2s
}

.cds .jk:hover img {
  transform: scale(1.04)
}

.cds .buy {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  background: #8b0000;
  color: #fff;
  text-decoration: none;
  padding: 8px 40px;
  border-radius: 4px
}

/* ブロック7: 講師のバナー */
.bnr {
  text-align: center
}

.bnr img {
  width: 100%;
  max-width: 600px
}

/* 600px＝公式サイトのバナーの幅（261106 と同じ。小さくした大きさ） */
.bnr .ph {
  height: 120px;
  border-radius: 6px
}

/* オンライン: アプリのアイコン（手本 tonozuka.net music_school .online_icn と同じ値） */
.online_icn {
  max-width: 480px;
  margin: 20px 0 16px;
  padding: 30px 30px 26px;
  border: 2px solid #d8d8d8;
  border-radius: 10px;
  text-align: center
}

.online_icn p {
  margin: 0 0 26px;
  font-size: 14px;
  color: #8b0000;
  line-height: 1.5
}

.online_icn ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0;
  margin: 0;
  list-style: none
}

.online_icn li {
  flex: 1
}

.online_icn a {
  text-decoration: none
}

.online_icn img {
  width: 60px;
  height: 60px;
  object-fit: contain
}

.online_icn img[alt="Teams"] {
  transform: scale(1.4)
}

.online_icn li span {
  display: block;
  margin-top: 10px;
  font-size: 13px
}

/* 動画: 16:9 */
.yt {
  position: relative;
  aspect-ratio: 16/9;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px
}

.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.ytch a {
  font-size: 13px;
  color: #8b0000
}

/* 戻る（本文の最後） */
.back {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 64px
}

.back a {
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #8b0000;
  color: #8b0000;
  border-radius: 4px;
  padding: 10px 28px
}

.crumb a {
  text-decoration: none
}

.crumb a:hover {
  text-decoration: underline
}

@media (max-width:767px) {
  .online_icn {
    padding: 20px 12px
  }

  .online_icn img {
    width: 44px;
    height: 44px
  }

  .back {
    flex-direction: column;
    align-items: stretch;
    text-align: center
  }

  .crumb {
    padding: 8px 12px
  }

  .cols {
    display: block
  }

  .in {
    padding: 0 12px
  }

  .side {
    width: auto;
    position: static;
    margin-top: 40px
  }

  .ad.sq {
    width: 300px;
    margin: 0 auto 16px
  }

  .hero {
    aspect-ratio: 4/3;
    border-radius: 0;
    margin: 0 -12px
  }

  .hero .cap {
    padding: 40px 16px 16px
  }

  .hero h1 {
    font-size: 24px
  }

  .hero h1 small {
    font-size: 13px
  }

  .blk {
    margin-top: 48px
  }

  .blk h2 {
    font-size: 20px
  }

  .prof {
    display: block
  }

  .prof .pic {
    width: 70%;
    margin: 0 auto 16px
  }

  th,
  td {
    display: block;
    width: 100%
  }

  th {
    padding: 8px 12px
  }

  td {
    padding: 10px 12px 16px
  }

  .btns {
    grid-template-columns: 1fr
  }

  .cds {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }
}

/* 講師の SNS（手本 tonozuka.net profile の linkbtn と同じ考え方: 文字のボタン） */
.sns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 12px
}

.sns a {
  font-size: 12px;
  text-decoration: none;
  border: 1px solid;
  border-radius: 20px;
  padding: 2px 14px;
  background: #fff
}

.sns .is-facebook {
  color: #1877f2
}

.sns .is-instagram {
  color: #c13584
}

.sns .is-youtube {
  color: #e00
}

/* PC だけ・スマホだけの改行（手本の br.pc / br.sp） */
/* 手本の申し込みの箱をポータルの本文の幅に合わせる */
.blk.apply {
  padding: 24px 30px 36px
}

.blk.apply h2 {
  text-align: left;
  color: #333;
  font-size: 24px;
  margin: 0 0 16px
}

.blk.apply .apply_head {
  text-align: left
}

.blk.apply .apply_form {
  grid-template-columns: minmax(0, 1fr)
}

/* 本文の幅が狭いので、手本の 768〜1000px と同じ1列 */
.blk.apply .price_cards {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

/* 5つ横だと狭いので3つずつ */
.blk.apply a,
.cbtns a {
  text-decoration: none
}

.blk.apply .apply_sub a,
.blk.apply .apply_preview,
.cbtn_sub a {
  text-decoration: underline
}

@media (max-width:767px) {
  .blk.apply {
    padding: 24px 16px 30px;
    margin-left: -12px;
    margin-right: -12px
  }

  .blk.apply h2 {
    font-size: 20px
  }

  .blk.apply .price_cards {
    grid-template-columns: 1fr
  }
}

/* スマホ: お問い合わせ・送るボタンは縦1列（決まり: PC 横1列・スマホ縦1列） */
@media (max-width:767px) {
  .cbtns_in {
    display: flex !important;
    flex-direction: column;
    gap: 10px
  }

  .cbtn a {
    font-size: 16px !important;
    padding: 12px 0
  }

  .blk.apply .apply_btns {
    display: flex !important;
    flex-direction: column;
    gap: 14px
  }

  .blk.apply .apply_btns>* {
    width: 100%;
    text-align: center
  }

  .blk.apply .apply_btn {
    display: block;
    width: 100%;
    font-size: 16px;
    text-align: center
  }
}

/* 検索の帯（トップの検索へ送る） */
.sbar {
  background: #f5f1ea;
  padding: 12px 0
}

.sbar form {
  display: flex;
  gap: 8px
}

.sbar input,
.sbar select {
  height: 36px;
  border: 1px solid #d6d2cc;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  padding: 0 10px
}

.sbar input {
  flex: 2;
  min-width: 0
}

.sbar select {
  flex: 1
}

.sbar button {
  border: 0;
  background: #2b2b2b;
  color: #fff;
  font-size: 12px;
  padding: 0 22px;
  border-radius: 4px
}

.ad.sq {
  height: 250px;
  margin-bottom: 20px
}

.ad.wide {
  max-width: 728px;
  height: 90px;
  margin: 0 auto
}

/* 広告④（横長）。形はトップ css/top.css の .ad.wide と同じ（直す時は両方） */
@media (max-width:767px) {
  .ad.wide {
    max-width: 320px;
    height: 100px
  }
}

@media (max-width:767px) {
  .ad.sq {
    width: 300px;
    margin: 0 auto 16px
  }

  .sbar form {
    flex-wrap: wrap
  }

  .sbar input {
    flex: 1 1 100%
  }
}

/* 料金カード: 選んだカードが分かるように（手本 tonozuka.net music_school は、無料相談以外を選ぶと「選択中」が白地に白文字で見えない。11/8 ユーザー指摘のバグ）
   色は「受け方」の選んだボタン（.pill.is-checked）と同じ #4c5f75 */
.price_card.is-selected {
  border-color: #8b0000;
  box-shadow: inset 0 0 0 1px #8b0000;
  background: #fdf6f6
}

/* 選んだカード＝赤枠（無料相談と同じ） */
.price_card.is-selected .price_pick {
  border-color: #8b0000;
  background: #8b0000;
  color: #fff
}

.price_card.is-free.is-selected {
  border-color: #8b0000;
  box-shadow: inset 0 0 0 1px #8b0000
}

.price_card.is-free.is-selected .price_pick {
  border-color: #8b0000;
  background: #8b0000
}

.free .lead3 {
  font-size: 17px;
  color: #8b0000;
  margin: 0 0 10px
}

/* ページ内メニュー: スクロールしても画面の上に止まる（11/8「消えたら意味ない」） */
.sub {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #f5f1ea;
  padding: 16px 14px;
  border-bottom: 2px solid #8b0000;
  box-shadow: 0 6px 8px -8px rgba(0, 0, 0, .3)
}

/* ベージュの帯＋赤い線（上のヘッダーと同じ線）で本文と分ける。16px＝帯の上下の空き */
.sub a {
  background: #fff
}

.sub a.is-cur {
  background: #8b0000;
  border-color: #8b0000;
  color: #fff
}

/* 今見ているブロックのボタン（js/sub.js が付ける）。色＝見出しの赤 */
.blk {
  scroll-margin-top: 84px
}

/* メニューで飛んだ時、見出しが帯の下に隠れない（64px≒帯の高さ） */

/* 大きい写真が横長でない時（build.py の fit）: 写真を切らずに全部見せ、後ろに同じ写真をぼかして敷く（11/9「顔が半分じゃないか」） */
.hero.is-fit {
  position: relative;
  overflow: hidden;
  background: #111
}

.hero.is-fit::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: var(--bg) center/cover;
  filter: blur(18px) brightness(.55)
}

/* 18px＝ぼかしの強さ */
.hero.is-fit>img {
  position: relative;
  object-fit: contain !important
}

.hero.is-fit .cap {
  z-index: 2
}

/* WP のスライダーの写真（wp_extract.py の photos）: 横に並べる */
.photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0
}

.photos img {
  display: block;
  width: 100%;
  height: auto
}

@media (max-width:767px) {
  .photos {
    grid-template-columns: 1fr
  }
}

/* スマホのページ内メニューは共通下部バーへ移す。PCの上部メニューは維持。 */
@media (max-width:767px){
 .sub{display:none;}
 body{padding-bottom:calc(52px + env(safe-area-inset-bottom, 0px));}
 .blk{scroll-margin-top:16px;}
 .shpop{position:fixed;left:12px;right:12px;bottom:calc(60px + env(safe-area-inset-bottom, 0px));z-index:70;}
}