@charset "utf-8";

/*
Theme Name: mmart
Theme URI: テーマのホームサイトのURL
Description: テーマの説明
Author: 作者の名前
Author URI: 作者のサイトのURL
Version: バージョン
*/


/*---------------------リセットcss-----------------*/

main, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; 
}

* {
      margin: 0px;
      padding: 0px;
  box-sizing: border-box;
}


html {
  /*font-family: 'Noto Sans','Noto Sans JP',YuGothic,'Yu Gothic',sans-serif;*/
  /*font-size: 15px;*/
  font-size: clamp(13px, 3vw, 16px);
  touch-action: manipulation;
  box-sizing: border-box;
  height:100%;
  width:100%;
}

/*chromeで画像クリックする時に出る青い枠を消す*/
*:focus {
outline: none;
}
input{
  font-size: 16px;/*スマホ版でfont-size:16px未満の場合、入力欄が画面横幅いっぱいにフォーカスしてしまう*/
}



/*---------------------全ページ共通css-----------------*/

body {
  font-size: 1.3rem;
  line-height: 2.3rem;
  letter-spacing: 0.1rem;
  /*font-weight: 300;*/
  color: #000000;
  font-feature-settings: "palt";
  text-align: center;
  height:100%;
  width:100%;
  padding-top: 80px;/*ヘッダーの分だけ下げる*/
  font-family: sans-serif;

}
/*mma-pc用幅指定*/
.wrap{
  max-width: 700px;
  margin: 0 auto 100px;
  width: 100%;
}




/*サイトのタイトル消す*/
#header{
  display: none;
}


ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none; 
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none; 
}

img {
    max-width: 100%;
    max-height: 100%;
    height:auto;
    border-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0; 
}

a {
    text-decoration: none;
    transition: .3s ease-in-out;
}



a:hover, a:active {
    opacity: 0.7;
}

input,select,option {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    /*background-color: #fafafa;*/
    border: solid #000 1px;
    padding: 1rem;
}
button{
    cursor: pointer;
}

::-webkit-scrollbar{
  width: 2vmin;
  height:3px;
}

::-webkit-scrollbar-track{
  background: #fff;
  border-left: solid 1px #ececec;
}

::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #fff;
}

.text-black{
  color: #000000;
}


.show-more-content{/*アコーディオン表示に使用*/
    display:none;
}

@media screen and (min-width: 1000px){
.br-sp {display: none; }
}


@media screen and (max-width: 1000px) {

}

@media screen and (max-width: 1100px){
  
}



/* -----------------------------------------------

ヘッダーcss-mmart

----------------------------------------------- */


header {
  height: 80px;
  width: 100%;
  background-color: #000000;
  position: fixed;
  top: 0;
  margin: 0;
  z-index: 10;
  display: flex;
}

.header-logo{
  width: 80%;
  padding-left: 10px;
  max-width: 300px;
  margin-top: 25px;
}


nav {
  margin: 0 0 0 auto;
}

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pc{
  font-size: 1.1rem;
}

.pc a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  line-height: 80px;
  padding: 0 20px;
}

.sm {
  display: none;
  
}


/**********************************　
以下、ハンバーガーメニューの設定　
************************************/

@media (max-width: 1200px) {

  .pc {
    display: none;
  }

  #hamburger {
    background-color: transparent;  /*透明の背景*/
    position: relative;             /*ハンバーガーの横線の位置を決めるための基準*/
    cursor: pointer;                /*リンクを示すカーソルを表示（指差しマーク）*/
    margin: 0 0 0 auto;             /*左側に余白を作り、ハンバーガーメニューを右端に配置*/
    height: 80px;                   /*ヘッダーの高さと同じ60px*/
    width: 80px;                    /*高さと同じ幅*/
  }
  
  
  .icon span {
    position: absolute;       /*親要素である#hamburgerを基準に位置を指定*/
    left: 40px;               /*#hamburger内の左がら15pxに横線を配置（幅が60pxなので右からも15px）*/
    width: 30px;              /*横線の幅が30px*/
    height: 4px;              /*横線の高さが4px*/
    background-color: white;  /*横線を白色*/
    border-radius: 8px;       /*横線の両端の角に丸みを持たせる*/
    transition: ease 0.75s;   /*変化の時間（easeは初期値）*/
  }
  
  
  .icon span:nth-of-type(1) {
    top: 25px;
  }
  .icon span:nth-of-type(2) {
    top: 38px;
  }
  .icon span:nth-of-type(3) {
    bottom: 25px;
  }

  .close span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 38px;
  }

  .close span:nth-of-type(2) {
    opacity: 0;
  }

  .close span:nth-of-type(3) {
      transform: rotate(-45deg);
      top: 38px;
  }

