*{
  margin:0;
  padding:0;
}

html{
  width:100vw;
  overflow-x: hidden;
}

body{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}


/*共通パーツ*/
.inner{
  width:1150px;
  margin:0 auto;
}

/*改行*/
.br_768{
    display: none;
}
.sp_br{
    display: none;
}

.fixed-cta {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.fixed-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* header */

.header{
  width:100vw;
  padding:1.25rem 0;
  position: fixed;
  top:0;
  left:50%;
  transform: translateX(-50%);
  z-index:1000;
  transition: background-color .3s ease, color .3s ease;
}
.header.is-active {
  background-color:white; 
}

.header.is-active .nav a,
.header.is-active .logo span {
  color: #DF322F;
}
.header.is-active .nav a:hover{
    text-shadow: none;
    opacity: .8;
}
.header-inner{
  width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-size:14px;
  font-weight:600;
}

.logo a{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:#fff;
}

.logo img{
  width:50px;
  margin-right:10px;
}

.header .nav ul{
  display:flex;
}

.header .nav li{
  list-style:none;
  margin-left:2.08vw;
  font-weight: 600;
}

.header .nav a{
  text-decoration:none;
  color:#fff;
  transition:.3s;
}

.header .nav a:hover{
  text-shadow:0px 0px 10px #DF322F;
}

/* MAIN VISUAL */

.mv{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.swiper,
.swiper-slide{
  width:100%;
  height:100%;
}

.swiper-slide{
  overflow:hidden;
}

.swiper-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  animation: zoomUp 8s linear infinite;
}

@keyframes zoomUp{
  0%{
    transform:scale(1);
  }
  100%{
    transform:scale(1.2);
  }
}

/* overlay */
.overlay{
  position:absolute;
  inset:0;
  background:rgba(15,15,15,0.3);
  z-index:2;
}

/* triangle */
.triangle{
  position:absolute;
  right:0;
  top:0;
  width:25%;
  height:100%;
  background:rgba(222,49,47,0.5);
  clip-path:polygon(100% 0, 0 100%, 100% 100%);
  z-index:3;
}

/* content */
.mv-content{
  width:1300px;
  position:absolute;
  bottom:2.5rem;
  left:50%;
  transform: translateX(-50%);
  z-index:5;
  color:white;
}

.catch{
  text-shadow:0px 0px 30px rgba(0,0,0,0.5);
  font-weight: 800;
}

.catch .line1{
  display:block;
  font-size:4.17vw;
}

.catch .line2{
  display:block;
  margin-left: -2rem;
}

.main-copy{
  font-size:5.56vw;
}

.sub_txt{
  font-size:4.17vw;
}

.sub_copy{
    line-height:2.5rem;
    margin-top:1.25rem;
}

.status{
  font-size:1.563rem;
  margin-top:3.75rem;
  text-shadow:0px 0px 30px #DF322F;
  text-align: center;
}

.btn{
  display:block;
  width:400px;
  text-align: center;
  margin:.5rem auto 0 auto;
  padding:20px 0;
  background:#DF322F;
  font-size:1rem;
  text-decoration:none;
  color:#fff;
  border-radius:50px;
  box-shadow:0px 10px 10px rgba(0,0,0,0.3);
  transition:.3s;
  position:relative;
  overflow:hidden;
}

.btn:hover{
  opacity:.85;
}

.btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-20deg);
  animation:shine 2s infinite;
}

@keyframes shine{
  0%{
    left:-75%;
  }
  60%{
    left:125%;
  }
  100%{
    left:125%;
  }
}

.note{
  font-size:12px;
  color:#A2A2A2;
  margin-top:15px;
  text-align: center;
}



/* ===== 悩みセクション ===== */

.trouble {
  background:#F0F0F0;
  padding:3.75rem 0;
}

.trouble-title {
  text-align:center;
  color:#DF322F;
  margin-bottom:3rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.trouble-items {
  display:flex;
  justify-content:center;
  gap:5rem; /* イラスト間 */
}

.trouble-item {
  text-align:center;
}

.balloon {
  background:#fff;
  border-radius:1rem;
  padding:1.25rem 1.875rem;
  font-size:1rem;
  margin-bottom:1.5rem;
  color:black;
  font-weight: 600;
}

.trouble-item img {
  width:200px;
  height:auto;
}

/* ===== 赤帯 ===== */

.cta-red {
  background:#DF322F;
  padding:1.25rem 0;
  text-align:center;
  color:#fff;
}

.cta-main {
  font-size:25px;
  margin-bottom:.5rem;
}

.cta-main span {
  font-size:40px;
  font-weight:700;
}

.cta-sub {
  font-size:14px;
  color:#FFAFAF;
}







/* ===============================
   強み Section
================================ */


#strength{
  padding:5rem 0;
}

