@charset "UTF-8";

/* CSS Document */

.gakki_main {
  margin-bottom: 2em;
}

/* INST KV ========================== */
.inst_kv_wrap{
  background-color: #f6f6f6;
  margin-bottom: 3em;
}
.inst_kv {
  height: auto;
  position: relative;
  background-size: cover;
  background-position: bottom center;
  z-index: 2;
  aspect-ratio: 1 / 2;
}
.drums-kv {  background-image: url(/imgs/inst_kv_img_drums_sp.jpg);}
.guitar-kv {  background-image: url(/assets/img/guitar/main-sp.jpg);}
.bass-kv {  background-image: url(/assets/img/bass/main-bass_sp.jpg);}
.ukulele-kv { background-image: url(/assets/img/ukulele/main-ukulele_sp.jpg);}
.piano-kv { background-image: url(/assets/img/piano/main-piano_sp.jpg);}
.sax-kv {  background-image: url(/assets/img/sax/main-sax_sp.jpg);}
.flute-kv {  background-image: url(/assets/img/flute/main-flute_sp.jpg);}
.trumpet-kv {background-image: url(/assets/img/trumpet/main-trumpet_sp.jpg);}
.trombone-kv {background-image: url(/assets/img/trombone/main-trombone_sp.jpg);}
.violin-kv {  background-image: url(/assets/img/violin/main-violin_sp.jpg);}
.dj-kv {  background-image: url(/assets/img/dj/main-dj_sp.jpg);}
.dtm-kv {
  background-image: url(/assets/img/dtm/main-dtm_sp.jpg);
}

.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;
  text-align: center;
  margin-bottom: 2.5em;
}
.inst_kv_ttl .en {
  font-size: 6.8em;
  font-weight: 600;
  letter-spacing: .03em;
}
.inst_kv_ttl .ja {
  display: block;
  font-size: 1.8em;
  font-weight: 600;
}
.inst_kv_ttl_img{
  display: block;
  width: 22em;
  margin: auto;
}
@media (min-width:769px){

  .inst_kv {
    aspect-ratio: 1.8 / 1;
  }
  .inst_kv_ttl_wrap {
    left: initial;
    right: 6em;
    top: 0;
    bottom: -1em;
    font-size: 1.2vw;
  }
  /* .inst_kv_ttl {
    margin-bottom: 3em;
  } */
  .inst_kv_ttl .en{
    font-size: 7.5em;
  }
  .inst_kv_banner {
    position: relative;
    display: block;
    width: 43%;
    margin-left: auto;
    margin-top: -5%;
    z-index: 10;
  }

  .inst_kv.drums-kv {background-image: url(/imgs/inst_kv_img_drums_pc.jpg);}
  .guitar-kv {background-image: url(/assets/img/guitar/main-pc.jpg);}
  .bass-kv {background-image: url(/assets/img/bass/main-bass_pc.jpg);}
  .ukulele-kv { background-image: url(/assets/img/ukulele/main-ukulele_pc.jpg);}
  .piano-kv {background-image: url(/assets/img/piano/main-piano_pc.jpg); background-position: right bottom; background-size: 140%; }
  .sax-kv {  background-image: url(/assets/img/sax/main-sax_pc.jpg);background-position: left 36% center;}
  .flute-kv {  background-image: url(/assets/img/flute/main-flute_pc.jpg);}
  .trumpet-kv {background-image: url(/assets/img/trumpet/main-trumpet_pc.jpg); background-position: left 36% center;}
  .trombone-kv {background-image: url(/assets/img/trombone/main-trombone_pc.jpg);}
  .violin-kv {  background-image: url(/assets/img/violin/main-violin_pc.jpg);background-position: left 27% center;}
  .dj-kv {  background-image: url(/assets/img/dj/main-dj_pc.jpg);}
  .dtm-kv {
    background-image: url(/assets/img/dtm/main-dtm_pc.jpg);
  }

  .ukulele-kv::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background: linear-gradient(90deg,rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 50%);
    /* mix-blend-mode: multiply; */
  }
  .drums-kv .inst_kv_ttl_wrap ,
  .ukulele-kv .inst_kv_ttl_wrap,
  .dtm-kv .inst_kv_ttl_wrap  {
    left: 8em;
    right: initial;
  }
  .trombone-kv .inst_kv_ttl_wrap {
    right: 4em;
  }
  .piano-kv .inst_kv_ttl_wrap  {
    left: 6em;
    right: initial;
  }
  /* .inst_kv_ttl_img {
    margin-right: 0;
  } */

}/*  */


