@charset "UTF-8";
@media (max-width: 768px){
  /* --- 基本の土台 --- */
  *, *::before, *::after { 
    box-sizing: border-box; 
  }
  html { 
    font-size: 15px; 
  } 
  body { 
    line-height: 1.8; 
    margin: 0; 
  }
  img, video { 
    max-width: 100%; 
    height: auto; 
    display: block; 
  }
  .inner { 
    padding-inline: 16px; 
  }   
  #main, .page-wrap { 
    width:100%; 
    max-width:none; 
    padding-bottom: 90px;
  }

  .globa-Nav { 
    display: none; 
  }         
  .sp-nav { 
    display: block; 
  }         

  .grid-3 { 
    display: grid; 
    grid-template-columns: 1fr; gap: 16px; 
  }
  .col-2  { 
    display: grid; 
    grid-template-columns: 1fr; gap: 16px; 
  }
  section { 
    padding: 32px 0; 
  }  
  .back { 
    width: 100%;
    height: 667px;
    z-index: 100;
  }
  .header-bar {
  padding: 24px 60px 0 30px;
  justify-content: flex-start;
  align-items: start;
  gap: 40px;
}

.openbtn{
  z-index: 9999;
}

.first-view .fv-container{
  margin: 0 auto;
  padding: 0;
}
  *, *::before, *::after { 
    box-sizing: border-box; 
  }
  img, video {
     max-width: 100%; 
     height: auto; 
     display: block; }
  html, body { 
    overflow-x: hidden; 
  }

  .pc-only { 
    display: none !important; 
  }
  .sp-only { 
    display: block !important; 
  }

  #main, .page-wrap{
    width: 100% !important;
    max-width: none !important;
  }

  .site-header { 
    position: relative; 
  }
  .site-header .back { 
    position: relative; 
    z-index: 0; 
  } 
  .openbtn { 
    position: relative; 
    z-index: 9999; 
  }

  /* ===== First View / Hero ===== */
  .first-view{ 
    position: relative; 
    z-index: 2; 
  }      
  .first-view .fv-bg{ 
    position: relative; 
    z-index: 0; 
  }   
  .first-view .fv-overlay{ 
    position: relative; 
    z-index: 1; 
  } 
  .first-view .fv-container{
    position: relative; 
    z-index: 2;
    margin: 0 auto;
    padding: 0 16px;  
    overflow: visible;
  }
  .fv-left{ 
    position: relative; 
    z-index: 3; 
  }  



/* ======= Recommended Section =======　*/
  .back{ width: 100%; height: 667px; z-index: 100; }

.rec-list{
  display: block;
}

.rec-section{
  padding: 80px 40px 0px;
}

.rec-card{
  width: 295px;
  height: 295px;
  margin: 0 auto 40px;
}

.rec-text{
  font-size: 16px;
}

.rec-list > li.rec-card:nth-of-type(4) > .rec-text{
  padding-top: 9px;

}

.rec-list > li.rec-card:nth-of-type(3) > .rec-figure {
  --shift-y:-8px;
}

.rec-list > li.rec-card:nth-of-type(3) > .rec-figure {
 margin-bottom: 1px;
}

.rec-figure {
  --shift-y:14px;
}

.rec-adv-section{
  padding: 40px 30px 100px;
}
.rec-adv-list{
  display: block;
}
.rec-adv-card{
  width: 295px;
  height: 340px;
  margin: 0 auto 40px auto;
}
.rec-adv-text {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.04em;
  padding-top: 24px;
}
.rec-adv-title {
  letter-spacing: 0.0em;
}

.rec-adv-list > li.rec-adv-card:nth-of-type(2){
  margin-bottom: 0;
}

/* ======= 学べること・環境・講師 =======　*/

.learn-grid{
  display: block;
}

.back02{
  background-image: url(../img/sp/background_04_sp.png);
  background-size: 100%;
}