.section_ttl{
  font-size:1.563rem;
  color:black;
  text-align:center;
  position:relative;
  margin-bottom:3.75rem;
}

.section_ttl::after{
  content:"";
  display:block;
  width:80px;
  height:2px;
  background:#DF322F;
  margin:1.25rem auto 0;
}

.strength_item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:5rem;
}

.strength_item.reverse{
  flex-direction:row-reverse;
}

.strength_item img{
  width:550px;
  height:350px;
  object-fit:cover;
  box-shadow:0px 4px 10px rgba(0,0,0,0.16);
}

.strength_txt{
  width:560px;
  color:black;
}

.strength_head{
  display:flex;
  align-items:center;
}

.point{
  font-size:0.875rem;
  color:#DF322F;
  margin-right:1.25rem;
}

.strength_head h3{
  font-size:1.25rem;
  background:#DF322F;
  padding:3px 10px;
  color:#fff;
  font-weight: 600;
}

.strength_txt p{
  font-size:1rem;
  line-height:2.5rem;
  margin-top:1.875rem;
}

.red{
  font-size:1.125rem;
  color:#DF322F;
  font-weight: 600;
}



/* ===============================
   コース案内 Section
================================ */

#course {
  background: url(img/course_bg.jpg) center/cover no-repeat;
  position: relative;
  padding: 5rem 0;
}

#course::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.8); /* 20%透過 */
  z-index:0;
}

.course_inner {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  gap:4rem;
}

/* ===== カード共通 ===== */

.course_card {
  width:400px;
  background:#fff;
  border-radius:1.25rem;
  display:flex;
  flex-direction:column;
  position:relative;
}

.standard {
  box-shadow:0px 5px 10px rgba(0,0,0,0.1);
}

.premium {
  box-shadow:0px 0px 30px rgba(223,50,47,0.33);
}

/* タブ */

.course_tab {
  padding:1.5rem 0;
  text-align:center;
  color:#fff;
  border-radius:1.25rem 1.25rem 0 0;
}

