/* 共通 */
*{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: lighter;
  color: #fff;
  line-height: 150%;
  background-color: #074EA1;
 }

 .pc {
   display: block;
 }
 @media screen and (max-width: 768px){
  .pc {
    display: none;
  }
 }

 .sp {
  display: none;
}
@media screen and (max-width: 768px){
 .sp {
   display: block;
 }
}



 /*-------PC-------*/
 /* 見出し */
 .h3_title{
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 8px;
 }

h3{
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom: 24px;
  font-weight:600;
  font-size: 32px;
  color: #fff;
  align-items: center;
}

/* 強調段落*/
.descript_sec{
  color: #fff;
  line-height: 200%;
text-align: center;
padding-top: 40px;
font-weight: 600;
}

span{
  font-weight: 600;
  color: #fff;
}

/* 数字見出し*/
.number{
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #fff;
}

/* フォント */

.title_24px{
  font-size: 24px;
  font-weight: 600;
}
.title_20px{
  font-size: 20px;
  font-weight: 600;
}
.title_16px{
  font-size: 16px;
}
.text_12px{
  font-size: 12px;
}
.caption_8px{
  font-size: 8px;
}

 /* MV以下sec スペーシング */
 section{
  background-color: #074EA1;
  padding: 100px 20%;
}

 /* スペース */
 .space_right_8px{
  padding-right: 8px;
 }

 .space_left_8px{
  padding-left: 8px;
 }

 .space_bottom_16px{
  padding-bottom: 16px;
 }


 .space_bottom_48px{
  padding-bottom: 48px;
 }

/* ヘッダー */
header {
  background-color: #074EA1;
  color: rgb(255, 255, 255);
  padding: 16px 24px;

  }
h1 {
    background-color: #074EA1;
    color: rgb(255, 255, 255);
    font-weight: 600;
    }