.learn-section{
  padding-inline: 0px;
  padding-top: 80px;
}
.learn-header{
  padding: 0;
}
.learn-title-ja {
  font-size: 28px;
}
.learn-grid{
  display: grid;
  grid-template-columns: 1fr; 
  width: 100% !important;   
  gap: 24px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.learn-card{ 
  height: auto; 
}

.lb-media{ 
  position: relative; 
  z-index: 1; 
}
.learn-body{ 
  position: relative; 
  z-index: 2;
  padding-top: 30px; 
}
.learn-h3{
  -webkit-text-fill-color: initial !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  font-size: 18px;
}
.learn-title-en{
  margin-bottom: 50px;
}
 .learn-grid .lb-media{
    display: grid; 
    place-items: center;  
}
.learn-grid .lb-media img{
  width: auto;   
  max-width: 100%;  
  height: auto;
}
br.sp-only { 
  display: inline !important; 
}

.learn-card--badge::before {
  right: 12px;
}
.learn-text{
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.04em;
  margin-top: 30px;
}

.learn-grid {
  gap: 60px;
  margin-bottom: 80px;
}


.learn-row .lb-media{
  display: grid; 
  place-items: center;  
}
.learn-row .lb-media img{
  width: auto;   
  max-width: 100%;  
  height: auto;
}

.lg-row{
  display: block;
  width: 100%;
  padding: 0 40px 0 40px;
}

.lg-row .lb-media{
  display: grid;
  place-items: center;
}
.lg-row .lb-media img{
  width: 295px;
  max-width: 100%;
  height: auto;
}
.lg-row > li.learn-card--badge.learn-card::before {
  right: -13px;
  top: -18px;
  background-image: url(../img/location.png);
}
.lg-h3{
  font-size: 18px;
}
.lg-text{
  font-size: 16px;
}
.lg-text a::after{
  background: none;
}
.lg-text{
  margin-bottom: 60px;
}
.fa-row{
  display: block;
  width: 100%;
  padding-bottom: 1px;
}

.inst-inner {
  width: 295px;
  height: 606px;
  margin-top: 0px !important;
}


/* ===== Instructor ===== */
  .learn-instructor{ 
    padding: 90px 16px;
   }
  .learn-instructor .inst-inner{
    width: 295px; 
    margin: 0 auto;
  }

  .inst-body{
    position: relative;
    padding: 16px;
    --illust: 160px;     
    --illust-h: 160px;   
    --gap: 14px;   
  }

  .learn-instructor .inst-figure{
    position: absolute;
    top: -28px;
    left: -71px;
    width: var(--illust);
    height: auto;
    margin: 0;
    z-index: 1;
  }
  .learn-instructor .inst-figure img{
    display: block;
      height: auto;
  }
  .inst-head{
    margin-left: 110px;
    min-height: var(--illust-h);
    display: grid; 
    align-content: start;
    row-gap: 0px;
  }
  .inst-label{
    display: inline-block;
    padding: 8px 12px;
    border: 2px solid #fff;
    color: #fff; 
    line-height: 1; 
    font-weight: 800;
    width: 106px;
    text-align: center;
    margin-right: 0px;
    font-size: 18px;
    height: 40px;
  }
  .inst-head .name{
    display: block; 
    font-size: 22px; 
    font-weight: 800; 
    color: #F5F5B5;
  }
  .inst-head .inst-en{
    display: block; 
    font-size: 12px; 
    color: #F5F5B5; 
    opacity: .95;
    padding-top: 0px;
    margin: 0;
  }
  .inst-text-block{ margin-top: 12px; }
  .inst-text{
    margin: 0;
    color: #fff;
    font-size: 16px; 
    line-height: 1.9; 
    letter-spacing: .04em;
    padding-left: 0px;
    line-height: 32px;
    width: 235px;
    height: 383px;
  }
  #inst-heading-sp.inst-head{
    display: grid;
    row-gap: 2px;
  }

  #inst-heading-sp .name{
    display: block;
    margin: 0;
    line-height: 1.05;
    margin-top: 15px;
  }

  #inst-heading-sp .inst-en{
    display: block;
    margin: 0;
    line-height: 1.05;
    margin-top: 8px;
  }
  .learn-instructor .inst-inner{
    padding-top: 10px !important; 
  }
   #inst-heading-sp.inst-head{
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 33px;
  }
  #curriculum .cur-grid{
    display: block;
    width: 355px;
  }
  #curriculum .cur-card {
    margin-bottom: 20px;
  }
  .inst-textsp{
    letter-spacing: 0.03em;
  }
  section.sc-section#schedule-cost{
    padding-top: 0 !important;
  }
  .sc-grid{
    display: block;
  }
  .sc-grid {
    width: 100%;
  }
  .sc-schedule {
    height: 670px;
  }
  .sc-card.sc-fee{
    height: 670px;
  }
  .dateleft img[src="img/sp/left_sp.png"] {
  margin: 0 auto;
}
.price img[src="img/sp/right_sp.png"] {
  margin: 0 auto;
}
.fee-row{
    transform: none !important;  
  }