.sm {
  top: 80px;  /*headerの余白分*/
  left: 0px;  /*headerの余白分　ヘッダーには左右に15px余白があるので、headerの子要素となる.smは15px分内側に設置されます。その余白を埋めるために左に寄せる。*/
  position: absolute; /*絶対配置　top　leftからの位置を絶対配置する*/
  z-index: 10;
  width: 100%;
  background-color: #000000;
}

.sm ul {
  flex-direction: column;	/*ulのflexboxを縦並びにする*/  
  text-align: right;
  color: #fff;
}

  .sm li{
    padding: 10px;
    list-style: none;
    border-bottom: dashed 1px #999;
  }
  
  .sm li:last-child {
  border: none;
}
  

.sm a {
  text-align: center;
  color: #fff;
  }
}


/* -----------------------------------------------

トップページmmart

----------------------------------------------- */


/* トップに戻るボタン右下に固定 */
#page-top a {
  /*background-color: #000;
  color: #fff;
  border-radius: 50%;*/
  bottom: 20px;
  height: 60px;
  width: 60px;
  position: fixed;
  right: 30px;
  line-height: 70px;
  font-weight: bold;
}

.top-taikenn a{
/*  color: #fff;
  background-color: #000;
  font-size: 1.5rem;
  border-radius: 40px;
  */
  width: 14em;
  bottom: 15px;
  position: fixed;
  left: 30px;
}







main {
  /*margin-top: 80px;*/
  /*ヘッダーと同じ幅いるかもだけど*/
}
.top-margin{
  margin-top: 80px;
}

.top-margin-2{
  margin-top: 50px;
}

.content-wrap{
  width: 90%;
  margin: 0 auto 50px;
}

.content-wrap-2{
  width: 90%;
  margin: 0 auto 30px;
}


h1{
  font-size: 2.8rem;
  font-family: "Arial";
  margin: 20px 0 10px;
}

h2{
  font-size: 2.5rem;
  font-family: "Arial";
  margin-bottom: 7px;
}

hr{
  border-top: 1px solid #000;
  margin-bottom: 10px;
}

.sing{
  width: 220px;
  margin-bottom: 30px;
}

.txt-wrap{
  color: #7C7A7A;
  margin: 0 auto 30px;
  width: 95%;
  
}

.main-contents .txt-wrap{
  text-align: left;
  width: 100%;
}

.since-wrap{
  color: #000000;
  font-weight: 550;
  font-size: 1.6rem;
  
}

/* 左右に横線 */
.since {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.since::before,
.since::after {
  background-color: #000000; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 45px; /* 横線の長さ */
}
.since::before {
  margin-right: 15px; /* 文字との余白 */
}
.since::after {
  margin-left: 15px; /* 文字との余白 */
}

.scroll{
  width: 80px;
  margin: 60px auto 10px;
}

.scroll-2{
  width: 80px;
  margin: 30px auto 50px;
}



.furigana{
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  font-weight: 550;
  margin-bottom: 40px;

}

.left-h2{
  text-align: left;
}

.left-h3{
  text-align: left;
  font-weight: normal;
  font-size: 1.3rem;
  margin-bottom: 30px;
}

#top_movie{
  position: relative;
	padding-top: 56.25%; /* 16:9 アスペクト比 */
	height: 0;
}

#top_movie iframe{
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#top_movie_pic{
  width: 98%;
  margin: 0 auto 30px;
}

.before-back{
  background: #000;
  padding: 50px 0 30px;
  color: #fff;
  margin-bottom: 80px;
}

.before-h2{
  color: #fff;
  font-family: serif;
  font-size: 2.2rem;
  margin-bottom: 50px;
}