/* INST INTRO ========================== */
.inst_intro_block{
  padding: 2em 0 3em;
}
.inst_intro_ttl{
  font-size: 1em;
  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(--color-txt-red);
  margin-bottom: 0.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_intro_block {
    padding: 0 0 6em;
  }
  .inst_pc_flex{
    display: flex;
    justify-content: space-between;
  }
  .inst_intro_desc{
    width: 45%;
    padding: 2.5em 0 0;
  }
}/*  */



/* INST RECOMMEND ========================== */
.inst_reco_list{
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  width: 100%;
  background-size: cover;
  position: relative;
  z-index: 3;
}
.inst_reco_list_box{
  position: relative;
  width: 100%;
}
.inst_reco_list .circle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10em;
  aspect-ratio: 1 / 1;
  height: fit-content;
  text-align: center;
  box-sizing: border-box;
  border: solid .15em #ff5b5b;
  border-radius: 50%;
  margin: auto;
  background: var(--color-txt-red);
}
.inst_reco_list .circle p{
  display: flex;
  justify-content: center;
  align-items: center;
  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);
  }

}/*  */


/* drums-top
------------------------------------------- */
/* .gakki-top .topbanner-sec .banner.dr-like .circle{
  background-color: #eb4218;
}
.gakki-top .topbanner-sec .banner.dr-solo .circle{
  background-color: #d4ca5b;
}
.gakki-top .topbanner-sec .banner.dr-tec .circle{
  background-color: #7c3ec4;
}
.gakki-top .topbanner-sec .banner.dr-rhythm .circle{
  background-color: #89c972;
} */
/* .gakki-top .drums-genre-wrap {
  background-image: url(/assets/img/drums/drums-bk-ph_sp.jpg) ;
  background-position: top center; 
  background-size:cover;
}  */

/* drums-genre ===============*/
.drums-genre-txt {
  width: 100%;
  padding: 3em 0;
  background-color: #f6f6f6;
}
.inst_lesson_sub{
  font-family: var(--font-en);
  font-size: 2em;
  font-weight: 600;
  text-align: center;
  color: var(--color-txt-red);
  margin: .4em 0;
}
.lesson_info_h2,
.drums-genre-txt 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;
}
.notice {
  font-size: .95em;
  line-height: 1.5;
  color: #cc0000;
}
/* .drums-genre-txt h3 {
  text-align: center;
  font-size: 3.2em;
  font-weight: bold;
  margin-bottom:.3em;
}
.drums-genre-txt h3 span{
  font-size: .5em;
  font-weight: normal;
  display:block;
}

.drums-genre-box li{
  padding: 1.2em 0;
}
.drums-genre-box li img{
  display: block;
}
.drums-genre-box .inst_desc{
  background: #fff;
  padding:1em;
} */
@media (min-width:769px){
/* 
  .drums-genre-box{
    display: flex;
    justify-content: space-between;
  }
  .drums-genre-box li{
    width: 48%;
  } */
  .lesson_info_h2,
  .drums-genre-txt h2, .drums-type-wrap h2, .drums-option-wrap h2 {
    font-size: 2.2em;
  }

}/*  */



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

  .drums-type-box{
    display: flex;
    justify-content: space-between;
  }
  .drums-type-box li{
    width: 31.5%;
  }

}/*  */


/* drums-option-box ===============*/
.drums-option-wrap {
  background:#f6f6f6;
}
.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:#cc0000;  
}
.drums-option-txtbox {
  border:1px dotted #cc0000;
  background:#fff;
  padding:1.2em;
  position:relative;
}
.drums-option-ok {
  position:absolute;
  right: 1em;
  top: 1em;
  width:25%;
}
.drums-option-img {
  width: 80%;
}
.drums-option-txt {
  width:100%;
}
.drums-option-ttl {
  display: block;
  font-size: 2em;
  font-weight: bold;
  padding: .6em 0 .3em;
  color: #cc0000;
  text-align: center;
}
.drums-option-txt p {
  font-size: 1.1em;
}
.drums-option-txt .induct{
  font-size: .8em;
  margin-top: 1.5em;
}
@media (min-width:769px){

  .drums-option-box{
    display: flex;
    justify-content: space-between;
  }
  .drums-option-box li{
    width: 48%;
  }
  .drums-option-box.column3 li{
    width: 31.5%;
  }

  [data-inst="violin"] .drums-option-box li {
    width: 100%;
  }
  [data-inst="violin"] .drums-option-txtbox  {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-right: 14%;
  }
  [data-inst="violin"] .drums-option-ok {
    width: 15%;
  }
  [data-inst="violin"] .drums-option-img {
    width: 50%;
  }
  [data-inst="violin"] .drums-option-txt {
    width: 50%;
  }
  [data-inst="violin"] .drums-option-ttl{
    text-align: left;
    padding-top: 0;
  }

}/*  */