.standard_tab {
  background:linear-gradient(45deg,#FFCD45,#FF9300);
}

.premium_tab {
  background:linear-gradient(45deg,#FF0400,#DE06DE);
}

.course_name {
  font-size:1.25rem;
  font-weight:600;
}

.course_sub {
  font-size:0.875rem;
}

/* 本文 */

.course_body {
  padding:1.25rem 0 2.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
}

.price {
  margin-bottom:1.25rem;
}

.price_main {
  font-size:3.125rem;
  color:#DF322F;
  font-weight:700;
}

.price_sub {
  font-size:1rem;
}

.course_text {
  width:320px;
  font-size:1rem;
  line-height:1.875rem;
}
.bold_txt{
    font-weight: 600;
}
.label {
  font-weight:600;
}

.course_text p:not(.support_item p){
    margin-top:1.25rem;
}

.highlight {
  color:#DF322F;
  font-weight:600;
}

/* サポート */

.support {
  margin-top:0.5rem;
}

.support_item {
  display:flex;
  align-items:center;
  margin-bottom:1rem;
}

.support_item i {
  font-size:1rem;
  color:#DF322F;
  margin-right:1rem;
  margin-top:4px;
}

.support_item p {
  width:288px;
  line-height:1.563rem;
}

.full_support {
  margin-top:1rem;
  font-size:1.125rem;
  color:#DF322F;
  font-weight:600;
  text-align: center;
}

/* おすすめ */

.recommend {
  position:absolute;
  top:-3%;
  right:-6%;
  width:80px;
  height:80px;
  background:#FFC400;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.875rem;
  color:#DF322F;
  font-weight:800;
  transform: rotate(15deg);
}

/* カレンダー */
.calendar_img {
  width:182.74px;
  height:209.57px;
  position:absolute;
  bottom:5%;
  left:-20%;
  transform-origin:top center;
  animation:calendarSwing 3s ease-in-out infinite;
}

@keyframes calendarSwing {
  0% {
    transform:rotate(-3deg);
  }
  50% {
    transform:rotate(3deg);
  }
  100% {
    transform:rotate(-3deg);
  }
}




/* =============================
   カリキュラム Section
============================= */

.curriculum{
  background:rgba(223,50,47,0.05);
  padding:5rem 0;
}

.curriculum_inner{
  width:1050px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.curriculum_img{
  width:300px;
}
.curriculum_img img{
    width:100%;
}

.curriculum_txt{
  width:700px;
}

.curriculum_ttl{
  font-size:1.563rem;
  font-weight:700;
  margin-bottom:1.875rem;
}

.curriculum_ttl span{
  background:linear-gradient(rgba(252,242,0,0.53), rgba(252,242,0,0.53)) no-repeat left bottom / 0 20px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 4px;
}

.curriculum_ttl span.active{
  animation:markerDraw 1.2s ease forwards;
}
@keyframes markerDraw{
  0%{
    background-size:0 20px;
  }
  100%{
    background-size:100% 20px;
  }
}


.curriculum_txt p{
  line-height:1.875rem;
  margin-bottom:1.875rem;
}

.curriculum_btn{
  display:block;
  width:900px;
  text-align:center;
  background:#DF322F;
  padding:1.25rem 0;
  margin:5rem auto 0 auto;
  box-shadow:0px 10px 10px rgba(0,0,0,0.2);
  border-radius:999px;
  text-decoration:none;
  animation:floatBtn 3s ease-in-out infinite;
}

.btn_small{
  display:block;
  color:#FFF500;
  font-size:1rem;
  margin-bottom:0.5rem;
}

.btn_big{
  display:block;
  color:#fff;
  font-size:1.25rem;
}

.curriculum_note{
  font-size:0.875rem;
  color:#727272;
  text-align:center;
  margin-top:1.25rem;
}

@keyframes floatBtn{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
  100%{ transform:translateY(0); }
}



/* =============================
   講師・オーナー紹介 Section
============================= */

.teacher{
  position:relative;
  padding:5rem 0 3.75rem 0;
}

.teacher::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:50%; 
  background:#DF322F;
  z-index:-1;
}

.teacher_wrap{
  display:flex;
  justify-content:space-between;
  margin-top:3rem;
}

.teacher_item{
  width:550px;
}

.teacher_item img{
  width:550px;
  height:350px;
  object-fit:cover;
}

.teacher_txt{
  margin-top:1.5rem;
}

.teacher_name{
  font-size:1.125rem;
  font-weight:700;
  color:#fff;
}

.teacher_desc{
  font-size:1rem;
  margin-top:1rem;
  color:#fff;
}



/* =============================
   プレミアム限定 Section
============================= */

.premium_support{
  padding:3.75rem 0 5rem 0;
}

.premium_label{
  display:block;
  width:178px;
  font-size:0.875rem;
  background:#DF322F;
  color:#fff;
  padding:0.625rem 0;
  text-align: center;
  margin:0 auto 1.25rem auto;
  border-radius: 9999px;
}

.premium_support_wrap{
  display:flex;
  justify-content:space-between;
  margin-top:3rem;
}

.premium_support_item{
  max-width:370px;
  width:calc((100% - 2.5rem) / 3);
  background:#F0F0F0;
  border-radius:10px;
  padding:2.5rem 0;
  text-align:center;
}

/* 赤丸アイコン */
.premium_icon{
  width:100px;
  height:100px;
  background:#DF322F;
  border-radius:50%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.premium_icon img{
  width:50px;
  height:auto;
}

/* タイトル */
.premium_title{
  font-size:1.25rem;
  color:#DF322F;
  margin:1.25rem 0;
  font-weight:600;
}

/* 説明文 */
.premium_text{
  font-size:1rem;
  line-height:1.875rem;
  text-align:center;
}



/* =========================
   受講生の声
========================= */
.voice {
  background: #F0F0F0;
  padding: 5rem 0;
}

/* 上部 */
.voice_main {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5rem;
}

.voice_main img {
  max-width: 550px;
  width: calc((100% - 1.25rem) / 2);
  max-height:350px;
  height: 24.31vw;
  object-fit: cover;
  object-position: 10% 35%;
}

.voice_main_txt {
  max-width: 550px;
  width: calc((100% - 1.25rem) / 2);
}

.voice_message {
  font-size: 1rem;
  line-height: 1.875rem;
  margin-top: 1.5rem;
  width: 100%;
}

/* 名前 */
.voice_name {
  margin-bottom: .5rem;
}

.voice_name .first {
  color: #DF322F;
  font-size: 1.875rem;
  font-weight: 700;
}

.voice_name .rest {
  font-size: 1.25rem;
  font-weight: 700;
}

.voice_status {
  font-size: .875rem;
  margin-bottom: 1.5rem;
}

/* 下部2カラム */
.voice_sub_wrap {
  display: flex;
  justify-content: space-between;
}

.voice_sub {
  max-width: 550px;
  width:calc((100% - 1.25rem) / 2);
  background: #fff;
  padding: 2.5rem 0 3.75rem 0;
}

.voice_sub_inner {
  max-width: 430px;
  width:calc(100% - 7.5rem);
  margin: 0 auto;
}
.voice_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.voice_sub_inner img {
  width: 94px;
  margin-right: 2.5rem;
}

.voice_sub_txt {
  flex: 1;
}



/* =============================
   FAQ Section
============================= */

.faq{
  padding:5rem 0;
}

.faq .inner{
  width:900px;
}

.faq_wrap{
  margin-top:3rem;
}

.faq_item{
  width:900px;
  margin:0 auto 1.5rem auto;
  border:1px solid #F0F0F0;
  box-shadow:0px 0px 10px rgba(0,0,0,0.1);
  border-radius:1.25rem;
  background:#fff;
}

.faq_question{
  width:820px;
  margin:0 auto;
  padding:1.25rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.faq_question p{
  width:780px;
  font-size:1.125rem;
  font-weight:700;
}

.faq_toggle{
  width:1.25rem;
  height:1.25rem;
  position:relative;
  flex-shrink:0;
}

.faq_toggle::before,
.faq_toggle::after{
  content:"";
  position:absolute;
  background:#DF322F;
}

.faq_toggle::before{
  width:1.25rem;
  height:2px;
  top:9px;
  left:0;
}

.faq_toggle::after{
  width:2px;
  height:1.25rem;
  top:0;
  left:50%;
  transform: translateX(-50%);
  transition:0.3s;
}

.faq_item.active .faq_toggle::after{
  transform: translateX(-50%) rotate(90deg);
  opacity:0;
}

.faq_answer{
  width:820px;
  margin:0 auto;
  padding:0 0 1.25rem 0;
  display:none;
}

.faq_answer p{
  font-size:1rem;
}


/* ===============================
   動画 Section
================================ */
.cta-movie {
  display: flex;
  align-items: stretch;
  width: 100%;
  height:800px;
}

/* ===============================
   左側
================================ */
.cta-left {
  width: 50%;
  height: 100%;
  background: #DF322F;
  display: flex;
  align-items: center;
}

.cta-inner {
  width: 470px;
  margin-left: 145px;
  color: #fff;
}

/* タイトル */
.cta-title {
  font-size: 2.5rem;
  font-weight: 800;
}

/* 特典エリア */
.cta-benefit:first-of-type {
  margin-top: 3.75rem;
}

.benefit-head {
  font-size: 1.25rem;
  font-weight: 700;
}

.benefit-text {
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* LINEテキスト */
.cta-line {
  font-size: 1.25rem;
  margin:3.75rem 0 0.313rem 0;
  text-align: center;
}

/* ボタン */
.cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1.25rem 0;
  background: #fff;
  color: #DF322F;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease;
}


.cta-btn:hover {
  transform: translateY(-3px);
}

/* ===============================
   右側（動画）
================================ */
.cta-right {
    
  width: 50%;
  position: relative;
  overflow: hidden;
}

.cta-right video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 10% 30%;
}

.cta-right .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}



/* ===============================
   CONTACT
================================ */
.contact {
  background: #F0F0F0;
  padding: 5rem 0;
}

.contact_top {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}

.contact_card {
  max-width: 550px;
  width:calc((100% - 2.5rem) / 2);
  background: #fff;
  border-radius: 1.25rem;
  padding: 2.5rem 0;
  text-align: center;
}

.contact_head {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* 電話 */
.tel_number {
  font-weight: 700;
  margin-top:-1.25rem;
}

.tel_link {
  color: inherit;
  text-decoration: none;
  pointer-events: none; /* PCではクリック不可 */
  font-size: 2.5rem;
  font-weight: 800;
  color: #DF322F;

}

.tel_note {
  font-size: 0.875rem;
}

/* LINE */
.line_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #06C755;
  color: #fff;
  text-decoration: none;
  font-size: 1.125rem;
  padding: 1rem 0;
  width:350px;
  border-radius: 999px;
  transition: .3s;
}

.line_icon {
  width: 33px;
  height: 33px;
  margin-right:1rem;
}

.line_btn:hover{
    opacity: .8;
}

/* ===============================
   FORM
================================ */

.contact_head.form_head{
    text-align: center;
}
.contact_form_wrap {
  margin-top: 3rem;
  background: #fff;
  border-radius: 1.25rem;
  padding: 2.5rem 0;
}

.contact_form {
  width: 600px;
  margin: 3.75rem auto 0 auto;
}

.form_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.25rem 0;
}

.form_item label {
  font-size: 1rem;
  font-weight: 700;
}

.form_item input,
.form_item textarea {
  width: 60%;
  font-size: 1rem;
  padding: 0.625rem 1.563rem 0.5rem 1.563rem;
  border-radius: 0.75rem;
  border: none;
  background: #F0F0F0;
}

.form_item textarea {
  min-height: 150px;
  resize: none;
}

.form_btn_wrap {
  text-align: center;
  margin-top: 2rem;
}

.submit_btn {
  width: 150px;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 0;
  background: #DF322F;
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: .3s;
}
.submit_btn:hover{
    opacity: .8;
}


/* =============================
   追従CTA
============================= */
.fixed-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #DF322F;
  padding: 1rem 0 1.5rem;
  text-align: center;
  z-index: 800;
}