.before-img{
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
}

.before-container{
  color: #fff;
  display: flex;
  justify-content: space-between;
}


/*左矢印*/
.arrow-left {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 4em;
  height: 0.1em;
  background: currentColor;
  margin-right: 5px;
}

.arrow-left::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border: 0.1em solid currentColor;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
  transform-origin: top left;
  position: absolute;
  top: 50%;
  left: -0.05em;
  box-sizing: border-box;
}

/*右矢印*/
.arrow-right {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 4em;
  height: 0.1em;
  background: currentColor;
  margin-left: 5px;
}

.arrow-right::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  transform-origin: top right;
  position: absolute;
  top: 50%;
  right: -0.05em;
  box-sizing: border-box;
}

.center-h3{
  font-size: 1.4rem;
  font-weight: 550;
  margin-bottom: 30px;
}

.content-img{
  margin-bottom: 30px;
}

.lesson{
  text-align: left;
  margin-bottom: 7px;
  font-size: 1.8rem;
}

.month-lesson{
  width: 90%;
  margin: 40px auto 5px;
}

.month-lesson dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


.month-lesson dt {
  width: 35%;
  margin-bottom: 15px;
  border-bottom: 1px solid #000;
  display: inline-block;
  text-align: left;
}

.month-lesson dd {
  width: 65%;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #000;
  display: inline-block;
}

/*丸*/
.circle{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7C7A7A;
  margin: 0 10px 3px 5px;
}

.lesson-txt{
  color: #7C7A7A;
  font-size: 1rem;
  line-height: 1.4rem;
  text-align: left;
  margin: 0 auto 50px;
  width: 90%;
}

.week-lesson {
  border-collapse: collapse;
  margin: 40px auto 10px;
  width: 90%;
}

.week-lesson th, .week-lesson td {
  border: 1px solid #000;
  padding: 0.8em;
  line-height: 1.6rem;
}
.week-lesson th {
  background-color: #7C7A7A;
  color: #fff;
  font-weight: normal;
  font-size: 1.7rem;
  text-align: center;
  width: 20%;
  min-width: 2em;
}

.tution-table{
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto 20px;
}

.tution-table th {/*table内のthに対して*/
  font-weight: normal;
  text-align: left;
  padding-left: 1em;
}

.tution-table td{
  text-align: left;
  border-bottom: 1px solid #000;
  padding-top: 10px;
}
.tution-td1,.tution-td2{
  width: 50%;
}

.tution-txt{
  text-align: left;
  line-height: 1.6rem;
  margin: 0 auto 20px;
  width: 90%;
}

.access-text{
  text-align: left;
  font-size: 1.2rem;
}

.zyuusy-bold{
  font-size: 1.5rem;
  font-weight: bold;
  margin: 50px auto 10px;
}

.zyuusy-gray{
  color: #7C7A7A;
}
address{
  font-style:normal;
  color: #7C7A7A;
}

.see-more{
  color: #000;
  letter-spacing: 0.2px;
  border-radius: 30px;
  border: solid 1px #000;
  display: inline-block;
  padding: 0 30px;
  margin-bottom: 70px;
}

.see-more a{
  color: #000;
}

.white-see-more{
  letter-spacing: 0.2px;
  border-radius: 30px;
  border: solid 1px #fff;
  display: inline-block;
  padding: 0 30px;
  margin-bottom: 70px;
}

.white-see-more a{
  color: #fff;
}

.access-text{
  letter-spacing: -0.03em;
}

.access-text a{
  color: #7C7A7A;
}

.google-map{
  color: #000;
  letter-spacing: 0.2px;
  border-radius: 30px;
  border: solid 1px #000;
  display: inline-block;
  padding: 5px 30px;
  margin: 20px auto 40px;
  font-size: 1.1rem;
}

.google-map a{
  color: #000000;
  
}


.instagram img{
  width: 45px;
}


/*--------------------------------------------------------------
トップ授業プログラムスライドのcss
--------------------------------------------------------------*/

