@charset "utf-8";
/*
Theme Name: ABCMusic_PianoBLOG
Description: 
Author: COSMICGEAR
Version: 1.0
*/
:root {
  --clr_gtr:#1E73BE;
  --clr_dtm:#2CDB6E;
  --clr_bass:#258c6d;
  --clr_dr:#1BB4D3;
  --clr_vo:#b92e34;
  --clr_piano:#91A9BF;
  
  --base-fnt: helvetica-neue-lt-pro, "noto-sans-cjk-jp", sans-serif;
  --fnt-ave: "avenir-lt-pro", var(--base-fnt);
  --fnt-qua:"Quantico", var(--base-fnt);

  --clr-main:var(--clr_piano);
  --clr-base:#1a1a1a;
  --clr-org:#F8A246;
  --link-clr:var(--clr-main);
  
  --head2:min(30px,calc(100vw/18));
  --head2_min:min(24px,calc(100vw/22));
  
  --wall-gray:#F3F3F3;
  --wall-d-gray:#666666;
  --hvr_ylw:rgba(242,255,0,.85);
  --bdr-gray:#D9D9D9;
  --pd_var: min(80px,15vw);
  --pd_hz:min(50px,4vw);
  --pd-sec_var:min(50px,10vw);
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .3s var(--easing);
}
/*base=====*/
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: var(--base-fnt);
  font-size: min(3.4vw, 14px);
  color: var(--clr-base);
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-weight: 400;
  transition:opacity .6s var(--easing);
  opacity: 0;
}
body.is-load{
  opacity: 1;
}
.fnt-ave {
  font-family: var(--fnt-ave);
}
.fnt-qua {
  font-family: var(--fnt-qua);
}
.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl.jc_c {
  justify-content: center;
}
.fl_c {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.fl_c.ai_c {
  -ms-align-items: center;
  align-items: center;
}

.fw_b{
  font-weight: 700;
}
.fs_min{
  font-size: .85em;
}
figure {
  margin-bottom: 0 !important;
}
/*container
========================================================*/
#container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
a.cvr {
  position: absolute;
  inset:0;
  z-index: 1;
}

/*hum
=====================================*/
#hum-button {
  position: fixed;
  top: 0;
  right: 0;
  width: min(80px,16vw);
  aspect-ratio: 1;
  z-index: calc(infinity);
  cursor: pointer;
  display: none;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  background-color: rgba(30,115,190,.25);
}
#hum-button button {
  width: 60%;
  height: 2px;
  background-color: var(--clr-main);
  position: relative;
  transition: rotate var(--transit);
}
#hum-button button::before, #hum-button button::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  background-color: var(--clr-main);
  transition: rotate var(--transit);
  transform-origin: center;
}
#hum-button button::before {
  top: -10px;
}
#hum-button button::after {
  bottom: -10px;
}
#hum-button.open button {
  rotate:45deg;
}
#hum-button.open button::before, #hum-button.open button::after {
  top: 0;
  bottom: auto;
}
#hum-button.open button::before
,#hum-button.open button::after {
  rotate:-90deg;
}
#l-nav {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all var(--transit);
  -o-transition: all var(--transit);
  transition: all var(--transit);
  overflow-y: scroll;
 background-color: #fff;
}
#l-nav.is-view {
  opacity: 1;
  visibility: visible;
}
.l-nav_inner {
  width: 100%;
  min-height: 100%;
  padding: calc(var(--head-h) + min(50px,12vw)) min(35px,5vw) min(50px,12vw);
  display: grid;
  grid-template-columns: min(700px,100%);
  justify-content: center;
  align-content: flex-start;
  gap:min(40px,10vw);
  background-color: rgba(30,115,190,.25);
}
.l-nav__menu > li{
  border-bottom: 1px solid var(--wall-gray);
}
.l-nav__menu > li:nth-child(n+2){
  margin-top: 10px;
 
}
.l-nav__menu > li a{
  display: flex;
  justify-content: space-between;
  -ms-align-items: flex-end;
  align-items: flex-end;
  padding-bottom: 1em;
  padding-top: .5em;
}
.l-nav__menu > li a .ja{
  font-size: min(18px,4vw);
  font-weight: 500;
}
.l-nav__menu > li a .en{
  font-family: var(--fnt-qua);
  opacity: .5;
  font-size: .85em;
}
.l-nav__links{
  display: flex;
  flex-direction: column;
  gap:min(30px,7vw);
}
#l-nav .sns-links{
  grid-template-columns: repeat(3, min(30px, 7vw));
}
/*header
=====================================*/
header {
  width: 100%;
  overflow: hidden;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  transition:translate var(--transit);
  background-color: rgba(255,255,255,1);
  box-shadow: 0 6px 10px rgba(0,0,0,.05);
}
header.nav-open{
  box-shadow: 0 6px 10px rgba(0,0,0,0);
}
.head-inner{
  padding-left: min(30px,4vw);
  display: flex;
  gap:min(20px,3vw);
  height: min(80px,16vw);
  -ms-align-items: center;
  align-items: center;
}