/* 上のテキスト */
.fixed-cta-text {
  color: #fff;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

/* LINEボタン */
.fixed-cta-btn {
  width: 600px;
  max-width: 90%;
  margin: 0 auto;
  background: #fff;
  border-radius: 9999px;
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #06C755;
  font-weight: 700;
  text-decoration: none;
  transition: .3s;
}
.fixed-cta-btn:hover{
    opacity: .8;
}

/* アイコン */
.line-icon {
  width: 20px;
  height: 20px;
  margin-right:1rem;
}

/* トップへ戻る */
.back-to-top {
  position: absolute;
  right: 2.5rem;
  bottom: 50%;
  transform: translateY(50%);
  color: #fff;
  font-size: 1.375rem;
  text-decoration: none;
}



/* =========================
   footer
========================= */

.footer{
  background:#DF322F;
  padding:2.5rem 0 1.25rem 0;
}

.footer_inner{
  width:900px; /* 既存.innerと揃えるなら同じ値に */
  margin:0 auto;
}

/* 上部 Follow */
.footer_top{
  display:flex;
  align-items:center;
  gap:1rem;
}

.follow_text{
  color:#fff;
  font-weight:700;
}

.insta_link{
  color:#fff;
  font-size:1.5rem;
  transition:0.3s;
}

.insta_link:hover{
  opacity:0.8;
}

/* ナビ */
.footer_nav{
  margin:2rem 0 3.75rem;
}

.footer_nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  list-style:none;
  padding:0;
}