/* DRUM PARTS ========================== */
.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-ttl {
  text-align:center;
  font-size:1.8em;
  font-weight:bold;
  margin:0 0 1em;
}
.drums-parts-box {
  width:31%;
  border:2px solid #cc0000;
  background:#fff;
  padding:.7em;
  font-size:.9em;
  line-height:1.4;
  /* float:left; */
}
/* .drums-parts-wrap .parts-1{
  margin-right:5%;
}
.drums-parts-wrap .parts-2{
  margin-right:5%;
}
.drums-parts-wrap .parts-3{
  margin-right:0%;
}
.drums-parts-wrap .parts-4{
  margin-right:5%;  
}
.drums-parts-wrap .parts-5{
  margin-right:5%;
}
.drums-parts-wrap .parts-6{
  margin-right:0%; 
} */
.drums-parts-box h3{
  font-weight:bold;
  margin-bottom:.5em;
  color:#cc0000;  
}

@media (min-width:769px){

  .drums-parts-wrap {
    padding:2em 0;
    margin-bottom:3em;
    position:relative;
  }
  .drums-parts-ttl {
    font-size:2.4rem;
  }
  .drums-parts-box {
    width:21%;
    border:3px solid #cc0000;
    background-color:#fff;
    padding:1em;
    line-height:1.5;
    float:none;
    position:absolute;   
  }
  .drums-parts-wrap .parts-1{
    margin-right:0%;
    left:0;
    top:0;
  }
  .drums-parts-wrap .parts-2{
    margin-right:0%;
    left:0;
    top:32%;
  }
  .drums-parts-wrap .parts-3{
    margin-right:0%;
    right:0;
    top:0%;  
  }
  .drums-parts-wrap .parts-4{
    margin-right:0%;
    left:0;
    bottom:0%;  
  }
  .drums-parts-wrap .parts-5{
    margin-right:0%;
    right:0;
    bottom:0%; 
  }
  .drums-parts-wrap .parts-6{
    margin-right:0%;
    right:0;
    top:35%;    
  }
  /* .drums-parts-box h3{
    font-weight:bold;
    margin-bottom:.6em;
    font-size:1.8rem;  
  }   */

}/*  */


/* INST REASON ============================ */
.sec_reason{
  position: relative;
  border-top: dotted 1px #cc0000;
  margin-top: 5em;
  padding-top: 4em;
}
.sec_reason:last-child{
  padding-bottom: 4.5em;
  border-bottom: dotted 1px #cc0000;
}
.reason_ttl {
  margin:0 auto;
  display:block;
  width: 28em;
  margin: 1em auto;
}
.reason-head {
  position: absolute;
  left: 0;
  right: 0;
  top: -1.5em;
  display: block;
  text-align: center;
  margin: auto;
}
.reason-head .f-reason{
  position: relative;
  width: auto;
  height: auto;
  background-color: transparent;
  display: inline-block;
  top: inherit;
  border: none;
}
.reason-head .f-reason-txt {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 6em;
  width: 6em;
  vertical-align: top;
  border-radius: 50%;
  padding-top: .2em;
  background: #cc0000;
  color: #FFF;
  font-weight: 500;
}
.reason-head .pre {
  font-size: 1.2em;
  display: block;
  padding-top: 4px;
  line-height: 1;
}
.reason-head .num {
  display: block;
  font-size: 3em;
  line-height: 1.0;
}
/* .reason-head::after {
  content: "";
  height: 1px;
  width: 100%;
  display: block;
  border-bottom: dotted 1px #cc0000;
  top: 50%;
  left: 0;
  position: absolute;
  z-index: -1;
} */

.reason-sec-ttl {
  text-align: center;
  font-weight: bold;
  font-size: 2.3em;
  line-height: 1.4;
  padding: .3em 0 ;
  margin-bottom: .6em;
}
.gakki-top .sec-main .figure {
  margin-bottom: 1.5em;
}
.inst_desc {
  font-size: 1.15em;
  line-height: 1.7;
  padding: .3em 0;
  margin-bottom: 1em;
}
.inst_desc p{
  padding: .2em 0;
}

.f-link-bt {
  padding: 1em 0;
}

.reason_flex{
  display: flex;
  justify-content: space-between;
  padding: 1em 0;
}
.reason_flex_box{
  width: 47.5%;
}