.top-program-slider-wrap{
  margin-bottom: 50px;
}
.top-program-slider {
  width: 100%;
  margin: 30px auto 0;
}
.top-program-slider .slick-list {
  padding: 0 20% 0 0!important;
}
.top-program-slider li {
  margin-bottom: 30px;
}

.top-program-slider li figcaption {
  margin: 10px 0 0;
}
/*
@media screen and (max-width:640px){
  .slider {
    width: 100%;
  }
}
*/

/*ドット長方形にする*/
.dots-wrap {
    display: flex;
    justify-content: center;
}

.dots-wrap li {
    width: 20%;
    height: 4px;
    background: #DBDBDB;
    cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: #000;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}







/*--------------------------------------------------------------
トップ授業プログラムスライドのcssここまで
--------------------------------------------------------------*/




/*--------------------------------------------------------------
レッスンコンテンツのcss
--------------------------------------------------------------*/

.lesson-sli-wrap{
  width: 100%;
  margin: 13vmin auto;
}

/*
.lesson .slick-slide {
  transition: .3s ease;
  transform: scale(.85);
}
.lessonp-slick .slick-current {
  transform: scale(1);
}*/

.lesson-slick{
  margin-bottom: 50px;
}

.lesson-slick a{
    display: block;
}

.lesson-slick img{
  width: 100%;
  height: auto;
}

.lesson-slick .prev-arrow {
  left: 10%;
  z-index: 10;
  max-width: 50px;
  width: 30%;
}

.lesson-slick .next-arrow {
  right: 10%;
  z-index: 10;
  max-width: 50px;
  width: 30%;
}


.mypattern .slick-slide {
  width: 100%;
  margin: 2vw;
}

.lesson-sku-wrap{
  padding: 20px;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgb(135 135 135 / 15%);
}

.lesson-sku-content{
  margin: 20px auto;
  font-size: 100%;
}

.lesson-sku-title{
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 7px;
  color: #000;
}

.furigana-lesson{
  display: inline-block;
  color: #fff;
  background-color: #000;
  font-size: 0.8rem;
  border-radius: 30px;        /* 角丸指定 */
  line-height: 1.5rem;
  margin: 0 auto 10px;
  padding: 1px 20px;
}

.lesson-sku-txt{
  font-size: 1rem;
  line-height: 1.5rem;
  color: #7C7A7A;
}






.lesson-sku-wrap{
  transition: .3s ease;
  /*transform: scale(.85);*/
  /*スライドのサイズ*/
}

.slick-slide.slick-current .lesson-sku-wrap,
.slick-slide.is-active-next .lesson-sku-wrap {
 /* transform: scale(1);*/
  /*スライドのサイズ*/
}

@media screen and (max-width: 768px){
  
  .lesson-sli-wrap{
    /*margin-bottom: 25vmin;*/
  }
  
  .mypattern .slick-slide {
    margin: 6vw 2vw 5vw;
}

  .lesson-slick .prev-arrow {
  left: 15%;
  z-index: 10;
  max-width: 40px;
}

.lesson-slick .next-arrow {
  right: 15%;
  z-index: 10;
  max-width: 40px;
}
  
  
}


/*--------------------------------------------------------------
レッスンコンテンツのcssここまで
--------------------------------------------------------------*/


/*--------------------------------------------------------------
レクチャーコンテンツのcss
--------------------------------------------------------------*/

.lecturer-sli-wrap{
  width: 100%;
  margin: 13vmin auto;
}

.lecturer-slick{
  margin-bottom: 50px;
}

.lecturer-slick a{
    display: block;
}

.lecturer-slick img{
  width: 100%;
  height: auto;
}

.lecturer-slick .prev-arrow {
  left: 10%;
  z-index: 10;
  max-width: 50px;
  width: 30%;
}

.lecturer-slick .next-arrow {
  right: 10%;
  z-index: 10;
  max-width: 50px;
  width: 30%;
}


.lecturer-sku-wrap{
  padding: 20px;
  border-radius: 1rem;
  background-color: #fff;
}

.lecturer-sku-content{
  margin: 20px auto;
  font-size: 100%;
}

.lecturer-sku-title{
  font-weight: bold;
  font-size: 1.3rem;
  color: #000;
  letter-spacing: 0;
}


.lecturer-sku-txt{
  font-size: 1rem;
  line-height: 1.5rem;
  color: #7C7A7A;
}






.lecturer-sku-wrap{
  transition: .3s ease;
  /*transform: scale(.85);*/
  /*スライドのサイズ*/
}

.slick-slide.slick-current .lesson-sku-wrap,
.slick-slide.is-active-next .lesson-sku-wrap {
  /*transform: scale(1);*/
  /*スライドのサイズ*/
}

@media screen and (max-width: 768px){
  
  .lecturer-sli-wrap{
    /*margin-bottom: 25vmin;*/
  }

  .lesson-slick .prev-arrow {
  left: 15%;
  z-index: 10;
  max-width: 40px;
}

.lesson-slick .next-arrow {
  right: 15%;
  z-index: 10;
  max-width: 40px;
}
  
}


/*--------------------------------------------------------------
レクチャーコンテンツのcssここまで
--------------------------------------------------------------*/



/*--------------------------------------------------------------
卒業生コンテンツのcss
--------------------------------------------------------------*/


.graduate-sku-wrap img{
  filter: drop-shadow(1px 1px 5px #dcdcdc);
}

.portfolio{
  color: #fff;
  background-color: #000;
  font-size: 0.9rem;
  border-radius: 30px;        /* 角丸指定 */
  line-height: 2rem;
  width: 12em;
  margin: 10px auto 10px;
}

  .graduate-sli-wrap{
  margin-bottom: 90px;
  }
}

/*--------------------------------------------------------------
卒業生コンテンツのcssここまで
--------------------------------------------------------------*/


/*--------------------------------------------------------------
オンラインクラスページのcss
--------------------------------------------------------------*/

.container{
  margin-bottom: 50px;
}

.slider,.slider-2{
  
  margin: 30px auto 30px;
  max-width: 100%;
  width: 100%;
}
.slick-img img {
  height: auto;
  width: 100%;
}

.online-h3{
  margin-bottom: 30px;
  font-weight: 550;
  font-size: 1.8rem;
}

.step-back{
  background-color: #000;
  text-align: left;
  color: #fff;
  margin: 50px auto 50px;
}

.step-back h3{
  padding: 25px 0 0 1.5rem;
  font-size: 2.1rem;
  
}

.step-back p{
  font-size: 1.2rem;
  padding: 0 0 25px 1.5rem;
}

.online-step{
  margin-bottom: 40px;
}
.maru {
 height:35px;
 width:35px;
 border-radius:50%;
 line-height:35px;
 text-align:center;
 background-color: #000;
  color: #fff;
  padding-left: 1px;
}

/* 左右に横線 */
.step-yokosen {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
  margin-bottom: 30px;
}
.step-yokosen::before,
.step-yokosen::after {
  background-color: #000000; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 38%; /* 横線の長さ */
}
.step-yokosen::before {
  margin-right: 15px; /* 文字との余白 */
}
.step-yokosen::after {
  margin-left: 15px; /* 文字との余白 */
}


.online-step h4{
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.online-step img{
  margin: 20px 0 20px;
}

.furigana-online{
  display: inline-block;
  color: #fff;
  background-color: #000;
  font-size: 0.9rem;
  border-radius: 30px;        /* 角丸指定 */
  line-height: 1.5rem;
  margin: 0 auto 30px;
  padding: 2px 25px;
}

.movie-wrap{
  font-size: 2.4rem;
  margin: 50px auto 10px;
  letter-spacing: 0.09px;
}

.movie-wrap p{
  margin-bottom: 40px;
}

.online-h2{
  font-size: 2.1rem;
  margin: 60px auto 7px;
}

.online-lesson-table {
  border-collapse: collapse;
  margin: 30px auto 10px;
  width: 95%;
}

.online-lesson-table th, .online-lesson-table td {
  border: 1px solid #000;
  padding: 10px;
  line-height: 1.6rem;
}
.online-lesson-table th {
  background-color: #7C7A7A;
  color: #fff;
  font-weight: normal;
  font-size: 1.2rem;
  text-align: center;
  width: 30%;
  min-width: 2em;
}

.online-lesson-table td{
  font-size: 1.2rem;
}

.online-tution-table{
  margin: 0 auto 10px;
  width: 95%;
  font-size: 1.2rem;
}

.online-tution-table th,.online-tution-table td{
  border: 1px solid #000;
  padding: 10px;
}

.online-tution-table .tution-td1-2{
  background-color: #7C7A7A;
  color: #fff;
}

.online-tution-table .tution-td2{
  padding: 0 30px
}

.online-tution-table .tution-td1-2,.online-tution-table .tution-td1{
  width: 30%;
}

.online-tution-table th{
  font-weight: normal;
}


  /*--------------------------------------------------------------
オンラインクラスのcssここまで
--------------------------------------------------------------*/



/*--------------------------------------------------------------
レクチャーページのcss
--------------------------------------------------------------*/

.lecture-slider {
  margin-inline: auto;
  max-width: 100%;
  width: 100%;
}

.lecture-slider-img{
  margin: 0 10px;
  filter: drop-shadow(1px 1px 2px #dcdcdc);
}
.lecture-slider-img img{
  height: auto;
  width: 100%;
}

.lecture-flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 95%;
  margin: 50px auto 0;
}

.lecture-flex img{
  max-width: 110px;
  filter: drop-shadow(1px 1px 5px #dcdcdc);
}

.lecture-name{
  text-align: left;
  margin-top: 10px;
  letter-spacing: -0.02rem;
  
}

.lecture-name p{
  color: #7C7A7A;
}

.lecture-left{
  text-align: left;
  margin-left: 20px;
  margin-bottom: 10px;
  font-size: 1.6rem;
}

.lecture-txt{
  text-align: left;
  width: 90%;
  margin: 0 auto 70px;
  font-size: 1.2rem;
  line-height: 1.9rem;
  letter-spacing: -0.01rem;
}



/*--------------------------------------------------------------
レクチャーページのcssここまで
--------------------------------------------------------------*/


/*--------------------------------------------------------------
授業内容ページのcss
--------------------------------------------------------------*/

.class-wrap{
  margin-bottom: 150px;
}

/*--------------------------------------------------------------
授業内容ページのcssここまで
--------------------------------------------------------------*/




/*--------------------------------------------------------------
授業プログラムページのcss
--------------------------------------------------------------*/

.program-line{
  padding: 10px 0 7px;
  display: inline-block;
  border-bottom: solid 2px #000;
  font-weight: 590;
  font-size: 1.6rem;
}

.program-h3{
  margin: 10px auto 30px;
}

.program-h2{
  font-weight: 550;
  letter-spacing: 0.5rem;
  margin-bottom: 15px;
}

.program-furigana{
  color: #7C7A7A;
  font-weight: bold;
  font-size: 1.7rem; 
  margin-bottom: 30px;
}

.program-black,.program-black span{
  color: #000;
}

.left-txt{
  text-align: left;
}

.program-list{
  margin: 40px auto 50px;
  text-align: left;
  font-size: 1.2rem;
  line-height: 2rem;
}

.program-background{
  color: #fff;
  background-color: #000;
}

.program-background p{
  padding: 20px 0;
  font-size: 1.2rem;
}

.triangle {
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 35px solid #000;
  margin: 0 auto 40px;
  }

.counseling-h2{
  font-size: 3.2rem;
}

.txt-magin{
  margin: 40px auto 70px;
}

.txt-magin-2{
  margin-bottom: 70px;
}

.program-img{
  width: 170px;
  margin-bottom: 20px;
}


/*--------------------------------------------------------------
授業プログラムページのcssここまで
--------------------------------------------------------------*/


/*--------------------------------------------------------------
申し込みフォームのcss
--------------------------------------------------------------*/


.form-back{
  max-width: 100%;
  margin: 50px auto;

  background-color:#E9E9E9;
  border-radius: 15px;
  text-align: center;
}

.form-back th,.form-back td{
  display: block;
/*  text-align: left;*/
  font-size: 1.2rem;
}

.form-table{
  text-align: center;
  margin: 0 auto;
}



.form-back th{
  margin: 20px 0 5px 15px;
  font-weight: normal;
  text-align: left;
}

.form-back tr{
  text-align: center;
  display: block;
}

.form-back td input[type="text"],.form-back td input[type="tel"],.form-back td input[type="email"]{
  width: 90%;
  border-radius: 10px;
  line-height: 2rem;
  padding: 5px 10px 3px 10px;
  font-size: 1.2rem;
}


.form-hissu{
  background: #000;
  color: #fff;
  padding: 5px 5px 5px 6px;
  font-size: 0.8rem;
  margin-left: 5px;
}

.wpcf7-list-item {
  margin-top:10px;
  display: block;
  text-align: left;
}

.form-back td{
  line-height: 1.3rem;
}

.form-back p input[type="submit"]{
  background-color: #000;
  display: block;
  color: #fff;
  margin: 20px auto 0;
  text-align: center;
  border-radius: 30px;
  padding: 5px 20px;
  font-size: 1.4rem;
}

/* テキストエリアのスタイル */
.wpcf7-form textarea{
  border-radius: 10px;
  width: 90%;
  height: 200px;
  padding: 5px 10px 3px 10px;
  font-size: 1.2rem;
  resize: vertical;
  text-align: left;
}

.wpcf7-form select{
  width: 90%;
  border-radius: 10px;
  line-height: 2rem;
  padding: 7px 10px 7px 10px;
  font-size: 1.2rem;
}



/*--------------------------------------------------------------
申し込みフォームcssここまで
--------------------------------------------------------------*/

.con-black-button{
  display: inline-block;
  color: #fff;
  background-color: #000;
  font-size: 1.4rem;
  border-radius: 30px;
  /* line-height: 4rem; */
  margin: 0 auto 60px;
  padding: 15px 2rem;
}

.con-black-button a,.con-black-button-2 a{
  color: #fff;
}

.img-wrap{
  margin-bottom: 30px;
}

.contact-h2{
  font-weight: 550;
  letter-spacing: 0.3rem;
  font-size: 2.2rem;
}

.contact-txt{
  font-weight: 550;
  font-size: 1.7rem;
}

.con-black-button-2{
  display: inline-block;
  color: #fff;
  background-color: #000;
  font-size: 1.4rem;
  border-radius: 30px;
  /* line-height: 4rem; */
  margin-bottom: 15px;
  padding: 15px 2rem;
}

.program-address{
  font-weight: bold;
  font-size: 1.8rem;
  letter-spacing: 0.5px;
}






/*--------------------------------------------------------------
サンクスページのcss
--------------------------------------------------------------*/

.thanks-logo{
  max-width: 300px;
  margin-bottom: 50px;
}

/*--------------------------------------------------------------
サンクスページのcssここまで
--------------------------------------------------------------*/












/* -----------------------------------------------

フッターcss-mmart

----------------------------------------------- */

  .footer-wrap{
    background-color: #7C7A7A;
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: -0.02rem;
    line-height: 1.2rem;
    
  }
  
  
  
  
  
  
  
  
  
  
  
  
  




/* -----------------------------------------------

固定ページ共通-mmart

----------------------------------------------- */


.page-icon{
	display: block;
}

 .page-icon-img{
  text-align: left;
  display: inline-block;
 }



.sample {
	margin: 16px auto;
	text-align: center;
	display: block;
	border: 1px solid #000;
}
.sample .text {
	text-align: left;
	display: inline-block;
}

dd{
  margin: 0;
}


.sp-bar{
  display: none;
}

.sp-contents{
  display: none;
}



@media screen and (max-width: 900px) {
  
  .sp-bar{
    display: block;
    margin: 30px 0;
}

  .pc-bar{
    display: none;
  }
  
  .sp-h2{
    /*font-size: 1.2rem;*/
  }
  
  .sp-link{
    background-color: #BAE3F9;
  }
  
  .sp-link h3{
    color: #fff;
    font-size: 1.2rem;
    padding: 10px 0;
  }


  .sp-logo{
    width: 70%;
    margin: 0 auto;
  }
  
  .viproom{
    text-align: center;
  }
  
  
  .special-bar{
    width: 70%;
    display: block;
  
  }
  
  .sp-contents{
    text-align: center;
  }
  
  .sp-contents{
    display: block;
  }
  
}