.footer_nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  transition:0.3s;
}

/* hover時80% */
.footer_nav a:hover{
  opacity:0.8;
}

/* コピーライト */
.copyright{
  text-align:center;
  color:#FFA3A3;
  font-size:0.875rem;
}



/*------------------------------------------------------------
                            レスポンシブ
--------------------------------------------------------------*/

@media(max-width:1440px){
    .inner {
        width:clamp(820px,79.86vw,1150px);
    }

    /*ヘッダー*/
    .header-inner{
        width:clamp(950px,83.33vw,1200px);
    }

    /*メインビジュアル*/
    .mv-content{
        width:clamp(980px,90.28vw,1300px);
    }

    /*特徴*/
    .strength_item img{
        width: 38.19vw;
        height: 24.31vw;
    }
    .strength_txt{
        width: 38.89vw;
    }


    /*講師・オーナー紹介*/
    .teacher_item{
        width:38.19vw
    }
    .teacher_item img{
        width:100%;
        height:24.31vw;
    }

    /*動画部分*/
    .cta-movie{
        height:clamp(620px,55.56vw,800px);
    }
    .cta-inner {
        width: 32.64vw;
        margin-left: 10.07vw;
    }
    .cta-title {
        font-size: 2.78vw;
    }
    .cta-btn,.cta-line{
        font-size: 1.39vw;
    }
}