@media (min-width:769px){

  .reason_ttl {
    width: 34em;
  }

}/*  */


/* PRICE TABLE =========================== */
.system-table {
  width: 100%;
  border-top: solid 1px #dddddd;
  border-left: solid 1px #dddddd;
  border-collapse: collapse;
  font-size: 1em;
  margin: 2em auto;
}
.system-table tr {
  border-bottom: solid 1px #dddddd;
  border-right: solid 1px #dddddd;
}
.system-table td,
.system-table th {
  border: solid 1px #ccc;
  padding: .8em;
  text-align: center;
  font-size: 1.3em;
}
.system-table thead {
  background:#f6f6f6; 
}
.system-table thead th {
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  padding: 1em .3em;
  border-right: solid 1px #dddddd;
}
.system-table thead th em{
  font-style: initial;
  font-size: 1.2em;
}
.system-table tbody th {
  text-align: center;
  padding:.6em .2em;
  font-size: 1.1em;
  border-right: solid 1px #dddddd;
}
.system-table tbody td {
  font-size: 1.25em;
  font-weight: 600;
  padding:.6em 0em;
  text-align: center;
  border-right: solid 1px #dddddd;
}
.system-table tbody .studio-td,
.system-table tbody .studio-th {
  color: #cc0000;
  font-weight: bold;
  border: solid 1px #ddd;
}
.system-table .course-price {
  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;
  width: fit-content;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: bold;
  background: #cc0000;
  color: #fff;
  padding: .3em .5em;
  margin: .2em auto 0;
  margin-left: .5em;
}

/* option_table */
.option_table{
  width: 100%;
  border-collapse: collapse;
  margin: 1em auto;
  font-size: 1.1em;
}
.option_table td, 
.option_table th {
  border: solid 1px #ccc;
  padding: .8em;
  text-align: center;
}
.option_table th {
  background-color: #f6f6f6;
}
.option_table thead th {
  font-weight: bold;
  line-height: 1.6;
  background: #f6f6f6;
}
.option_table thead th em{
  font-size: 1.2em;
  font-style: initial;
}

.reason-col .induct-btn ,
.sec-main-reason .induct-btn ,
.inst_pc_news_right .induct-btn {
  font-size: 1.3rem !important;
  font-weight: 600;
  padding: 1em 1.5em;
  background-color: #333;
  border: none;
  color: #fff;
  border-radius: 2.5em;
}
.reason-col .induct-btn:hover ,
.sec-main-reason .induct-btn:hover ,
.inst_pc_news_right .induct-btn:hover {
  background-color: #cc0000;
}
@media (min-width:769px){
  .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;
  }

}/*  */


/* NEWS / KNOWLEDGE =========================== */
.inst_news_sec {
  background: #f9f5ed;
  margin-top: 5em;
}
.inst_know_sec {
  background: var(--color-bg-grey);
}

[data-inst="ukulele"] .inst_news_sec{
  display: none;
}
[data-inst="ukulele"] .inst_know_sec{
  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-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: 0.2em;
}
.gakki-top .news-cat-pack {
  display: block;
  width: 100%;
  background-image: url(/assets/img/common/double-arw.png);
  background-position: 99% 50%;
  background-size: 1em 1em;
  padding: 0 2.5em 0 .5em;
}

@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%;
  }
}/*  */


/* guitar-top
------------------------------------------- */

/* GUITAR EQUIPMENT =================== */
.sec-guitar-intro .lead {
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.66;
  margin-bottom: 1em;
}

.sec-guitar-intro .inst-col {
  padding: 1em 0;
}
.sec-guitar-intro .inst-h-ttl {
  /* padding-top: 3em;
  padding-left: 25px;
  height: 182px; */
  padding: 2.5em 0 2.5em 1em;
  background: no-repeat top center transparent;
  background-size: cover;
}
.sec-guitar-intro .inst-h-ttl .en {
  font-size: 3.75rem;
  line-height: 1;
  display: block;
  margin-bottom: .1em;
}
.sec-guitar-intro .inst-h-ttl .ja {
  font-size: 1.4rem;
}
.sec-guitar-intro .catch {
  color: #FFF;
  font-size: 1.3rem;
  line-height: 1.55;
  text-align: center;
  font-weight: bold;
  padding: 1em 0;
}