/* MV */
.MV{
position: relative;
height: 100%;
background:
linear-gradient(-60deg,rgba(0, 149, 255, 0) 40%, #1c2dc43b 30%, rgba(27, 141, 255, 0.783) 65%),
url("../img/bg-02.jpg") center center/cover;
color: #ffffff;
padding: 100px 15%;
border: 1px dotted #000;
}

h2{
font-size: 54px;
font-family: "Zen Antique", serif;
font-weight: 600;
font-style: bold;
background: linear-gradient(transparent 70%, #0b38a1 0%);
display: inline;
}

.MV_subtitle{
  font-size: 20px;
  margin: 16px 0px;
  font-weight: 600;
  color:rgb(11, 56, 161);

}

.MV_text{
  width: 340px;
  font-size: 18px;
  font-weight: 600;
  color:rgb(11, 56, 161);
}

.MV::before {
  content: "";
  display: inline-block;
  background: url(../img/ill-23.png);
  background-size: cover;
  width: 360px;
  height: 308px;
  position: absolute;
  right: 16px;
  bottom: 0;
  margin: 2%;

}

/* MVイメージ画像のTB */
@media screen and (min-width:768px) and ( max-width:1024px){
  .MV::before {
    content: "";
    display: inline-block;
    background: url(../img/ill-23.png);
    background-size: cover;
    width: 260px;
    height: 218px;
    position: absolute;
    right: 16px;
    bottom: 0;
    margin: 2%;

  }
}

/* こんな悩みありませんか？ */

.problem_box1,.problem_box2{
  display: flex;
}

.problem1{
  display: flex;
  flex-direction: column;
  padding: 2%;
  background-color: #04204f;
  color: #fff;
  align-items: center;
  margin: 8px;
  border-radius: 8px;
  width: 526px;
  align-items: flex-start;
}


.problem_img{
  width: 100%;
  padding-top: 2%;
  padding-bottom: 10%;
}

/* サービスについて・特徴*/
.service{
  background-image: linear-gradient(180deg,#1A6EAB , #3d81da);

}
.service_title{
display: flex;
padding-bottom: 16px;
}

.service_sec{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.service_box{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 66%;
  margin-bottom: 4%;
  justify-content: center;
}


.service_img{
 width: 100%; /* 画像の横幅を526pxに固定 */
  height: auto; /* 幅に合わせて自動的に高さを調整 */
  display: block; /* 画像をブロック要素として表示 */
  margin: 0 auto; /* 横方向に中央寄せ */;
}

.service_number{
  display: flex;
  flex-direction: column;
}


/* スケジュール　schedule */
.schedule{
  background-image: linear-gradient(180deg,#1A6EAB , #3d81da);
}

.schedule_box{
  display: flex;
  padding: 2% 9%;
  align-content: flex-start;
  align-items: center;
  font-weight: 600;
}

.schedule_box > p {
  width: 50%;
}
@media screen and (max-width: 768px){
  .schedule_box > p {
    width: unset;
  }
}

.schedule_label{
  display: flex;
  background-color: #223A70;
  color: #ffffff;
  border-radius: 8px;
  padding: 0 8px;
  margin-right: 24px;
  width: 240px;
  height:40px ;
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* サービスの効果 */

.benefit_sec{
  display: flex;
  flex-direction: column;
}

.benefit_box{
  display: flex;
  margin-top: 20px;
  padding-right: 4%;
  padding-left: 4%;
  background-color: #04204F;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  border-radius: 8px;
}

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

.benefit_img{
width:80px;
height: 80px;
}

/* 講師の紹介 */
.profile{
background-color: #37537aad;
background-position: center;
background-size: cover;
}

.profile_sec{
  display: flex;
  flex-direction: column;
}
.profile_box{
  width: 100%;
  height: auto;
  padding: 24px 0;
  margin: 1%;
  display: flex;
  text-align: center;
  border-radius: 16px;
  align-items: center;
}

.profile_img{
  width: 480px;
  height: fit-content;
}

/* 特別特典 */
.IL{
  background-color: #04204F;}

.IL_box{
  display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row-reverse;
}

.IL_text{
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  font-weight: 600;
}

.IL_img{
  width: 360px;
  height: auto;
  padding-right: 5%;
}

/* 特別特典 */
.special_offer{
  background: linear-gradient(#306097, #05080C);
}

.special_offer_box{
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
}

.special_offer_text{
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}

.special_offer_img{
  width: 360px;
  height: auto;
}

/* 値段 */
.price{
background-image: url("../img/bg.jpg");
background-position: center;
background-size: cover;
border: 1px dotted #000;
text-align: center;
}

.place_img{
width: 70%;
height: auto;
}

.price_text_M{
  font-size: 32px;
  font-weight: 600;
}

.price_text_L {
  font-size: 72px;
  font-weight: 600;
  padding-left: 20px;
}

/* CTAボタン */

.btn_sec{
  padding: 48px 10%;
  text-align: center;
}


.btn{
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  max-width: 480px; /* ボタン幅 */
  position: relative;
  background: #0ABB0B; /* 背景色 */
  border: 2px solid #0ABB0B;
  padding: 1em 2em;
  font-weight: bold;
  color: #fff; /* 文字色 */
  text-decoration: none;
  text-align: center;
  transition-duration: 0.3s;
  box-shadow: 0px 8px 0 #538371; /* 影の距離・色 */
  border-radius: 8px;
}

.btn:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff; /* 矢印の色 */
  border-right: 2px solid #fff; /* 矢印の色 */
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
  border-radius: 8px;
}

/* マウスオーバーした際のデザイン */
.btn:hover {
  background: #fff; /* 背景色 */
  color: #4D9BC1; /* 文字色 */
}

.btn:hover:before {
  border-top: 2px solid #4D9BC1; /* 矢印の色 */
  border-right: 2px solid #4D9BC1; /* 矢印の色 */
}

/* 100名限定 */

.limited{
  text-align: center;
  background: linear-gradient(#306097, #05080C);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.limited_img{
  width: 45%;
  height: auto;
}
/* FAQ */
/*ベース*/
.toggle {
	display: none;
}
.Label {		/*タイトル*/
	padding: 1em;
	display: block;
	color: #223A70;
	background: #ffffff;
  ;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #000000;
	border-right: 2px solid #000000;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}

/*フッター*/
footer{
  text-align: center;
  color: #fff;
  background-color: #16171C;
  padding: 16px 0;
  border-top: 1px solid #3b3b3b ;
}


 /*-------SP-------*/

 @media screen and (max-width: 768px){
 /* MV以下sec スペーシング */
 section{
  background-color: #074EA1;
  padding: 48px 16px;
}

 /* 見出し分 */
 h2{
  font-size: 32px;
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: bold;
  background: linear-gradient(transparent 70%, #0b38a1 0%);
  display: inline;
  }

 /* 見出し */
 .h3_title{
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 8px;
 }

h3{
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom: 24px;
  font-weight:600;
  font-size: 20px;
  color: #fff;
  align-items: center;
}

/* MV */
.MV{
  position: relative;
  height: 100%;
  background: linear-gradient(338deg, rgba(0, 149, 255, 0) 40%, rgba(28, 45, 196, 0.23) 30%, rgba(27, 141, 255, 0.783) 65%), url(../img/bg-02.jpg) center center / cover;
  color: #ffffff;
  padding-top: 32px;
  padding-bottom: 200px;
  padding-left: 16px;
  padding-right: 16px;
  }

  h2{
  font-size: 32px;
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: bold;
  background: linear-gradient(transparent 70%, #0b38a1 0%);
  display: inline;
  }

  .MV_subtitle{
    font-size: 16px;
    margin-top: 12px;
    color:rgb(11, 56, 161);
  }

  .MV_text{
    width: 340px;
    font-size: 16px;
    margin: 24px 0px;
    color:rgb(11, 56, 161);
  }

  .MV::before {
    content: "";
    display: inline-block;
    background: url(../img/ill-23.png);
    background-size: cover;
    width: 210px;
    height: 178px;
    position: absolute;
    left: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -10%);
  }

 /* こんな悩みありませんか？ */

.problem_box1,.problem_box2{
  display: flex;
  flex-direction: column;
}

.problem1{
  display: flex;
    flex-direction: column;
    padding: 3%;
    background-color: #04204F;
    color: #fff;
    align-items: flex-start;
    margin: 0 auto 20px;
    width: 90%;
    border-radius: 8px;
}

.problem_img{
  width: 100%;
  height: 80px;
  padding-top: 2%;
  padding-bottom: 10%;
}

/* サービスについて・特徴*/

.service_sec{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service_box{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  margin-bottom: 10%;
}
.service_img{
 width: 100%; /* 画像の横幅を526pxに固定 */
  height: auto; /* 幅に合わせて自動的に高さを調整 */
  display: block; /* 画像をブロック要素として表示 */
  margin: 0 auto; /* 横方向に中央寄せ */;
}

.service_number{
  display: flex;
  flex-direction: column;
}

/* サービスの効果 */

.benefit_sec{
  display: flex;
  flex-direction: column;
}

.benefit_box{
  display: flex;
  margin-top: 20px;
  padding-right: 4%;
  padding-left: 4%;
  background-color: #04204F;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  border-radius: 8px;
}

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

.benefit_img{
width:80px;
height: 80px;
}

.benefit .title_16px{
  font-size: 12px;
  font-weight: 600;
  width: 70%;
  padding-left: 3%;
}

/* 100名限定 */

.limited{
  text-align: center;
  background: linear-gradient(#306097, #05080C);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.limited_img{
  width: 75%;
  height: auto;
  padding-top: 5%;
}

/* 値段 */
.price{
  background-image: url("../img/bg.jpg");
  background-position: center;
  background-size: cover;
  border: 1px dotted #000;
  text-align: center;
  }

  .price_text_M{
    font-size: 16px;
    font-weight: 600;
  }

  .price_text_L {
    font-size: 40px;
    font-weight: 600;
  }

  .price_title_XL{
    font-size: 48px;
    font-family: "Zen Antique", serif;
    font-weight: 400;
    font-style: bold;
    background: linear-gradient(transparent 70%, #0073b2 0%);
    display: inline;
  }


/* CTAボタン */

.btn_sec{
  padding: 24px 10%;
  background-color: #16171C;
  text-align: center;
}


.btn{
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  max-width: 80%; /* ボタン幅 */
  position: relative;
  background: #0ABB0B; /* 背景色 */
  border: 2px solid #0ABB0B;
  padding: 1em 2em;
  font-weight: bold;
  color: #fff; /* 文字色 */
  text-decoration: none;
  text-align: center;
  transition-duration: 0.3s;
  box-shadow: 0px 8px 0 #538371; /* 影の距離・色 */
  border-radius: 8px;
}

.btn:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff; /* 矢印の色 */
  border-right: 2px solid #fff; /* 矢印の色 */
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
  border-radius: 8px;
}


/* 講師の紹介 */
.profile{
  background-color: #37537aad;
  background-position: center;
  background-size: cover;
  }

  .profile_sec{
    display: flex;
  }
  .profile_box{
    width: 100%;
    height: auto;
    padding: 24px 0;
    margin: 1%;
    display: flex;
    text-align: center;
    border-radius: 16px;
    flex-direction: column;
  }

  .profile_img{
    width: 260px;
    height: fit-content;
  }

  /* スケジュール　schedule */

.schedule_box{
  display: flex;
  flex-direction: column;
}

.schedule_label{
  display: flex;
  background-color: #223A70;
  color: #ffffff;
  border-radius: 8px;
  padding: 4px 12px;
  margin: 8px;
  width: 100%;
  height: 40px;
  text-align: center;
  justify-content: center;
}

  /* 特別特典 */

  .IL_box{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }

  .IL_text{
    display: flex;
  }

  .IL_img{
    padding-top: 24px;
    width: 100%;
    height: auto;
  }

  /* 特別特典 */

.special_offer_box{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.special_offer_text{
  display: flex;
}

.special_offer_img{
  padding-top: 24px;
  width: 100%;
  height: auto;
}
 }

 /* 講師の紹介 */

.profile_box{
  display: flex;
  align-items: left;
  background: linear-gradient(135deg, #155AA8 7%, #000000 45%);
  padding: 4% 2%;
  border-radius: 8px;
  width: auto;
}

.profile_text{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
  margin-right: 60px;
}
@media screen and (max-width: 768px){
  .profile_text{
    margin-right: unset;
  }
}

.profile_img{
  width: 50%;
  height: auto;
}

/* ////////////////////////// */