.sc-section .price{
    width: 100%;
}
 
.sc-section .price img.sp-only{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;   
}

.sc-section .fee-row{
  grid-template-columns: 1fr; 
  justify-items: center;   
  align-items: center;
  transform: none;  
}
.sc-card.sc-fee .fee-row .price > img.sp-only{
  stransform: none !important; 
}
section#schedule-cost.sc-section{
  padding-bottom: 60px;
}
.vc-grid{
  display: block;
  width: 260px;
}
.vc-card{
  margin-bottom: 20px;
}
.vc-text{
  letter-spacing: 0.03em;
}
.vc-header {
  width: 100%;
}
.vc-section {
  padding-top: 60px;
}
section#voices .vc-grid > li.vc-card:nth-of-type(8){
  margin-bottom: 0;
}
section#faq.faq-section{
  padding-top: 0;
}
.faq-title-en{
  margin-bottom: 50px;
}
.faq-q {
  width: 40px;
  height: 70px;
}
.faq-question {
  margin-bottom: 20px;
}
.faq-answer {
  margin-bottom: 40px;
}
.faq-a {
  font-weight: 600;
}
.faq-answer p{
  width: 100%;
}
.faq-text{
  width: 260px;
}
.faq-section .faq-grid > .faq-col:last-child > .faq-item:last-child > .faq-question{
    margin-bottom: 0 !important;
  }
section#faq.faq-section{
  padding-bottom: 0px;
}
.contact-card{
  width: 100%;
  height: 580px;
  margin-inline:0;
}
.contact-plate{
  margin: 0 auto;
}

  #contact .contact-plate{
    position: relative;
    width: min(92vw, 540px);
    margin: 0 auto; 
  }

  #contact .contact-plate > img.contact-plate__bg.sp-only{
    position: absolute;
    top: 63px;
  }

  #contact .contact-plate__tel .pc-only{ 
    display: none;
  }
  #contact .contact-plate__tel .sp-only{
    display: block;
    margin: 16px auto 0;
    width: auto; 
    height: auto; 
    max-width: 100%;
  }
  #contact .contact-plate__tel{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 134px;
    z-index: 3;
    display: block;
    line-height: 0;
    width: 100%;
  }
  #mapaccess .map-wrap,
  .map-wrap{
    position: relative;    
    height: 400px !important;
  }

  #mapaccess .map-wrap iframe,
  .map-wrap iframe{
    position: absolute;
    inset: 0;  
    width: 100%;
    height: 100% !important;
  }
  .access-section{
    padding: 0px;
  }
  .access{
    width: 295px;
    margin: 40px auto 0;
  }
  section#apply.apply-section{
    padding-top: 0;
    padding-bottom: 0;
  }
  .apply-intro {
    width: 295px;
    letter-spacing: 0.04em;
  }
  .apply-form {
    width: 295px;
  }

  .pc-only { 
    display:none !important; 
  }
  .sp-only { 
    display:block !important; 
  }
  .choices--sp{
    display:flex;
    flex-wrap:wrap;
    gap: 0px 16px;
  }
  .choices--sp > li{ 
    display:inline-flex; 
    align-items:center; 
  }
  .choices--sp > li.break{ 
    flex-basis:100%; 
  } 

  .choices--age{
    display: flex;
    flex-wrap: wrap;
  }
  .choices--age li{
    flex: 0 0 calc(100% / 3); 
  }
  .choices--age li:last-child{
    flex-basis: 100%;  
  }
  #main, .page-wrap{
    padding-bottom: 0;
  }