.head_logo{
  width: min(250px,45vw);
}
.head_nav{
  flex: 1;
  justify-content: flex-end;
  -ms-align-items: center;
  align-items: center;
  gap:min(15px,3vw);
  padding-top: min(15px,3vw);
  padding-bottom: min(15px,3vw);
}
.gnav{
  font-weight: 500;
  gap:1em;
}
.head_button a{
  background-color: var(--clr-org);
  border-radius: 100vmax;
  display: grid;
  grid-template-columns: min(30px,10vw) auto;
  -ms-align-items: center;
  align-items: center;
  padding: 5px 1em 5px 5px;
  gap:8px;
  font-weight: 600;
  color: #fff;
}
.head_button a span.icon{
  aspect-ratio:1;
  background-color: #fff;
  border-radius: 100vmax;
  display: grid;
  grid-template-columns: 60%;
  place-content:center;
}
.search-button {
  width: min(80px,16vw);
  aspect-ratio:1;
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-main);
  color: #fff;
  gap:6px;
  margin-left: auto;
}
.search-button .icon{
  width: min(24px,33%);
  aspect-ratio:1;
  mask:url('images/icon/search.svg') no-repeat center/contain;
  -webkit-mask:url('images/icon/search.svg') no-repeat center/contain;
  background-color: currentColor;
}
.search-button .text{
  font-family: var(--fnt-qua);
  font-weight: 700;
  font-size: min(12px,3vw);
}

/*modal search*/

.mdl-search_wrap{
  display: grid;
  place-content:center;
  -ms-align-items: center;
  grid-template-columns: min(540px,100%);
}
.search_form{
  display: flex;
  flex-direction: column;
  gap:min(20px,5vw);
}
.inp-search{
  display: flex;
  flex-direction: column;
  gap:8px;
}
.inp-search .label{
  color: #fff;
}
.inp-search input{
  height: min(46px,15vw);
  padding: 5px min(25px,6vw) 5px 10px;
  font-size: 16px;
  border: 3px solid rgba(51, 51, 51, 0.1);
}
.search-icon{
  position: absolute;
  right: 10px;
  bottom: 0;
  width: min(20px,5vw);
  height: min(46px,15vw);
}
/*main
=====================================*/
main {
  flex: 1;
  padding-top: var(--head-h);
}
.inner {
  width: min(1340px, 100%);
  margin-inline:auto;
  padding-left: var(--pd_hz);
  padding-right: var(--pd_hz);
}