.guitar-type-txt-box .row{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 2em;
}
.guitar-type-txt-box .content-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.guitar-type-txt-box .inst-intro-ttl {
  text-align: center;
  font-size: 1.6em;
  line-height: 1.55;
  font-weight: bold;
  margin-bottom: 1em;
}
.guitar-type-txt-box .img {
  width: 13%;
  aspect-ratio: 1 / 3;
}
.guitar-type-txt-box .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.guitar-type-txt-box .info {
  width: 80%;
}
.guitar-type-txt-box .info .inst-name {
  font-weight: bold;
  font-size: 1.4em;
  margin-bottom: .2em;
}
.guitar-type-txt-box .info .desc {
  line-height: 1.5;
}
.sec-guitar-intro .inst-intro {
  padding: 2em 1.5em ;
}

.elec .inst-h-ttl {
  color: #12B8B6;
  background-image: url(/assets/img/guitar/elec-header-bg.jpg);
}
.elec .inst-intro-ttl{
  color: #12B8B6;
}
.elec .inst-h-ttl,
.elec .catch {
  background-color: #12B8B6;
}
.elec .inst-intro {
  background-color: #F6F6F6;
}

.aco .inst-h-ttl {
  background-image: url(/assets/img/guitar/aco-header-bg.jpg);
}
.aco .inst-h-ttl,.aco .inst-intro-ttl {
  color: #603813;
}
.aco .catch {
  background-color: #603813;
}
.aco .inst-intro {
  background-color: #E5D9CF;
}

@media (min-width:769px){
  .content-wrapper-pc{
    display: flex;
    justify-content: space-between;
  }
  .sec-guitar-intro .inst-col{
    width: 48%;
  }

}/*  */


/* LESSON GENRE =================== */
.lesson_genre_block {
  background-color: #f6f6f6;
}

.lesson_genre_list li{
  margin-bottom:1em;
}
.lesson_genre_img{
  display: table;
  width: 100%;
  text-align: center;
  position:relative;  
}
.lesson_genre_inner{
  width: 100%;
  aspect-ratio: 1.8 / 1;
}
.lesson_genre_inner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
}
.lesson_genre_inner h3 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: fit-content;
  margin: auto;
  font-size: 3.2em;
  font-weight: bold;
  letter-spacing: .02em;
  text-align: center;
  padding: .5em;
  color: #fff;
  filter: drop-shadow(0 0 .3em black);
}
.lesson_genre_inner h3 span{
  display:block;
  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: 4%;
  }
  .lesson_genre_txt {
    flex: 1;
  }

  .lesson_genre_list.column3 li {
    width: 31.5%;
    margin-bottom: 1%;
  }
  .lesson_genre_list:not(:has(> li:nth-child(3))) li{
    margin-bottom: 0;
  }
}/*  */


/* BASS-top
------------------------------------------- */
/* .bass-type-wrap {
  padding: 1em 3% 0;
} */

.bass_type_block{
  margin: 2em 0;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}
.bass_type_block_inner{
  padding: 1.2em;
}
.bass_type_block h2 {
  font-size: 1.8em;
  text-align:center;
}
.bass_type_block h2 span{
  display: block;
  width: 100%;
  color:#fff;
  font-weight: bold; 
  line-height: 1.55;
  background-color:#cc0000;
  padding:.4em .7em;
}
.bass-type-desc {
  font-size: 1.2em;
  line-height: 1.55;
  margin-bottom: 2em;
}
.bass-type-box li{
  margin-bottom:1.5em;
}
.bass1-box{
  position:relative;
}
.bass2-box{
  position:relative;
}
.bass1-box img,.bass2-box img{
  width:90%;
  margin:0em auto 0em;
  display:block;  
}

.bass_type_block h3 {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: .3em;
}
.bass1-box h3,.bass2-box h3 {
  text-align:right; 
  font-size: 1.4em;
  margin-top:-1em;
  margin-bottom: .3em;
}
.bass-type-txt-box {
  font-size: 1.1em;
  line-height: 1.5;    
}
.bass-type-box2-clip img{
  width:70%;
  margin:-.5em auto 1em;
  display:block;  	
}


@media (min-width:769px){
  .bass_type_pc_flex{
    display: flex;
    justify-content: space-between;
  }
  .bass_type_block:first-child{
    width: 64%;
  }
  .bass_type_block:last-child{
    width: 33%;
  }
  .bass-type-box{
    display: flex;
    justify-content: space-between;
  }
  .bass-type-box li{
    width: 48%;
  }
  .bass-type-txt-box {
    font-size: 1em;
    margin-bottom: 0;
  }

}/*  */