.first-view {
  z-index: 9;
  margin-top: 200px;
  width: 315px;
  margin: 240px auto 0;
}
.enroll-banner{
  border: 4px solid #fff;
  text-align: center;
  margin-top: 18px;
  height: 44px;
  font-size: 18px;
  font-weight: 700;
}
.back .pzb-bgvid iframe {
  transform: scale(3.08);
}
.enroll-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:315px;
  height:44px;
  border:4px solid #fff;
  background:transparent;
  color:#fff;
  white-space:nowrap;
}
.enroll-banner .enroll-when{
  display:flex;
  align-items:center; 
  gap:.6em;          
  margin:0;
  line-height:1; 
}

  .enroll-banner .en01{ 
    font-size:16px;
    line-height:1;
    font-weight:800;
  }
  .enroll-banner .en02{ 
    font-size:22px;
    line-height:1;
    font-weight:800;
    position:relative; top:-1px; 
  }
  /* ===== SPドロワーのビジュアル ===== */
  /* 本体 */
  .sp-drawer{
    position: fixed; 
    inset: 0; 
    z-index: 10000;
    transform: 
    translateX(100%); 
    transition: transform .3s ease;
    background: #D4417C;
    color:#fff; overflow-y:auto;
    padding: max(20px, env(safe-area-inset-top)) 24px 32px 24px;
  }
  .sp-drawer.is-open{ 
    transform: translateX(0); 
  }

  /* 中身のレイアウト */
  .sp-drawer__inner{
    display:flex; 
    flex-direction:column; 
    min-height:100%;
    gap: 28px;
  }
   /* メニューリスト */
  .sp-drawer__list{
    list-style:none; margin: 8px 0 0; padding:0;
    display:grid; gap: 28px;
  }
  .sp-drawer__list a{
    display:flex; 
    align-items:center; gap: 16px;
    text-decoration:none; color:#fff;
    font-weight:700; 
    letter-spacing:.02em;
    font-size: 24px;
    line-height:1.2;
  }
 .sp-drawer__list a::before{
  color: #F5F5B5;
 }
   .sp-drawer__list a::before{
    content:"›"; font-size: 22px; opacity:.95; transform: translateY(-1px);
  }
 .sp-drawer__list{
  padding-left: 10px;
 }
 
  /* 最下部：黒ボタン */
  .sp-drawer__cta{ 
    margin-top:40px; 
    padding: 8px 0 0; 
  }
  .sp-btn-apply{
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:16px;
    height:72px; 
    width:100%;
    background:#000; 
    color:#fff; 
    text-decoration:none;
    font-weight:800;
    font-size: clamp(18px, 4.8vw, 24px);
    width: 285px;
    margin: 0 auto;
  }
  .sp-btn-apply::before{ 
    content:"›"; 
    font-size:20px; 
  }

  /* オーバーレイ（既存のまま表示切替） */
  .sp-overlay{
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,.45);
    z-index: 9999; 
    display:none;
  }
  body.menu-open .sp-overlay{ 
    display:block; 
  }
  body.no-scroll{ 
    overflow:hidden; 
  }

  /* ハンバーガー → X（右上固定・白線） */
  .openbtn{
    position: fixed; 
    top: 18px; 
    right: 16px;
    width: 32px; 
    height: 32px; 
    z-index: 10002;
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    gap:6px;
  }
  .openbtn span{
    display:block; height:2px; width:100%; background:#fff; transition:.25s ease;
  }
  .vc-meta{
    height: 18px;
  }
  /* X化 */
  .openbtn.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .openbtn.active span:nth-child(2){ opacity:0; }
  .openbtn.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
}

@media (max-width: 380px) {
  #contact .contact-plate > img.contact-plate__bg.sp-only {
      top: 83px;
    }
  #contact .contact-plate__tel .sp-only {
margin-top: 28px;
  }
  .back02{
    background-size: 103%;
  }
  }