@charset "utf-8";

h2 {
    font-size: clamp(18px, 3vw, 34px);
    margin-bottom: 0.5em;
    line-height: 1.2em;
    color: #1b71ba;
    text-align: center;
    font-weight: 900;
}


h3 {
font-size:clamp(16px, 1.6vw, 28px);
  margin-bottom: 30px;
  line-height: 1.3em;
  color: #1b71ba;
  text-align: center;
  letter-spacing: 0.1em;
font-weight: 900;
}
h4 {
    font-size: 18px;
    color: #666;
    text-align: center;
    font-weight: 600;
    line-height: 1.8em;
}
h5 {
	font-size:min(190%,23px);
  margin-bottom: 0.3em;
  line-height: 1.2em;
  color: #1b71ba;
  text-align: center;
font-weight: 800;
}

h6 {
    font-size: min(1.1vw,18px);
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}


/*----------------------------------------------------
　MV
----------------------------------------------------*/

/*---------- ---
  MOVIE
---------------*/
#video-area{
	position: relative;
	overflow: hidden;
    height: 55vw;
	max-height: 700px;
}

#video{
	/*天地中央配置*/
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*縦横幅指定*/
    width: 100%; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 80.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
	z-index: 1;
}

#movie video{
	width: 800px;
	max-width: 80%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
	margin-bottom: 20px;
}

/*----------------------------------------------------
　キャッチ
----------------------------------------------------*/
#catch{
    position: absolute;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
    width: 80%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}

#catch img{
    z-index: 2;
}

/*----------------------------------------------------
　インフォメーション
----------------------------------------------------*/
#info{
    padding-top: 6em;
    padding-bottom: 4em;
}
#info　h2 {
font-size:clamp(18px, 3vw, 280%);
  margin-bottom: 1em;
  line-height: 1.2em;
  color: #1b71ba;
  text-align: center;
  letter-spacing: 0.1em;
font-weight: 900;
}

#info h4{
    margin-bottom: 4em;
}

#info #info_main{
	display: flex;
    margin-bottom: 5em;
    justify-content: space-between;
    border-bottom: 1px solid #c5c5c5;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4em;
	
}

#info #info_main div{
  width :31% ;
}

#info #info_main div img{
    margin-bottom: 1em;
    border-radius: 1em;
}

#info #info_main div h5{}

#info #info_main div p{
	display: block;
	padding-left: 3%;
	padding-right: 3%;
	text-align: justify;
	height: 12em;
    font-size: min(1.2vw, 15px);
    line-height: 1.6em;
}
#info #info_sub{
	display: flex;
	justify-content: center;
}
#info #info_sub>div{
	display: flex;
    width: 40%;
	margin-right: 3%;
	margin-left: 3%;
	justify-content: space-between;
	align-items: center;
}
#info #info_sub div div:nth-child(1){
    width: 26%;
}
#info #info_sub div div:nth-child(2){
    width: 70%;
}
#info #info_sub div img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#info #info_sub div h5{
    width: 65%;
    display: block;
    text-align: left;
}

/*----------------------------------------------------
　コース紹介
----------------------------------------------------*/
#course{
    width: 100%;
    margin-bottom: 8em;
    padding-top: 8em;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 8em;
    position: relative;
    top: 3em
}
#course::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #68c5f2;
    transform: skewY(-6deg);
    z-index: -1;
}
#course h2,#course h4{
    color: #FFFFFF;
	
}
#course h4{
    margin-bottom: 2em;	
}

#course .white_box{
    background-color: #FFFFFF;
    width: 80%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 1em;
    padding-top: 4em;
    padding-right: 4em;
    padding-bottom: 4em;
    padding-left: 4em;
    margin-bottom: 2em;
}

#course .white_box h4{
  color: #1b71ba;
}

#course .white_box .course_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3em;
	align-items: center;
}
#course .white_box .course_box div{
    width: 48.5%;
}

#course .white_box .course_box h5{
    text-align: left;
}

#course .white_box .course_box p{}

#course .white_box .course_box.right{}




#course .white_box .course_box{}



/*----------------------------------------------------
　お知らせ
----------------------------------------------------*/
#news{
	padding-top: 5em;
	padding-bottom: 3em;
	background-color: #e5ecef;	
}

#news_area{
	width: 49%;
	background: white;
	padding-top: 50px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 30px;
    border-radius: 1em;
}
#insta_area{
	width: 49%;
	background: white;
	padding-top: 50px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 30px;
    border-radius: 1em;
}

ul#newsList{
}
ul#newsList li{
    margin: 0;
    padding-top: 5px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0.8em;
    margin-bottom: 0.8em;
    border-bottom: 1px solid #cfcfcf;
    line-height: 140%;
    list-style-type: none;
    font-size: min(1.2vw, 16px);
}
#news a{
    color: #000000;
    text-decoration: underline;
}
#news a:hover{
    color: #4F4F4F;
    text-decoration: none;
}

.up_ymd{
    font-weight: 500;
    width: 11em;
}