/* LESSON TYPE
------------------------------------------- */
.lesson_type_box li{
  margin-bottom:1.5em;
  box-shadow: 0px 0 3px rgba(0,0,0,0.20);
}
.lesson_type_box h3 {
  padding:.4em .5em;
  font-size: 2.5rem;
  font-weight: bold;  
  color:#fff;
  text-align: center;
}
.lesson_type_box li:first-child h3 {
  background:#f78c00;
}
.lesson_type_box li:nth-child(2) h3 {
  background:#444;
}
.lesson_type_box li:nth-child(3) h3 {
  background:#00C7D5;
}
.lesson_type_box li:nth-child(4) h3 {
  background:#968879;
}
.lesson_type_box h3 span{
  font-size: 1.2rem;
  font-weight: bold;
  display:block;	
}
.lesson_type_box h3 .small2 {
  display: inline-block !important;
  font-size: .7em !important;
  line-height: 1;
}

.lesson_type_txt_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.8em 1em;
  line-height: 1.5;    
}
.lesson_type_txt_box + .lesson_type_txt_box{
  padding-top: .2em;
}
.lesson_type_ttl{
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.2em;
}
.lesson_type_txt_box p{
  width:58%;
  font-size: 0.95em;
}
.lesson_type_txt_box figure{
  width:38%;
  display:block;
}

[data-inst="flute"] .lesson_type_txt_box,
[data-inst="trumpet"] .lesson_type_txt_box,
[data-inst="trombone"] .lesson_type_txt_box{
  flex-direction: column-reverse;
  gap: .8em;
  padding-top: 1em;
}
[data-inst="flute"] .lesson_type_txt_box p,
[data-inst="flute"] .lesson_type_txt_box figure,
[data-inst="trumpet"] .lesson_type_txt_box p,
[data-inst="trumpet"] .lesson_type_txt_box figure,
[data-inst="trombone"] .lesson_type_txt_box p,
[data-inst="trombone"] .lesson_type_txt_box figure{
  width: 100%;
}
[data-inst="trombone"] .lesson_type_txt_box figure {
  width: 80%;
}

@media (min-width:769px){
  .lesson_type_box{
    display: flex;
    justify-content: space-between;
    padding-top: 0.5em;
  }
  .lesson_type_box li{
    width: 31.5%;
  }
  .lesson_type_box.column4{
    flex-wrap: wrap;
  }
  .lesson_type_box.column4 li{
    width: 48%;
  }

  .lesson_type_txt_box {
    font-size: 1em;
  }

  [data-inst="flute"] .lesson_type_box {
    justify-content: center;
    gap: 3em;
  }
  [data-inst="trumpet"] .lesson_type_txt_box {
    gap: 1.5em;
    padding-top: 2em;
  }
  .lesson_type_box.column4 li {
    width: 23.5%;
  }
}/*  */


