@charset "utf-8";
/*-----------------------------------------------------
	style-thinking.css
	独自のスタイル
------------------------------------------------------*/
main {
  margin-top:120px;
  position: relative;
}
section {
	padding-top: 120px;
	margin-top:-120px;/*固定ヘッダーのアンカーリンクずれ対策*/
	padding-bottom: 100px;
}

/*h1タイトル*/
section#secTitle {
  background-image: url("../images/program/thinking/bg-h1.png");
  background-repeat:no-repeat;
  background-position: top center;
  width: 100%;
  max-width: 1920px;
  max-height: 533px;
  margin:0 auto 80px;
  border-bottom: 10px solid #029abc;
}
section#secTitle h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/*レッスン内容*/
section#secLesson {
  background-image: url("../images/program/thinking/bg-dot.gif");
  background-repeat: repeat;
}
/*外部リンクからも開くタブ*/
section#secLesson ul.tab_area{
  overflow:hidden;
  display:flex;
  justify-content: space-between;
  margin:0 auto 30px;
  padding: 15px;
  width: 100%;
  max-width: 750px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #029abc;
  box-shadow: 0px 6px 0px 0px #029abc;
}
 
section#secLesson ul.tab_area li{
  /*Tabの装飾*/
  width:30%;
  padding: 10px 0;
  text-align:center; 
  border-radius: 16px;
  cursor: pointer; 
  display:block;  
  background-color:#cccccc;
  color: #fff;
  font-weight: bold;
  font-size: 30px;
 }
section#secLesson ul.tab_area li.select{
 /*アクティブタブの装飾*/
  background-color:#029abc; 
  background-image:none; 
 } 
.hide{display:none;}
 
section#secLesson div.all_area { 
  overflow: hidden;
 }
 
section#secLesson div.all_area {
 /*Tabの内容を表示するエリアの装飾*/
  background:#ffffff; 
  padding:50px 40px 0;
  border-radius: 20px;
 }
div.content_area div.lessonContent {
  width: 100%;
  margin: 0 0 50px;
  padding: 0;
  display: flex;  
}
div.content_area div.lessonContent p.comingsoon {
  text-align: center;
  font-size: 3rem;
  margin: 30px auto;
}
div.content_area div.lessonContent div.lessonContentImg {
  max-width: 310px;
  width: 100%;
}
div.content_area div.lessonContent dl.lessonContentTxt {
  width: calc( 100% - 310px);
  margin-left: 20px;
  padding: 0;  
}
div.content_area div.lessonContent dl.lessonContentTxt dt {
  color: #029abc;
  font-size: 2rem;
  font-weight: bold;
  padding-bottom: 3px;
  margin-bottom: 10px;
  border-bottom: 1px solid #029abc;
}
div.content_area div.lessonContent dl.lessonContentTxt dd {
  font-size: 1.8rem;
}

section#secLesson div.btnNote {
  text-align: center;
}
section#secLesson div.btnNote a {
  background: #029abc;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
  display: inline-block;
  margin: 0 auto 40px;
  padding: 10px 20px;
  border-radius: 8px;
}

/*他のプラグラムはこちら*/
h3.h3-otherProgram {
  width: 200px;
  margin: 30px auto 20px;
  padding-bottom: 2px;
  text-align: center;
  color: #333;
  font-size: 1.6rem;
  font-weight: bold;
  display: block;  border-bottom: 1px dotted #333;  
}
div.otherProgram {
  display: flex;
  justify-content:center;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  gap:30px;
}
div.otherProgram div.btnOtherProgram a {
  font-size: 1.8rem;
  color: #fff;
  padding: 5px 15px;
  text-align: center;
  border-radius: 8px;
  display:inline-block;
}
div.otherProgram div.btnOtherProgram.judg a {
  background: #ff8a00;
}
div.otherProgram div.btnOtherProgram.com a {
  background: #3ea838;
}
 


/*スケジュール・料金*/
section#secSchedule {
  margin-bottom: 100px;
}
section#secSchedule h2 {
  margin: 100px auto 50px;
}
section#secSchedule ul.lessonLv{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
ul.lessonLv li {
  list-style: none;
  font-size: 1.6rem;
  margin-bottom: 10px;
  margin-right: 30px;
}
ul.lessonLv li span {
  padding: 3px 15px;  
  margin-right: 10px;
  display: inline-block;
  color: #fff;
}
ul.lessonLv li.lessonM span {
  background-color: #029AC1;
}
ul.lessonLv li.lessonH span {
  background-color: #FF9933;
}
ul.lessonLv li.lessonC span {
  background-color: #63D763;
}
ul.lessonLv li.lessonS span {
  background-color: #d48aff;
}
ul.lessonLv li.lessonT span {
  background-color: #F8D000;
  color: #000;
}
ul.lessonLv li.lessonF span {
  background-color: #F2F2F2;
  color: #000;
}