.catName{
    display: inline-block;
    padding-top: 0.3em;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-bottom: 0.5em;
    line-height: 100%;
    margin-top: 0;
    margin-right: 0.8em;
    margin-left: 2px;
    margin-bottom: 0;
    font-weight: 400;
    background-color: #30A854;
    color: #FFFFFF;
    border-radius: 0.2em;
    width: 12em;
    text-align: center;
	font-size:90%;
}
.cat-0 .catName{
    background-color: #1C83D8;
}
.cat-1 .catName{
    background-color: #0CA83B;
}
.cat-2 .catName{
    background-color: #F36942;
}
.newMark{
    display: inline-block;
    padding-top: 0.2em;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-bottom: 0.2em;
    line-height: 100%;
    background: #F00;
    color: #fff;
    margin-left: 1em;
	font-size:90%;
    border-radius: 0.2em;
}
.title{
    font-weight: 500;
    color: #000000;
}
.line2{
	margin-top: 10px;
}

.eapps-widget-toolbar{
    display: none !important;
}
#eapps-instagram-feed-1>a{
    display: none !important;
}

.eapps-instagram-feed-posts-grid-load-more-container.eapps-instagram-feed-posts-grid-load-more-enabled {
    display: none !important;
}


/*----------------------------------------------------
　レスポンシブ設定768以下
----------------------------------------------------*/
@media screen and (max-width: 768px) {

/* テキスト
----------------------------------------------*/
h2 {
font-size:160%;
  margin-bottom: 0.4em;
  line-height: 1.2em;
  color: #1b71ba;
  text-align: center;
font-weight: 900;
}

h3 {
font-size:160%;
  margin-bottom: 0.5em;
}
h4 {
    font-size: 115%;
    font-weight: 600;
    width: 96%;
    margin-right: auto;
    margin-left: auto;
  line-height: 1.7em;
}
h5 {
    font-size: 150%;
  margin-bottom: 0.3em;
  line-height: 1.2em;
  color: #1b71ba;
  text-align: center;
font-weight: 800;
}

h6 {
    font-size: 130%;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}
	
/*----------------------------------------------------
　MV
----------------------------------------------------*/
#mv{}

#mv img{
}

/*----------------------------------------------------
　キャッチ
----------------------------------------------------*/
#catch{
}

#catch img{
    width: 90%;
}

/*----------------------------------------------------
　インフォメーション
----------------------------------------------------*/
#info{
    padding-top: 3em;
    padding-bottom: 1em;
}

#info h4{
    margin-bottom: 3em;
}

#info #info_main{
    display: inherit;
    padding-bottom: 0em;
}

#info #info_main div{
    width : 100%;
    margin-bottom: 4.5em;
}

#info #info_main div img{
    margin-bottom: 1em;
    width : 90%;
}

#info #info_main div h5{}

#info #info_main div p{
    display: block;
    padding-left: 3%;
    padding-right: 3%;
    text-align: justify;
    height: auto;
	margin-bottom: 15px;
        line-height: 1.5em;
	font-size: 14px;
}

#info #info_sub{
        display: block;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
}
#info #info_sub>div{
        display: flex;
        width: 100%;
        margin-right: 0%;
        margin-left: 0%;
        align-items: flex-start;
        margin-bottom: 2em;
}
#info #info_sub div div:nth-child(1){
        width: 58%;
;
}
#info #info_sub div div:nth-child(2){
    width: 100%;
    padding-left: 3%;
    padding-right: 3%; 
}
#info #info_sub div img{
    width: 100%;
    height: auto;
    border-radius: 0%;
    margin-bottom: 0.5em;
}

#info #info_sub div h5{
    width: 100%;
    display: block;
    text-align: left;
    font-size: 130%;
}

#info #info_sub div p{
    width: 100%;
    text-align: left;
    font-size: 96%;
}

/*----------------------------------------------------
　コース紹介
----------------------------------------------------*/
#course{
    padding-top: 4em;
    padding-bottom: 1em;
}
#course h4{
}

#course .white_box{
    width: 96%;
    border-radius: 1em;
    padding-top: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-left: 2em;
    margin-bottom: 2em;
}

#course .white_box h3{
    margin-bottom: 0.2em;
}
#course .white_box h4{
    color: #1b71ba;
    width: 100%;
    margin-bottom: 1.5em;
}

#course .white_box .course_box {
    display: inherit;
    justify-content: space-between;
    margin-bottom: 3em;
    align-items: center;
}
#course .white_box .course_box:last-child {
    margin-bottom: 0em;
}
#course .white_box .course_box div{
    width: 100%;
    text-align: left;
}

#course .white_box .course_box img{
    margin-bottom: 0.5em;
}

#course .white_box .course_box h5{
    text-align: left;
}

#course .white_box .course_box p{}
    
 #course .white_box .course_box.right {
    display: flex;
     flex-direction: column;
     
    }

 #course .white_box .course_box.right div:nth-child(1){
    order: 2;
    }

 #course .white_box .course_box.right div:nth-child(2){
    order: 1;
    }




#course .white_box .course_box{}
	
/*----------------------------------------------------
　お知らせ
----------------------------------------------------*/
#news {
    padding-top: 3em;
    padding-bottom: 3em;
}
#news_area{
	width: 100%;
	padding-top: 30px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 30px;
	margin-bottom: 20px;
}
#insta_area{
	width: 100%;
	padding-top: 30px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 30px;
}
ul#newsList li {
    font-size: min(3.8vw, 19px);
}
}