@media(max-width:1200px){
    html{
        font-size: 15px;
    }
    .inner {
        width:clamp(700px,80.08vw,820px);
    }

    /*特徴*/
    .strength_item img {
        width: 45%;
        height: 23vw;
    }
    .strength_txt {
        width: 50%;
    }
}

@media(max-width:1024px){
    html{
        font-size: 14px;
    }

    /*ヘッダー*/
    .header-inner {
        width: 90%;
    }
    .logo{
        position: relative;
        z-index: 12000;
    }
    .header.is-active .logo.active span{
        color:white;
    }

    /* ハンバーガー */
    .hamburger {
        display: none;
        width: 30px;
        height:30px;
        cursor: pointer;
        position: relative;
        z-index: 9999;
    }
    .hamburger span {
        position: absolute;
        display: block;
        width: 30px;
        height: 1px;
        background: #fff;
        transition: .3s;
    }
     .header.is-active .hamburger span{
        background: #DF322F;
    }
    .hamburger span:nth-child(1){
        top:20%;
    }
     .hamburger span:nth-child(2){
        top:48%;
    }
     .hamburger span:nth-child(3){
        bottom:20%;
    }

    .header.is-active .hamburger.active span{
        background: white;
    }

    /* メニュー展開時 → × */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) ;
        top: 50%;
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) ;
        bottom:50%;
    }

    .nav {
        position: fixed;
        top: 0;
        right:-100%;
        width: 100%;
        height: 100vh;
        background: #DF322F;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .6s;
        z-index: 900;
    }
    .nav ul {
        flex-direction: column;
        width:70%;
    }
    .header .nav li {
        border-bottom: 1px solid rgba(255,255,255,0.4);
        width: 100%;
        text-align: center;
        padding: 1.25rem 0;
        margin-left:0;
    }
    .nav ul li a {
        color: #fff;
        font-size: 1.125rem;
    }
    .header.is-active .nav ul li a{
        color:white;
    }
    .nav.active {
        right: 0;
    }
    .hamburger {
        display: block;
    }
    /* PCナビ横並びを解除 */
    .nav ul {
        display: flex;
    }


    /*メインビュー*/
    .mv{
        height:110vh;
    }
    .mv-content {
        width: 95%;
    }


    /*悩み*/
    .trouble-items{
        gap: 5.56vw;
    }
    .trouble-item img {
        width:150px;
    }


    /*特徴*/
    .strength_item{
        align-items: flex-start;
    }
    .strength_item img {
        width: 36.13vw;
        height: 24.31vw;
    }
    .strength_txt{
        width: 41.99vw;
    }


    /*コース案内*/
    .course_inner{
        width:90%;
        margin:0 auto;
    }
    .course_card {
        width: calc((100% / 2) - 1.25rem);
    }

    /*カリキュラム*/
    .curriculum_btn{
        width:80%;
    }


    /*受講生の声*/
    .voice_main img {
        width: 38.19vw;
        height: 24.31vw;
    }
    .voice_main_txt {
        width: calc(100% - 38.19vw - 1.25rem);
    }


    /*よくある質問*/
    .faq .inner{
        width:80%;
    }
    .faq_item{
        width:100%;
    }
    .faq_question{
        width:95%;
    }
    .faq_question p{
        width:calc(100% - 2rem);
    }
    .faq_answer{
        width:95%;
    }


    /*動画*/
    .cta-movie {
        height: clamp(550px, 60.55vw, 620px);
    }
    .cta-inner {
        width: 34.18vw;
    }
    .benefit-head {
        font-size: 1.76vw;
    }
    .cta-btn, .cta-line {
        font-size: 1.6vw;
    }

    /*問い合わせ*/
    .line_btn{
        width:85%;
    }

    /*フッター*/
    .footer_inner{
        width:90%;
    }
}