section#secSchedule ul.lessonNote {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid #ccc;
}
section#secSchedule ul.lessonNote li {
  list-style-position: inside;
  font-size: 1.4rem;
}

section#secSchedule div.calendarArea {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
}
div.calendarArea div.calendarBox {
  width: 50%;
  padding: 15px;
}
div.calendarBox .calendarHeader a{
	display:none;
}
div.calendarBox table#calendarTable {
  width: 100%;
  border-collapse: collapse;
}
div.calendarBox table#calendarTable th {
  width: 14.28%;
  border: 1px solid #666;
  padding: 5px;
  text-align: center;
  background-color: #f2f2f2;
}
div.calendarBox table#calendarTable th.calendarHeader {
  border: none;
  background-color:rgba(255,255,255,0.00)!important;
}
div.calendarBox table#calendarTable td {
  border: 1px solid #666;
  padding: 0;
  text-align: center;
  vertical-align: text-top;
  height: 65px;
  background-color: #fff;
}
div.calendarBox .holidayCube {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 3px 3px 0 3px;
    position: relative;
    top: 2px;
}
div.scheduleComment {
  font-size: 1.1rem;
}
div.scheduleComment span {
  font-size: 1.1rem;
  padding: 5px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px 0 0 0;
  width: 100%;
  min-height: 37px
}
div.scheduleComment br {
  display: none;
}
div.scheduleComment span > br {
  display: block;
}
/*カレンダーの色*/
span[data-lv*="問Lv1"] {	background: #6CC6DD; color: #000;}
span[data-lv*="問Lv2"] {	background: #029AC1; color: #fff;}
span[data-lv*="問Lv3"] {	background: #006699; color: #fff;}
span[data-lv*="判Lv1"] {	background: #F7B675; color: #000;}
span[data-lv*="判Lv2"] {	background: #FF9933; color: #fff;}
span[data-lv*="判Lv3"] {	background: #FF6600; color: #fff;}
span[data-lv*="コLv1"] {	background: #B6E2AC; color: #000;}
span[data-lv*="コ1"] {	background: #B6E2AC; color: #000;}
span[data-lv*="コLv2"] {	background: #63D763; color: #fff;}
span[data-lv*="コ2"] {	background: #63D763; color: #fff;}
span[data-lv*="コLv3"] {	background: #00B050; color: #fff;}
span[data-lv*="説明会"] { background: #d48aff; color: #fff;}
span[data-lv*="説・試"] { background: #d48aff; color: #fff;}
span[data-lv*="トライアル"] { background: #F8D000;}
span[data-lv*="振替"] { background: #F2F2F2;}
span[data-lv*="特別"] { background: #ff8a8a;}

div.reservation {
  width: 70%;
  padding: 20px;
  margin: 0 auto;
  background: #fff;  
  display: flex;
  flex-wrap: wrap;
  z-index: 10;
  border: double 4px #d48aff;
  position: relative;
}
div.reservation p {
  margin: 0;
  width: 50%;
  text-align: center;
}
div.reservation p span.yoyaku {
  color: #fff;
  background: #d48aff;
  display: inline-block;
  padding: 5px 10px;
}
div.reservation p.note {
  font-size: 1.3rem;
  text-align: left !important;
}

section#secSchedule div.btnContact {
  text-align: center;
}
section#secSchedule div.btnContact a {
  background: #003b7a;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
  display: inline-block;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid #003b7a;
}
section#secSchedule div.btnContact a:hover {
  color: #003b7a;
  background:#fff; 
}

section#secSchedule div.priceWrap {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}
section#secSchedule div.priceWrap div.priceBox {
  display: flex;
  width: 65%;
  border: 1px solid #0083c9;
  align-items: center;
}
div.priceBox div.price01 {
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  background: #0083c9;
  text-align: center;
  padding: 15px;
}
div.priceBox div.price02 {
  color: #0083c9;
  font-size: 2.2rem;
  font-weight: bold;
  background: #fff;
  text-align: center;
  padding: 0 0 0 15px;  
}
div.priceBox div.price03 {
  color: #606060;
  font-size: 1.2rem;
  align-content: center;
  border-left: 1px solid #0083c9;
  margin: 10px 0;
  padding: 0 10px;
}
div.priceWrap div.priceImg {
  padding: 0 20px;
  width: 35%;
  text-align: center;
}




/*PC画面調整*/
@media (max-width: 1024px) {
  /*h1タイトル*/
  section#secTitle {
    background-size: cover;
  }
  section#secTitle h1 img{
    height: 100px;
    width: auto;
  }
  section#secSchedule div.priceWrap {
    display: block;
  }
  section#secSchedule div.priceWrap div.priceBox {
    width: 90%;
    margin: 20px auto;
  }
  section#secSchedule div.priceWrap div.priceImg {
    text-align: center;
    width: 100%;
  }
}


@media (max-width: 768px) {
  main {
    margin-top:75px;
  }
  section {
    padding-top: 75px;
    margin-top:-75px;/*固定ヘッダーのアンカーリンクずれ対策*/
    padding-bottom: 50px;
  }
  /*h1タイトル*/
  section#secTitle h1 {
    
  }
  /*レッスン内容*/
  div.content_area div.lessonContent dl.lessonContentTxt {
    width: 70%;
  }
  div.content_area div.lessonContent div.lessonContentImg {
    width: 30%;
  }
  /*イベント*/
  section#secEvent div.eventTitle {
    display: block;
    margin-bottom: 30px;
  }
  section#secEvent div.eventTitle h2 {
    text-align: center;
  }
  section#secEvent div.eventTitle p {
    border-left: none;
  }
  /*スケジュール*/  
  section#secSchedule div.calendarArea {
    display: block;
  }
  div.calendarArea div.calendarBox {
    width: 100%;
  }
  div.priceBox div.price01,div.priceBox div.price02 {
    font-size: 1.8rem;
  }
  
	
}
@media (max-width: 575px) {
  main {
    margin-top:72px;
  }
  section {
    padding-top: 72px;
    margin-top:-72px;/*固定ヘッダーのアンカーリンクずれ対策*/
    padding-bottom: 50px;
  }
  /*h1タイトル*/
  section#secTitle {
    background-size: 100%;
    margin: 0 0 30px;
    padding: 0;
    border-bottom: 7px solid #029abc;
  }
  section#secTitle h1 {
    margin: 1.5vh 0;
    padding: 0;
    text-align: center;  
  }
  section#secTitle h1 > img {
    height: 70px;
    width: auto;
  }
  h2 > img {
    height: 30px;
    width: auto;
  }
  
  /*レッスン内容*/
  div.content_area div.lessonContent {
    display: block;
  }
  div.content_area div.lessonContent dl.lessonContentTxt {
    width: 100%;
    margin: 0;
  }
  div.content_area div.lessonContent div.lessonContentImg {
    width: 100%;
    margin-bottom: 10px;
  }
  section#secLesson ul.tab_area li{
    font-size: 20px;
  }
  /*他のプログラムはこちら*/
  div.otherProgram {
    gap:10px;
  }
  div.otherProgram div.btnOtherProgram a {
    font-size: 1.6rem;
    padding: 5px 10px;
  }
  /*イベント*/
  section#secEvent div.eventTitle {
    display: block;
    margin-bottom: 30px;
  }
  section#secEvent div.eventTitle p {
    border-left: none;
  }
  /*スケジュールカレンダー*/
  ul.lessonLv li {
    font-size: 1.4rem;
  }
  ul.lessonLv li span {
    font-size: 1.3rem;
  }
  div.reservation {
    width: 100%;
  }
  div.scheduleComment span {
    font-size: 0.9rem;
    padding: 2px 0;
    min-height: 25px;
  }
  div.calendarArea div.calendarBox {
    padding: 0;
  }
  section#secSchedule div.col-12 {
    padding-left: 5px;
    padding-right: 5px;
  }
  section#secSchedule div.priceWrap div.priceBox {
    flex-wrap: wrap;
  }
  div.priceBox div.price01 {
    padding: 10px;
  }
  div.priceBox div.price02 {
    padding: 0 0 0 10px;
  }
  div.priceBox div.price02 > br.d-sm-none {
    display: none;    
  }
  div.priceBox div.price03 {
    width: 100%;
    border-left: none; 
    margin: 0;
    padding: 10px;
    border-top: 1px dotted#0083c9;
  }
  
}






/*-----------------------------------------------------
	ページ名/部品名
------------------------------------------------------*/
/*　section名　*/