/*#hero
============================*/
.index-hero{
  padding: min(60px,15vw) min(50px,4vw);
  background-image: url("images/hero.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(20px,4vw);
}
.index-hero_title{
  font-family: var(--fnt-ave);
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:5px;
}
.index-hero_title .sub{
  font-weight: 500;
  font-size: min(45px,calc(100vw/15));
}
.index-hero_title .main{
  font-weight: 900;
  font-size: min(130px,calc(100vw/7));
}
.index-hero_desc{
  width: min(760px,100%);
  font-size:min(20px,3.7vw);
  font-weight: 400;
  line-height: calc(40/20);
  
}

/*#index content 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.index-contents {
  display: flex;
  flex-direction: column;
}
.lead-text{
  font-kerning: none;
  line-height: calc(24/14);
}
.lead-text.cnt
,.in-text.cnt{
  text-align: center;
}
/*title settings*/
.sec-title{
  display: flex;
  -ms-align-items: flex-end;
  align-items: flex-end;
  font-weight: 600;
  border-bottom: 5px solid;
  padding-bottom: 5px;
  flex-wrap: wrap;
}
.sec-title.clm{
  padding-bottom: 0;
  border-bottom: none;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap:10px;
}
.sec-title.clm .ja{
  font-size: var(--head2);
  margin-left: inherit;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: calc(40/30);
}
.sec-title .en{
  font-family: var(--fnt-qua);
  font-size: min(20px,4.2vw);
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap:.5em;
}
.sec-title .ja{
  margin-left: auto;
}
.sec-title.l-cnt{
  -ms-align-items: center;
  align-items: center;
  text-align: center;
}
.tri_wrap{
  display: flex;
  gap:3px;
  -ms-align-items: center;
  align-items: center;
}
.tri_wrap > span{
  width: .35em;
  aspect-ratio:1/1.2;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color: currentColor;
/*  opacity: 0;*/
  animation: 2.5s var(--easing) infinite;
}
.tri_wrap.inv > span{
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.tri_wrap > span:nth-child(1) { animation-name: scrollTri1; }
.tri_wrap > span:nth-child(2) { animation-name: scrollTri2; }
.tri_wrap > span:nth-child(3) { animation-name: scrollTri3; }

.tri_wrap.inv > span:nth-child(1) { animation-name: scrollTri_inv3; }
.tri_wrap.inv > span:nth-child(2) { animation-name: scrollTri_inv2; }
.tri_wrap.inv > span:nth-child(3) { animation-name: scrollTri_inv1; }
@keyframes scrollTri1 {
  0%, 4%    { opacity: 0; transform: translateX(-45%); }
  18%, 72%  { opacity: 1; transform: translateX(0); }
  86%, 100% { opacity: 0; transform: translateX(25%); }
}
@keyframes scrollTri2 {
  0%, 18%   { opacity: 0; transform: translateX(-45%); }
  32%, 72%  { opacity: 1; transform: translateX(0); }
  86%, 100% { opacity: 0; transform: translateX(25%); }
}
@keyframes scrollTri3 {
  0%, 32%   { opacity: 0; transform: translateX(-45%); }
  46%, 72%  { opacity: 1; transform: translateX(0); }
  86%, 100% { opacity: 0; transform: translateX(25%); }
}
@keyframes scrollTri_inv1 {
  0%, 4%    { opacity: 0; transform: translateX(45%); }
  18%, 72%  { opacity: 1; transform: translateX(0); }
  86%, 100% { opacity: 0; transform: translateX(-25%); }
}
@keyframes scrollTri_inv2 {
  0%, 18%   { opacity: 0; transform: translateX(45%); }
  32%, 72%  { opacity: 1; transform: translateX(0); }
  86%, 100% { opacity: 0; transform: translateX(-25%); }
}
@keyframes scrollTri_inv3 {
  0%, 32%   { opacity: 0; transform: translateX(45%); }
  46%, 72%  { opacity: 1; transform: translateX(0); }
  86%, 100% { opacity: 0; transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
  .tri_wrap > span { animation: none; opacity: 1; }
}
.arrow-title{
  display: flex;
}
.arrow-title span{
  min-width: 8.5em;
  background-color: var(--clr-base);
  font-family: var(--fnt-qua);
  color: #fff;
  font-weight: 600;
  padding: 8px 2.5em 8px 1em;
  clip-path: polygon(0% 0%, calc(100% - 1.25em) 0%, 100% 50%, calc(100% - 1.25em) 100%, 0% 100%);
}
.arrow-title.w_auto span{
  min-width: inherit;
}
.round-title{
  width: min(120px,22vw);
  aspect-ratio:1;
  background-color: var(--clr-base);
  border-radius: 100vmax;
  overflow: hidden;
  display: grid;
  grid-template-columns: 100%;
  place-content:center;
  place-items:center;
  position: absolute;
  z-index: 2;
}
.round-title::after{
  content: "";
  width: 98%;
  aspect-ratio:1;
  background-image: url("images/icon/round-text.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  translate:-50% -50%;
  background-color: var(--clr-base);
  animation: round-title-spin 20s linear infinite;
}
@keyframes round-title-spin{
  from{ rotate: 0deg; }
  to  { rotate: 360deg; }
}
.round-title h2{
  width: calc(100% - 1.5em);
  aspect-ratio:1;
  border-radius: 100vmax;
  background-color: #fff;
  display: grid;
  place-content:center;
  text-align: center;
  font-family: var(--fnt-qua);
  font-weight: 600;
  font-size: min(17px,3.2vw);
  z-index: 1;
}
.round-title.lf{
  left: 0;
  top: 0;
  translate:-20% -40%;
}
.round-title.cnt{
  top: 0;
  left: 50%;
  translate:-50% -50%;
}
.box-title{
  font-size: min(20px,3.8vw);
  line-height: calc(28/20);
}
.u-center{
  text-align: center;
  font-weight: 700;
}
/*slider settings +++++++*/
#pickup-slider{
  overflow: hidden;
}
#pickup-slider .swiper-slide{
  height: auto;
}
.pickup-pagination{
  bottom: 0!important;
  display: flex;
  justify-content: center;
  margin-top: min(30px,7vw);
  gap:10px;
}
.pickup-pagination span{
  margin: 0!important;
}
.swiper-pagination-bullet{
  opacity: 1!important;
  background-color: rgba(0,0,0,.2)!important;
}
.swiper-pagination-bullet-active{
  background-color: var(--clr-main)!important;
}

/*archive-item*/

.acv-post-item{
  border: 1px solid var(--bdr-gray);
}
.acv-post_wrap{
  padding: min(30px,4vw) min(25px,3vw);;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap:min(20px,4vw);
  transition:background var(--transit);
}
@media(hover){
  .acv-post-item:hover .acv-post_wrap{
    background-color: var(--hvr_ylw);
  }
}
.post-cate{
  display: flex;
  justify-content: center;
  z-index: 1;
}
.post-cate span{
  background-color: var(--clr-base);
  color: #fff;
  font-size: min(12px,3.2vw);
  letter-spacing: .06em;
  border-radius: 100vmax;
  padding: 4px 1.5em;
}
.post-thumb{
  position: relative;
}
.post-thumb figure{
  width: 100%;
  aspect-ratio:1/0.6329;
  background-color: var(--wall-gray);
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  will-change: transform;
}
.post-thumb figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4,.3,.25,1);
}
.acv-post-item:hover .post-thumb figure img{
  transform: scale(1.06);
}
/* 引き寄せの基準点（サムネイル中央） */
.post-thumb .-pvt{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.post-data{
  display: flex;
  flex-direction: column;
  gap:10px;
  flex: 1;
}
.post-date p{
  padding-left: 1.8em;
  font-family: var(--fnt-qua);
  font-weight: 600;
  font-size: min(12px,3.2vw);
}
.post-date p::before{
  content: "";
  width: 1.15em;
  aspect-ratio:1/1.0714;
  background-image: url("images/icon/calendar.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: 0;
/*  translate:0 -50%;*/
}
.post-title{
  font-weight: 600;
  font-size: min(16px,3.7vw);
  line-height: calc(20/16);
}
.post-excerpt{
  font-size: min(12px,3.4vw);
  line-height: calc(18/12);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--excerpt-lines, 4);
  line-clamp: var(--excerpt-lines, 4);
  overflow: hidden;
}
.tag-list{
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size:min(10px, 2.5vw);
  gap:4px;
}
.tag-list > li{
  display: grid;
  place-content:center;
  border: 1px solid;
  border-radius: 3px;
  background-color: #fff;
}
.tag-list > li span{
  padding: 3px 6px;
}
/*sec pickup*/
.sec-pickup-blc{
  background-color: var(--wall-gray);
  padding-top: min(80px,15vw);
  padding-bottom: min(60px,14vw);
}
.acv-pickup-list{
  margin-top:min(25px, 6vw);
}

/*index archive list*/
.index-archive-blc{
  padding-top: var(--pd_var);
  padding-bottom: var(--pd_var);
  display: flex;
  flex-direction: column;
  gap:min(50px,12vw);
}
.index-archive-list{
  display: flex;
  flex-direction: column;
  gap:min(25px, 6vw);
}
.archive-post-list{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:10px;
}
.post-archive_links{
  display: flex;
  flex-direction: column;
/*  gap:min(50px,10vw);*/
  gap:min(25px, 6vw);
}
.category-list_wrap{
  display: grid;
  grid-template-columns: auto 1fr;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap:10px min(20px,5vw);
}
.category-list_wrap .button-wrap{
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
}
button.viewmore{
  width: auto;
  border: 1px solid var(--bdr-gray);
  display: flex;
  padding: 5px 12px 5px 10px;
  border-radius: 3px;
}
button.viewmore span{
  font-size: min(12px,3vw);
  padding-right: 1em;
  font-family: var(--fnt-qua);
}
button.viewmore span::before
,button.viewmore span::after{
  content: "";
  width: 1px;
  height: .8em;
  background-color: currentColor;
  position: absolute;
  right: 0;
  top: 50%;
  translate:0 -50%;
  transition:rotate var(--transit);
}
button.viewmore span::after{
  rotate:90deg;
}
button.viewmore.is-open span::before{
  rotate:90deg;
}
.category-list_wrap.clm{
  grid-template-columns: auto;
  gap:min(15px,4vw);
}
.category-list{
  display: flex;
  flex-direction: column;
  gap:10px;
  padding-top: 5px;
}
.yearly-list{
  padding-top: 5px;
}
.category-list > li
,.yearly-list > li{
  display: flex;
  flex-wrap: wrap;
  -ms-align-items: center;
  align-items: center;
  gap:10px;
}
.category-list > li a
,.yearly-list > li a{
  padding: 5px 10px;
  background-color: var(--wall-gray);
  display: grid;
  place-content:center;
  font-size: min(12px,3vw);
}
.category-list > li a.is-current
,.yearly-list > li a.is-current{
  background-color: var(--clr-main);
  color: #fff;
}
.category-list > li.parent-cat span::before{
  content: '\f114';
  font-family: "fontawesome";
  margin-right: 0.3em;
  display: inline-block;
}
.category-list > li:nth-child(n+2){
  margin-top: 10px;
}
#js-hide_tags{
  --tag-rows: 3;
  max-height: calc(var(--tag-rows) * (1lh + 10px) + (var(--tag-rows) - 1) * 10px);
  overflow: hidden;
}
.wp-pagenavi
,.nav-links{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  gap:10px;
}
.acv-pager a
,.acv-pager span
,.nav-links a
,.nav-links span{
  font-size: min(12px,3vw);
  width: min(30px,7.5vw);
  aspect-ratio:1;
  border: 1px solid var(--bdr-gray);
  display: grid;
  place-content:center;
  place-items:center;
  background-color: #fff;
  padding-left: .5em;
  padding-right: .5em;
  font-family: var(--fnt-qua);
  white-space: nowrap;
}