@media(max-width:768px){
    html{
        font-size: 15px;
    }
    .inner {
        width:90%;
    }

    /*改行*/
    .br_768{
        display: block;
    }


    /*メインビュー*/
    .mv{
        height:100vh;
    }
    .catch .line1, .sub_txt {
        font-size: 6.51vw;
    }
    .main-copy {
        font-size: 8.46vw;
    }


    /*悩み*/
    .trouble-items{
        flex-flow: column;
    }
    .trouble-item {
        width: 90%;
        margin:0 auto;
        display: flex;
        justify-content: center;
        flex-flow: row-reverse;
        align-items: center;
    }
    .trouble-item img{
        margin-right: 1.25rem;
    }
    .balloon{
        margin-bottom:0;
    }
    .cta-main{
        font-size: 3.26vw;
    }
    .cta-main span {
        font-size: 5.21vw;
    }
    .cta-sub {
        font-size: 0.875rem;
    }


    /*特徴*/
    #strength {
        padding: 3.75rem 0;
    }
    .strength_item{
        margin-bottom:2.5rem;
    }
    .strength_item,
    .strength_item.reverse{
        flex-flow: column;
    }
    .strength_item img {
        width: 100%;
        height: 54.69vw;
    }
    .strength_txt {
        width: 100%;
        margin-top:1.25rem;
    }


    /*コース案内*/
    #course{
        padding:3.75rem 0;
    }
    .course_inner{
        flex-flow: column;
        gap: 3.91vw;
    }
    .course_card{
        width:100%;
    }
    .course_text{
        width:90%;
    }
    .calendar_img{
        width: 16.93vw;
        height: auto;
        top: -10vw;
        bottom: auto;
        left: 5vw;
    }
    .recommend{
        right: -3%;
    }


    /*カリキュラム*/
    .inner.curriculum_inner {
        flex-flow: column-reverse;
    }
    .curriculum_ttl{
        text-align: center;
        font-size: 3.26vw;
    }
    .curriculum_ttl span{
        background: linear-gradient(rgba(252, 242, 0, 0.53), rgba(252, 242, 0, 0.53)) no-repeat left bottom / 0 1.25rem;
    }
    .curriculum_txt{
        width: 100%;
    }
    .curriculum_img {
        width: 350px;
    }
    .curriculum_btn {
        width: 90%;
    }


    /*講師・オーナー紹介*/
    .teacher_wrap{
        flex-flow: column;
    }
    .teacher::before{
        top: 30%;
    }
    .teacher_wrap .teacher_item:nth-of-type(2){
        margin-top:2.5rem;
    }
    .teacher_item{
        width:100%;
    }
    .teacher_item img{
        height: 54.69vw;
    }


    /*プレミアム限定*/
    .premium_support{
        padding:2.5rem 0 3.75rem 0;
    }
    .premium_support_wrap{
        flex-flow: column;
    }
    .premium_support_item{
        max-width: 100%;
        width:100%;
    }
    .premium_support_item:nth-of-type(2){
        margin:1.25rem 0;
    }


    /*受講生の声*/
    .voice{
        padding:2.5rem 0 3.75rem 0;
    }
    .voice_main{
        flex-flow: column;
        margin-bottom:2.5rem;
    }
    .voice_main img{
        width:100%;
        max-width:100%;
        height: 54.69vw;
    }
    .voice_main_txt{
        width:100%;
        max-width:100%;
        margin-top:1.25rem;
    }
    .voice_sub_wrap{
        flex-flow: column;
    }
    .voice_sub{
        max-width:100%;
        width:100%;
    }
    .voice_sub:first-of-type{
        margin-bottom:1.25rem;
    }
    .voice_sub_inner{
        max-width: 80%;
        width:80%;
    }

    /*よくある質問*/
    .faq{
        padding:2.5rem 0;
    }
    .faq .inner {
        width: 90%;
    }
    .faq_question,
    .faq_answer {
        width: 90%;
    }
    .faq_question p{
        font-size: 1rem;
    }



    /*動画*/
    .cta-movie {
        flex-flow: column;
        height:100%;
    }
    .cta-left,.cta-right{
        width:100%;
    }
    .cta-left{
        padding:2.5rem 0;
    }
    .cta-inner{
        width:90%;
        margin:0 auto;
    }
    .cta-title{
        font-size: 40px;
    }
    .benefit-head{
        font-size: 1.125rem;
    }
    .cta-btn, .cta-line{
        font-size: 1rem;
    }
    .cta-right{
        height:65.1vw;
    }
    .cta-right video{
        object-position: 10% 35%;
    }


    /*お問い合わせ*/
    .contact{
        padding:2.5rem 0 3.75rem 0;
    }
    .contact_top{
        flex-flow: column;
    }
    .contact_card{
        max-width: 100%;
        width:100%;
    }
    .contact_card.contact_tel{
        margin-bottom:2.5rem;
    }
    .contact_card p{
        width:90%;
        margin-left: auto;
        margin-right: auto;
    }

    .contact_form {
        width: 90%;
    }
    .form_item{
        flex-flow: column;
        align-items: flex-start;
    }
    .form_item label{
        margin-bottom:.5rem;
    }
    .form_item input, .form_item textarea{
        padding:0.5rem 1.25rem;
        width:calc(100% - 2.5rem);
        border-radius: 0.5rem;
    }

    .submit_btn{
        width:100%;
    }

    /*追従CTA*/
    .fixed-cta-btn{
        width:70%;
    }
    .back-to-top{
        width: 60px;
        height: 60px;
        background-color: #DF322F;
        bottom: auto;
        top: -74%;
        right: 0;
    }
    .back-to-top i{
        line-height: 3;
    }


    /*フッター*/
    .footer{
        padding:1.25rem 1rem;
    }
    .footer_top{
        justify-content: center;
    }
    .footer_nav{
        display: none;
    }
    .copyright{
        margin-top:2.5rem;
    }
}