/* lesson_type_bottom ======= */
.lesson_type_bottom{
  padding: 2em 0;
  max-width: 70em;
  margin: auto;
}
.lesson_type_bottom_ttl{
  font-size: 1.8em;
  padding: 0.2em 0;
  margin-bottom: 0.4em;
}
.lesson_type_sub{
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.lesson_type_desc{
  font-size: 1.1em;
  padding: .5em 0;
}
.lesson_type_bottom_img{
  margin-top: 1.5em;
}
@media (min-width:769px){
  .lesson_type_bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lesson_type_bottom_detail {
    width: 55%;
  }
  .lesson_type_bottom_img {
    width: 40%;
    aspect-ratio: 5 / 4;
    margin-top: 0;
  }
  .lesson_type_bottom_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}/*  */


/* SAX ABOUT ========================= */
.sax_know_block{
  border-bottom: dotted 1px #cc0000;
  padding: 1em 0 2.5em;
  margin-bottom: 2em;
}
.sax-about-box li {
  font-size: 1.3rem;
  line-height: 1.5;
  padding: .5em 0;
}
.sax-about-box li h2{
  width:80%;
  margin:0 auto 1em;
}
@media (min-width:769px){
  .sax-about-box{
    display: flex;
    justify-content: space-between;
  }
  .sax-about-box li{
    width: 48%;
  }

}/*  */


/* SAX PARTS ========================= */
.sax-parts-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.sax-parts-ttl {
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}
.sax-parts-txt {
 width:50%;
}
.sax-parts-img {
 padding-top:15%;
 width:50%;
}
.sax-parts-box {
  border:2px solid #cc0000;
  background:#fff;
  padding:.7em;
  font-size:.95em;
  line-height:1.3;
  margin-bottom:.5em;
}
.sax-parts-box h3{
  font-size: 1.2em;
  font-weight:bold;
  margin-bottom:.3em;
  color:#cc0000;  
}

@media (min-width:769px){
  .sax-parts-img {
    display: block;
    padding-top: 0;
    width: 40%;
    margin: auto;
  }
  .sax-parts-txt{
    width: 0%;
  }
  .sax-parts-box{
    position: absolute;
    width: 32%;
    font-size: 1.1em;
  }
  .sax-parts-txt .parts-2{
    top: 35%;
  }
  .sax-parts-txt .parts-3{
    right: 0;
  }
  .sax-parts-txt .parts-4{
    right: 0;
    top: 35%;
  }
  .sax-parts-txt .parts-5{
    bottom: 0;
  }
  .sax_know_block {
    padding: 3.5em 0;
  }

}/*  */


/* FLUTE PARTS =================-*/
.flute-parts-box {
  border:2px solid #cc0000;
  background:#fff;
  padding:.7em;
  font-size:1.1rem;
  line-height:1.4;
}
.flute-parts-box h3{
  font-size: 1.1em;
  font-weight:bold;
  margin-bottom:.3em;
  color:#cc0000;  
}
.flute-parts-head{
  position:relative;
  width:100%;	
}
.flute-parts-img{
  position: relative;
}
.flute-parts-caption{
  position:absolute;
  top:8%;
  right:5%;
  display: flex;
  justify-content: space-between;
  width:85%;
}
.flute-parts-caption h3{
  font-size: 1.1em;
  text-align:center;
  color:#000;    
}

.flute-parts-foot{
  display: flex;
  justify-content: space-between;
}
.flute-parts-wrap .parts-5,
.flute-parts-wrap .parts-6,
.flute-parts-wrap .parts-7{
  width:31%;		
}
@media (min-width:769px){

  .flute-parts-caption {
    top: 19%;
    right: 8%;
    width: 79%;
  }

}/*  */

/* TRUNMPET PARTS =================-*/
.trumpet-parts-ttl {
  text-align:center;
  font-size:1.8rem;
  font-weight:bold;
  margin:0 0 1em;
  display:block;  
}
.trumpet-parts-box {
  border:2px solid #cc0000;
  background:#fff;
  padding:.7em;
  font-size:1rem;
  line-height:1.4;
}
.trumpet-parts-box h3{
  font-size:1.1em;
  font-weight:bold;
  margin-bottom:.5em;
  color:#cc0000;  
}

.trumpet-parts-head {
  position:relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.trumpet-parts-wrap .parts-1{
  width:60%;	
}
.trumpet-parts-wrap .parts-2{
  width:35%;
}

.trumpet-parts-foot{
  display: flex;
  justify-content: space-between;
}
.trumpet-parts-wrap .parts-3{
  width:32%;	
}
.trumpet-parts-wrap .parts-4{
  width:32%;	
}
.trumpet-parts-wrap .parts-5{
  width:32%;		
}

/* trombone PARTS =================-*/
.trombone-parts-ttl {
  text-align:center;
  font-size:1.8rem;
  font-weight:bold;
  margin:0 0 1em;
  display:block;  
}
.trombone-parts-box {
  border:2px solid #cc0000;
  background:#fff;
  padding:.7em;
  font-size:1rem;
  line-height:1.4;
}
.trombone-parts-box h3{
  font-weight:bold;
  margin-bottom:.5em;
  color:#cc0000;  
}
.trombone-parts-head {
  position:relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.trombone-parts-wrap .parts-1{
  width:45%;	
}
.trombone-parts-wrap .parts-2{
  width:45%;	
}

.trombone-parts-foot {
  position:relative;
  display: flex;
  justify-content: space-between;
}
.trombone-parts-wrap .parts-3{
  width:35%;	
}
.trombone-parts-wrap .parts-4{
  width:30%;	
}
.trombone-parts-wrap .parts-5{
  width:30%;		
}


/* VIOLIN-top
------------------------------------------- */
.violin_lesson_pc_flex .inst_desc{
  font-size: 1.2em;
}
@media (min-width:769px){
  .violin_lesson_pc_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .violin_lesson_pc_flex .inst_desc{
    width: 74%;
    font-size: 1.4em;
  }
  .violin_lesson_pc_flex figure{
    width: 20%;
  }
}


/* Dj-top
------------------------------------------- */
[data-inst="dj"] #reason5,
[data-inst="dj"] #reason6{
  display: none;
}
[data-inst="dj"] .inst_kv_wrap{
  margin-bottom: 0;
  background-color: #000;
}
[data-inst="dj"] .inst_kv_ttl,
[data-inst="dtm"] .inst_kv_ttl{
  color: #fff;
}

[data-inst="dj"] .breadcrumb{
  background-color: #000;
  color: #fff;
  padding-bottom: 4.5em;
  margin-bottom: 0;
}
[data-inst="dj"] .inst_intro_block{
  background-color: #000;
  color: #fff;
}

/* DJ LESSON INFO ============================== */
[data-inst="dj"] .lesson-genre-wrap .n-sec-ttl {
  margin-bottom: 0;
}
[data-inst="dj"] .lesson-genre-wrap .n-sec-ttl .ja{
  color: #fff;
}
[data-inst="dj"] .lesson-genre-wrap .n-sec-ttl:after{
  content: none;
}
[data-inst="dj"] .lesson-genre-wrap{
  background-color: #000;
  color: #fff;
  margin-bottom: 1em;
}

.dj-play-wrap {
  /* background-image: url(/assets/img/dj/dj-bk-ph_sp.jpg) ; */
  background-image: url(/assets/img/dj/dj-bk-ph2.jpg);
  background-position: center 14em; 
  background-size:100% auto;
  margin-top: 3.5em;
  margin-bottom:0;
 }
 .dj-trackmaking-wrap {
  background-image: url(/assets/img/dj/dj-bk-ph3.png);
  background-position: center 22em;
  background-size: contain;
  margin-top: 3.5em;
}
.dj_top_ttl {
  position: relative;
  text-align:center;
  margin-top:-.9em;
  margin-bottom: 2em;  
  z-index: 5;
}
.dj_top_ttl span{
  background-color:#000;
  border:1px solid #cc0000;
  padding: .6em .8em;
  border-radius: 2em;  
  font-size:2.0rem;
  font-weight:bold;
}
.dj_top_ttl::before {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #cc0000;
  z-index: -1;
}
.dj-play-desc {
  font-size:1.2em;
  line-height:1.8;
}
.dj_play_wrap_ttl{
  text-align:center;
  font-size:1.8em;
  font-weight:bold;
  margin-bottom:1.2em;
}

.dj-play-desc + .dj_play_wrap_ttl{
  margin-top: 6em;
}
.dj_eq_box{
  padding: 2em 0;
  border-top: 1px dotted #fff;
}
.dj_eq_box:last-of-type{
  border-bottom: 1px dotted #fff;
  margin-bottom: 3em;
}
.dj_eq_box_ttl{
  font-size:1.5em; 
  font-weight:bold;
  display:block;
  padding:.7em 0;
  text-align: center;
}
.dj_eq_box_desc{
  font-size:1.2em;
  line-height:1.7;
}

.dj_tt_list {
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding:1em 0;
  gap: 1.5em 1em;
}
._track .dj_tt_list{
  margin-top: 6em;
}
.dj_tt_list li{
  width:48%;
}
.dj_tt_ttl {
  font-size: 1.1em !important;
  text-align: center;
}
._turntable .dj_tt_ttl,
._pcdj .dj_tt_ttl,
._track .dj_tt_ttl{
  margin-top: -1em;
}
.dj_tt_desc{
  font-size: 1em;
  margin-top: 0.2em;
}

@media (min-width:769px){
  .dj-play-wrap {
    /* background-image: url(/assets/img/dj/dj-bk-ph_pc.jpg); */
    background-image: url(/assets/img/dj/dj-bk-ph2_pc.png);
    background-position: center -8em;
  }
  .dj-trackmaking-wrap {
    background-image: url(/assets/img/dj/dj-bk-ph3_pc.png);
    background-position: center -12em;
  }
  .dj_eq_box {
    font-size: 1.2em;
  }
  .dj_eq_box_desc {
    font-size: 1em;
    text-align: center;
  }
  .dj_tt_list {
    justify-content: center;
    gap: 1.5em 5em;
  }
  .dj_tt_list._cdj {
    gap: 1.5em 0em;
}
  .dj_tt_list li {
    width: 32%;
  }
}


/* DTM-top
------------------------------------------- */
[data-inst="dtm"] #reason4,
[data-inst="dtm"] #reason5,
[data-inst="dtm"] #reason6{
  display: none;
}


/* 楽器トップページ スタジオリスト */
.gakki_top_studio_sec .n-studio-box ,
.gakki_top_studio_sec .n-studio-box.ikejiri._set{
  opacity: .3;
  filter: grayscale(1);
  pointer-events: none;
}
.gakki_top_studio_sec .n-studio-box._set {
  filter: none;
  opacity: 1;
  pointer-events: visible;
}