.acv-pager .previouspostslink::before
,.acv-pager .nextpostslink::before
,.nav-links .next::before
,.nav-links .prev::before{
  content: "";
  width: 5px;
  aspect-ratio:1/1;
  border: 1px solid;
  border-color:currentColor currentColor transparent transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  translate:-50% -50%;
  rotate:45deg;
}
.acv-pager .previouspostslink::before
,.nav-links .prev::before{
  scale:-1 -1;
  left: calc(50% + .5px);
}

.wp-pagenavi a:hover
, .wp-pagenavi span.current
,.nav-links span.current
,.nav-links a:hover{
  background-color: var(--clr-main);
  color: #fff;
  border-color: var(--clr-main);
}

/*sec media*/
.sec-media-blc{
  padding-top: var(--pd-sec_var);
  padding-bottom: var(--pd-sec_var);
  background-color: var(--wall-gray);
}
.sec-media-box{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(30px,7vw);
}
.media-list{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:2px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.media-list > li:not(.youtube){
  display: grid;
  place-content:center;
  place-items:center;
  aspect-ratio:1/0.8764;
  gap:min(25px,5vw);
  background-color: #666;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: var(--wall_img);
  padding: 10px;
}
.media-list > li.guitar{
  --wall_img:url("images/media/guitar.webp");
  --btn_clr:var(--clr_gtr);
}
.media-list > li.dtm{
  --wall_img:url("images/media/dtm.webp");
  --btn_clr:var(--clr_dtm);
}
.media-list > li.drum{
  --wall_img:url("images/media/drum.webp");
  --btn_clr:var(--clr_dr);
}
.media-list > li.bass{
  --wall_img:url("images/media/bass.webp");
   --btn_clr:var(--clr_bass);
}
.media-list > li.vocal{
  --wall_img:url("images/media/vocal.webp");
  --btn_clr:var(--clr_vo);
}
.media-list > li.piano{
  --wall_img:url("images/media/piano.webp");
  --btn_clr:var(--clr_piano);
}
.media-title{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(15px,3vw);
  font-family: var(--fnt-ave);
}
.media-title .title{
  font-weight: 700;
  font-size: min(21px,4.5vw);
  text-align: center;
  line-height: calc(30/21);
}
.media-title .tag{
  background-color: #fff;
  border-radius: 100vmax;
  color: var(--clr-base);
  padding: 4px 10px 3px;
}
.arrow-button{
  font-family: var(--fnt-qua);
  font-weight: 600;
  display: flex;
  justify-content: center;
}
.arrow-button > *{
  background: var(--btn_clr);
  display: grid;
  place-content:center;
  padding: 3px .5em 2px 1.5em;
  height: min(30px,10vw);
  border-radius: 100vmax;
  font-size: min(13px,3.4vw);
}
.arrow-button > * span{
  padding-right: 2em;
}
.arrow-button > * span::after{
  content: "";
  mask:url( "images/icon/arrow.svg") no-repeat center/cover;
  -webkit-mask:url( "images/icon/arrow.svg") no-repeat center/cover;
  background-color: currentColor;
  position: absolute;
  width: 1.17em;
  aspect-ratio:1;
  right: 0;
  top: 50%;
  translate:0 -50%;
  transition:translate var(--transit);
}
@media(hover){
  .hvr_par:hover .arrow-button > * span::after
  ,.arrow-button:hover > a span::after{
    translate:15% -65%;
  }
}
.media_youtube{
  background-color: var(--clr-base);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 1px, transparent 1px, transparent 5.5px);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding: min(15px,4vw);
  display: grid;
  grid-template-columns: auto 1fr;
  gap:min(20px,4vw);
  grid-column: span 3;
}
.yt_banner{
  color: var(--clr-base);
  background-color: #fff;
  padding: min(15px,3vw) min(20px,4vw);
  border-radius: 5px;
  display: grid;
  place-content:center;
  place-items:center;
/*
  grid-template-columns: min(75px,15%) auto;
  align-items: center;
  justify-content: center;
*/
  gap:10px;
}
/*
.yt_banner .comment{
  display: flex;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap:5px;
}
*/
.yt_banner .tag{
  background-color: var(--clr-base);
  color: #fff;
  font-weight: 600;
  padding: 5px 10px;
}
.yt_banner .ch_title{
/*  font-size: min(24px,calc(100vw/21));*/
  font-size: clamp(18px,4cqw,20px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  padding-left: 1.85em;
}
.yt_banner .ch_title::before{
  content: "";
  width: 1.5em;
  aspect-ratio:1;
  background: url("images/icon/youtube_ccl.svg") no-repeat center/contain;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
}
.yt-subscribers{
/*  font-size: min(16px,3.7vw);*/
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap:3px;
}
.yt_txt{
  padding-left: 1.5em;
}
.yt_txt::before{
  content: "";
  width: 1.14em;
  aspect-ratio:1/0.9259;
  background-image: url("images/icon/user.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: 0;
}
.yt-subs{
  --yt-num: min(5vw, 28px);
}
.yt-subs__num{
  font-family: var(--fnt-qua);
  font-size: var(--yt-num);
}
.yt_description{
  display: flex;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
  justify-content: center;
  gap:min(15px,4vw);
}
.yt_description .lead-text{
  line-height: calc(20/14);
  font-size: min(14px,3.2vw);
}
.yt_button{
  background-color: #C50A0B;
  border-radius: 100vmax;
  font-weight: 700;
  margin-left: auto;
}
.yt_button a{
  min-height: min(32px,7vw);
  display: grid;
  place-items:center;
  padding-left: min(10px,2vw);
  padding-right: min(15px,2.5vw);
}
.yt_button a span{
  padding-left: 2.5em;
  padding-right: 1em;
}
.yt_button a span::before
,.yt_button a span::after{
  content: "";
  position: absolute;
  top: 50%;
  translate:0 -50%;
}
.yt_button a span::before{
  width: 2em;
  aspect-ratio:1;
  background-image: url("images/icon/youtube_ccl.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  left: 0;
}
.yt_button a span::after{
  width: .45em;
  aspect-ratio:1;
  border-radius: 1px;
  border: 1.5px solid;
  border-color: currentColor currentColor transparent transparent;
  right: 0;
  rotate:45deg;
  transition:translate var(--transit);
}
@media(hover){
  .yt_button:hover a span::after{
    translate:50% -50%;
  }
}
.round-button{
  display: grid;
  grid-template-columns: min(240px,100%);
  justify-content: center;
}
.round-button a{
  display: grid;
  place-content:center;
  height: min(50px,12vw);
  background-color: var(--clr-main);
  color: #fff;
  font-weight: 600;
  border-radius: 100vmax;
}
/*sec lesson*/
.sec-lesson-blc{
  padding-top: calc(var(--pd_var)*0.75);
  padding-bottom: var(--pd_var);
  padding-left: var(--pd_hz);
  padding-right: var(--pd_hz);
  background-color: var(--wall-gray);
  display: grid;
  grid-template-columns: min(1240px,100%);
  justify-content: center;
}
.sec-lesson__detail{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #fff;
}
#lesson-slider{
  height: 100%;
}
.lesson-slider_wrap{
  overflow: hidden;
}
.lesson-slide-item{
  display: flex;
  -ms-align-items: center;
  align-items: center;
  
}
.lesson-slide-item::before{
  content: "";
  position: absolute;
  inset:0;
  filter: blur(6px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--slide_wall);
}
.lesson-slide-item.slide01{
  --slide_wall:url("images/lesson/slide01_wall.webp");
}
.lesson-slide-item.slide02{
  --slide_wall:url("images/lesson/slide02_wall.webp");
}
.lesson__desc{
  padding: min(30px,6vw) min(40px,4vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:min(30px,7vw);
}
.lesson__desc .comment{
  display: flex;
  flex-direction: column;
  gap:min(20px,3vw);
}

.lesson-button{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:10px;
}
.lesson-button .button_desc{
  font-size: min(16px,3.6vw);
  color: #EA3403;
  font-weight: 600;
  letter-spacing: .05em;
  padding-left: 1.25em;
  padding-right: 1em;
}
.lesson-button .button_desc::before
,.lesson-button .button_desc::after{
  content: "／";
  position: absolute;
  bottom: 0;
}
.lesson-button .button_desc::before{
  left: -.15em;
  scale:-1 1;
}
.lesson-button .button_desc::after{
  right: 0;
}
.lesson-button a{
  display: grid;
  place-content:center;
  height: min(45px,13vw);
  background-color: #07981C;
  border-radius: 100vmax;
}
.lesson-button a > span{
/*  font-size: min(20px,calc(100vw/22));*/
  font-size: clamp(16px, 2vw, 24px);
  padding-left: 1.5em;
  padding-right: 1.5em;
  font-weight: 500;
  color: #fff;
  letter-spacing: .05em;
}
.lesson-button a span.wid{
  font-weight: 900;
  color: #FFD203;
  font-size: 1.2em;
  padding-right: 2px;
}
/*footer
=====================================*/
footer {
  background-color: var(--wall-d-gray);
  padding-top: min(80px,10vw);
  padding-bottom: min(20px,4vw);
  padding-left: var(--pd_hz);
  padding-right: var(--pd_hz);
  display: grid;
  grid-template-columns: min(1240px,100%);
  justify-content: center;
}
.footer-inner{
  display: grid;
  grid-template-columns: auto 1fr;
  padding-bottom: min(30px,7vw);
  gap:min(50px,7vw);
}
.foot_about{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(20px,4vw);
  color: #fff;
}
.foot_about .logo{
    width: min(250px,100%);
  }
.footer-page_links li a {
  letter-spacing: .025em;
  font-size: min(12px,3.2vw);
}
.footer-page_links > li:nth-child(n+2){
  margin-top: 1em;
}
.foot_links .category-list a{
}
.sns-links {
  display: grid;
  grid-template-columns: repeat(3,min(25px,5.5vw));
  gap:min(15px,3vw);
  justify-content: center;
}
.sns-links a{
  display: grid;
  aspect-ratio:1;
  background-color: #fff;
  place-content:center;
  grid-template-columns: 60%;
  border-radius: 3px;
}
.foot_links{
  display: flex;
  flex-direction: column;
  gap:min(20px,4vw);
  font-size: min(12px,3.2vw);
}
.foot_links .other-links{
  color: #fff;
}
.other-links{
  color: currentColor;
  font-size: min(13px,3.4vw);
}
.other-links > li{
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap:10px 1em;
  letter-spacing: .025em;
}
.other-links > li a{
  padding-left: 1em;
}
.other-links > li a::before{
  content: "";
  width: 6px;
  aspect-ratio:1;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color: currentColor;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
}
.other-links > li:nth-child(n+2){
  margin-top: 10px;
}
footer p.copy {
  border-top: 1px solid;
  padding-top: min(20px,4vw);
  text-align: center;
  font-size: min(12px,3.4vw);
  letter-spacing: .02em;
  color: #fff;
}