@media(max-width:425px){
    html{
        font-size: 14px;
    }

    .sp_br{
        display: block;
    }

    /*共通パーツ*/
    .section_ttl{
        font-size: 1.286rem;
        margin-bottom: 2.5rem;
    }


    /*メインビュー*/
    .triangle{
        top: auto;
        bottom: 0;
        width: 45%;
        height: 80%;
    }
    .mv-content {
        width: 90%;
    }
    .catch .line1, .sub_txt {
        font-size: 5.88vw;
    }
    .catch .line2{
        margin-left: -1rem;
    }
    .main-copy {
        font-size: 8.24vw;
    }
    .sub_copy {
        line-height: 30px;
    }
    span.sub_txt {
        margin-left: -1rem;
    }
    .status{
        font-size: 4.24vw;
    }
    .btn{
        width:100%;
    }
    .note {
        font-size: 0.714rem;
        margin-top: .5rem;
    }


    /*悩み*/
    .trouble{
        padding:2.5rem 0;
    }
    .trouble-title{
        font-size: 5.88vw;
    }
    .trouble-item img {
        width: 23.53vw;
    }
    .balloon{
        font-size: 3.29vw;
    }

    .cta-main{
        font-size: 1rem;
    }
    .cta-main span {
        font-size: 1.375rem;
    }
    .cta-sub {
        font-size: 0.75rem;
    }


    /*特徴*/
    #strength {
        padding: 2.5rem 0;
    }
    .strength_txt p{
        line-height: 30px;
    }


    /*コース案内*/
    #course {
        padding: 2.5rem 0;
    }
    .calendar_img{
        width: 21.58vw;
        top: -8vw;
        left: 3vw;
    }
    .full_support{
        font-size: 1.286rem;
    }

    /*カリキュラム*/
    .curriculum{
        padding:2.5rem 0;
    }
    .curriculum_ttl{
        font-size: 1.286rem;
    }
    .curriculum_img {
        width: 55.5vw;
    }
    .curriculum_btn{
        margin: 1.25rem auto 0 auto;
    }
    .btn_small{
        font-size: 0.857rem;
    }
    .btn_big{
        font-size: 1rem;
    }


    /*講師・オーナー紹介*/
    .teacher{
        padding: 2.5rem 0 3.75rem 0;
    }
    .teacher_txt {
        margin-top: 1rem;
    }


    /*動画*/
    .cta-title {
        font-size: 2.143rem;
    }
    .benefit-head{
        font-size: 1rem;
    }
    .cta-right {
        height: 70.59vw;
    }
    .cta-right video {
        object-position: 10% 42%;
    }


    /*お問い合わせ*/
    .contact_card.contact_tel {
        margin-bottom: 1.25rem;
    }
    .tel_link{
        pointer-events: all;
    }
    .contact_form_wrap{
        margin-top:1.25rem;
    }
    .contact_form{
        margin: 1.25rem auto 0 auto;
    }


    /*追従CTA*/
    .fixed-cta-text{
        font-size: 0.857rem;
    }
    .back-to-top{
        top: -83%;
    }
}


@media(max-width:375px){
    /*追従CTA*/
    .fixed-cta-btn {
        width: 80%;
        font-size: 3.73vw;
    }
    .fixed-cta-text{
        margin-bottom:0.5rem;
    }
    
}