@charset "UTF-8";
html {
   overflow-y: scroll;
   height: 102%;
   height: -webkit-fill-available;
}

body {
   line-height: 1;
   color: #000;
   min-height: 100vh;
   min-height: -webkit-fill-available;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   list-style: none;
}

sup {
   vertical-align: super;
   font-size:0.7em;
   top: -0.02em;
}


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

nav ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

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

a {
   margin: 0;
   padding: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

ins {
   background-color: #ff9;
   color: #000;
   text-decoration: none;
}

mark {
   background-color: #ff9;
   color: #000;
   font-style: italic;
   font-weight: bold;
}

del {
   text-decoration: line-through;
}

abbr[title], dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
}

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

hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #909090;
   margin: 1em 0;
   padding: 0;
}

input, select {
   vertical-align: middle;
}

/* Color */
/* Base Color */
/* Base Font Color */
/* Base Link Color */
/* Base Button Color */
/* Base Line Color */
/* Contents Background Color */
body {
   font: 13px/1.231 arial, helvetica, clean, sans-serif;
   *font-size: small;
   *font: x-small;
}

select, input, button, textarea {
   font: 99% arial, helvetica, clean, sans-serif;
}

table {
   font-size: inherit;
   font: 100%;
}

pre, code, kbd, samp, tt {
   font-family: monospace;
   *font-size: 108%;
   line-height: 100%;
}

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

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


.txt_red {
   color: #f74f4c;
}

.center {
   text-align: center;
   width: 100%;
}

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

.img_box {
   text-align: center;
   padding: 20px 0;
}

.img_box img {
   width: 100%;
}
@media screen and (min-width: 541px) {
   .img_box img {
      width: auto;
      max-width: 100%;
   }
}

.bold {
   font-weight: bold;
}

.txt-l {
   font-size: 1.3em;
   font-weight: 700;
}



body {
   color: #171717;
   line-height: 1.9em;
   font-size: 13px;
   width: 100%;
   background-color: #eaebec;
   height: 100%;
   font-family: "Helvetica Neue", Arial, "Noto Sans JP", "Droid Sans", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-attachment: fixed;

   font-feature-settings: "palt" 1;
   letter-spacing: 0.02em;
}
@media screen and (min-width: 541px) {
   body {
      font-size: 16px;
      background-size: 100px;
   }
}

.body_inner {
   overflow: hidden;
}

*, *:before, *:after {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

p {
   padding: 0 0 20px;
   width: 100%;
}
@media screen and (min-width: 541px) {
   p {
      padding: 0 0 30px;
   }
}


.clearfix:after {
   content: "";
   display: block;
   clear: both;
}

.clearfix {
   zoom: 1;
}

.f_box {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

.note {
   font-size: 11px;
   line-height: 1.5em;
   margin-top: 7px;
}

@media screen and (min-width: 541px) {
   .note {
      font-size: 13px;
   }
}

/*   link   */

a {
   text-decoration: none;
   color: #171717;
   outline: none;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
a:hover {
   text-decoration: underline;
   color: #171717;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

a.btn {
   padding: 15px 10px;
   text-align: center;
   background-color: #309CAF;
   color: #fff;
   border-radius: 50px;
   font-weight: 600;
   width: 75%;
   margin: 0 auto 10px;
   display: block;
   -webkit-transition: all 0.3s linear;
   transition: all 0.3s linear;
   letter-spacing: 0.1em;
   font-size: 1.1em;
   box-sizing: border-box;
   box-shadow: #adadad 0 3px 5px;

}
a.btn:hover {
   text-decoration: none;
   background-color: #56BCCE;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
@media screen and (min-width: 541px) {
   a.btn {
      width: 480px;
      padding: 22px;
      font-size: 1.4em;

   }
}
a.btn.nolink {
   background-color: #6A6A6A;
   pointer-events: none;
}

a img {
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

a:hover img {
   opacity: 0.8;
   filter: alpha(opacity=75);
   -ms-filter: "alpha( opacity=75 )";
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
   overflow: hidden;
}

.btn_area {
   text-align: center;
}

.bg-color {
   background: #F5F7F8;
}
@media screen and (min-width: 541px) {
   .bg-color {
      padding: 70px 3rem;
   }
}
@media screen and (min-width: 1500px) {
   .bg-color{
      padding: 70px 100px 90px;
   }
}



/*   wrapper   */
.wrapper {
   background-color: #fff;
   max-width: 1500px;
   margin: 0 auto;
}

section {
   position: relative;
}

/*   cts_inner   */

.cts_inner{
   max-width: 1500px;
   margin: 0 auto;
   box-sizing: border-box;
   position: relative;
   padding: 50px 1.2rem;
}
@media screen and (min-width: 541px) {
   .cts_inner{
      padding: 50px 3rem;
   }
}
@media screen and (min-width: 1500px) {
   .cts_inner{
      padding: 80px 100px;
   }
}

/*   entry_area   */

.entry_area {
   max-width: 860px;
   width: 100%;
   box-sizing: border-box;
}
.entry_area .outline {
   font-size: 3.7vw;
   font-weight: 600;
   line-height: 1.6em;
   margin: 0;
   padding: 5px 0;
}
.entry_area .outline th,.entry_area .outline td {
   padding-bottom: 3px;
}
.entry_area .outline th {
   padding-right: 5px;
   text-align-last: left;
   font-size: 0.9em;

}
.entry_area p.member {
   color: #3283C2;
   margin-bottom: 20px;
}
.entry_area .text-l {
   font-size: 2em;
   letter-spacing: 0.05em;
}
.entry_area p.member .text-l {
   font-size: 1.2em;
   letter-spacing: 0;
}
.spase-s {
   letter-spacing: -0.08em;
}
.btn-note {
   text-align: center;
   font-size: 0.8em;
   color: #606060;
   line-height: 1.4em;
   padding: 0;
}
@media screen and (min-width: 541px) {
   .entry_area  {
      padding: 0;
   }
   .entry_area .outline {
      font-size: 2vw;
      line-height: 1.6em;
      letter-spacing: 0.04em;
   }
   .entry_area .text-l {
      font-size: 2.4em;
   }
   .spase-s {
      letter-spacing: 0;
   }
   .entry_area p.member {
      margin-bottom: 40px;
   }
   .entry_area p.member .text-l {
      font-size: 1.4em;
   }
}
@media screen and (min-width: 860px) {

   .entry_area .outline {
      font-size: 18px;
   }
}



/*   header   */
header {
   padding-bottom: 20px;
}
.header_inner {
   padding: 0;
}
.hero_img {
   max-width: 1500px;
   margin: 0 auto;

   text-align: center;
}
.hero_img img {
   width: 100%;
}
header .logo {
   position: absolute;
   top: 1em;
   right: 1em;
   width: 22%;
   height: auto;
   max-width: 120px;
}
.main_lead {
   text-indent: -9999px;
   background-image: url(../img/main_lead.svg);
   background-size: 100%;
   aspect-ratio: 363 / 38;
   margin: 0 auto;
   width: calc(100% - 2.4em);
   max-width: 860px;
   padding: 0;
}
@media screen and (min-width: 541px) {
   header .logo {
      top: 10px;
      right: 1rem;
   }
   .hero_img {
      width: calc(100% - 300px);
      min-width: 541px;
   }
   .main_lead {
      margin: 0 auto 30px;
   }
}
@media screen and (min-width: 800px) {
   header .logo {
      right: 2rem;
      max-width: 200px;
   }

   .hero_img {
      min-width: 800px;
   }
}
@media screen and (min-width: 1000px) {
   header .logo {
      right: 2rem;
      max-width: 200px;
   }

}


/*   main   */

.lead-blue {
   color: #5DA1D6;
   font-size: 5.5vw;
   line-height: 1.4em;
   font-weight: 600;
}
img.point {
   width: 100%;
   margin-top: -15px;
}
.title_dot_line {
   text-align: center;
   margin-bottom: 20px;
   margin-top: -20px;
}
.title_dot_line span {
   text-align: center;
   border-bottom: dotted #868686 2px;
   padding-bottom: 3px;
   display: inline-block;
   margin: 0 auto;
   color: #5DA1D6;
   line-height: 1em;
   font-size: 1.4em;
}
.illust {
   width: 100%;
   margin-bottom: 70px;
}
.title-cts {
   font-weight: 600;
   color: #4694D1;
   font-size: 6vw;
   text-align: center;
   margin-bottom: 30px;
}

.point_area {
   padding-bottom: 10px;
}

@media screen and (min-width: 541px) {
   img.point {
      width: 42%;
      margin-top:0;
      position: absolute;
      top:-20px;
      right:0;
   }
   .lead-blue{
      width:calc(100% - 40%);
      font-size: 2.7vw;
      font-weight: 600;
      line-height: 1.6em;
   }
   .title_dot_line {
      text-align: left;
      margin-bottom: -10px;
      margin-top: -50px;
   }
   .title_dot_line span {
      font-size: 1.7vw;
   }
   .title-cts {
      font-size:35px;
      text-align: left;
      margin-bottom: 40px;
   }
   .illust {
      margin-bottom: 90px;
   }
}

@media screen and (min-width: 1500px) {
   .lead-blue{
      font-size: 40px;
   }
   .title_dot_line {
      margin-bottom: -10px;
      margin-top: -80px;
   }
   .title_dot_line span {
      font-size: 24px;
   }
}


/*   time_table   */

.time_table_area {
   margin-bottom: 40px;
}
.time_table {
   border-top: dotted #B1B1B1 2px;

}
.time_table dt {
   float: left;
   padding: 10px 0;
   width: 5em;
   clear: both;
   color: #3283C2;
   font-family: 'Antonio', sans-serif;
   text-align: left;
   font-size: 1.2em;
   line-height: 1em;
}
.time_table dd {
   padding: 10px 10px 10px 6.5em ;
   border-bottom: dotted #B1B1B1 2px;
   width: 100%;
   box-sizing: border-box;
   vertical-align: top;
   line-height: 1.5em;
}
.time_table dd b {
   font-size: 1.1em;
}
.icon-date {
   display: block;
   width: 60px;
   height: auto;
   margin: 0 auto 10px;
}
@media screen and (min-width: 541px) {

   .time_table_area {
      display: flex;
      width: 100%;
      align-items: flex-start;
      gap:0 40px;
      margin-bottom: 40px;
   }
   .icon-date {
      display: block;
      width: 80px;
      margin: 0;
   }
   .time_table_wrap {
      flex: 1;
   }
   .time_table dt {
      padding: 15px 0;
      font-size: 1.1em;
      line-height: 1em;
   }
   .time_table dd {
      padding: 15px 15px 15px 8em ;
   }

}



/*   chart   */

.title-chart {
   line-height: 1.4em;
   font-size: 1.1em;
   padding-top: 10px;
}
.table-wrap {
   margin: 0 auto 40px;
}
.chart td, .chart th{
   width: 25vw;
   padding: 10px 8px 5px;
   border-bottom: solid #fff 2px;
   border-right: solid #fff 2px;
   box-sizing: border-box;
   line-height: 1.3em;
   height: 9em;
   font-size: 0.9em;
}
.table_box_sticky {
   position: relative;
   height: 100%;
   float: left;
   padding-left: 1.3em;
}
.table_box_sticky::after {
   content: "";
   position: absolute;
   top:2.8em;
   right:-15px;
   z-index: 10;
   width: 15px;
   height: calc(100% - 3em);
   background: linear-gradient(to right,rgba(0,0,0,.1) 0,transparent 100%);
}
.table_box_sticky .chart  {
   position: sticky;
   top:0;
   left: 0;
}

.table_box_scroll {
   width: auto;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
}

.table_box_scroll .chart {
   width: 170vw;
   box-sizing: border-box;
   margin-right: 20px;
}
.table_box_scroll tr:nth-child td {
   background-color: #FDFDFD;
}
.table_box_scroll tr:nth-child(even) td {
   background-color: #EEEFF3;
}
.chart th{
   padding: 5px;
}
.table_box_scroll tr:first-child th {
   background-color: #A69ABD;
   color: #fff;
   text-align: center;
   border-radius: 10px 10px 0 0;
   vertical-align: middle;
}
.chart tr:first-child th{
   height: 3em;
   box-sizing: border-box;
   line-height: 1em;
   border-bottom: solid #fff 2px;
   border-right: solid #fff 2px;
   box-sizing: border-box;
}
.table_box_sticky th {
   background-color: #4794D0;
   color: #fff;
   font-weight: bold;
   vertical-align: middle;
   text-align-last: left;
   border-radius: 10px 0 0 10px;
   width: 23vw;
}

.table_box_sticky tr:first-child th {
   background-color: #fff;
   position: sticky;
   left: 0;
   border-radius: 0%;
}

@media screen and (min-width: 541px) {
   .table_box_scroll .chart {
      width: 130vw;
      margin-right: 3rem;
   }
   .table-wrap {
      max-width: 1500;
      padding: 0 0 0 3rem;
      margin: 0 auto 70px;
   }
   .table_box_sticky {
      padding-left: 0;
   }
}


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

   .table_box_scroll .chart {
      width: 100%;
   }
   .table_box_scroll {
      width: 100%;
      overflow-x: hidden;
   }
   .table_box_scroll {
      width: calc(100% - 11em);
   }

   .table_box_sticky th {
      width: 10em;
      padding: 0 20px;
   }
   .chart td, .chart th{
      font-size: 1vw;
   }

}

@media screen and (min-width:1500px) {
   .table-wrap {
      padding: 0 100px;
   }
   .chart td, .chart th{
      font-size: 0.9em;
   }
   .table_box_sticky::after {
      display: none;
   }

   .chart tr:first-child th{
      font-size: 0.9em;
   }
   .chart td, .chart th{
      height: 7em;
   }
}





/*   teacher-list   */


.teacher-list {
   padding-top: 10px;
}
.teacher-li {
   display: flex;
   margin-bottom: 30px;
}

.img-teacher {
   width: 26%;
   height: auto;
}
.img-teacher img {
   width: 100%;
   object-fit: cover;
   border-radius: 10px;
   overflow: hidden;
   aspect-ratio: 5 / 7;
}
.name-teacher {
   font-size: 1.3em;
   margin-bottom: 6px;
   font-weight: 600;
   line-height: 1em;
}
.name-teacher span {
   font-size: 0.7em;
   color: #4794D0;
   font-weight: normal;
}
.text-teacher {
   flex: 1;
   padding-left: 15px;
   line-height: 1.5em;
}

@media screen and (min-width: 541px) {
   .img-teacher {
      width: 140px;
      height: auto;
   }
   .name-teacher {
      margin-bottom: 10px;
      padding-top: 3px;
   }
   .text-teacher {
      padding-left: 25px;
      line-height: 1.6em;
   }
}



/*   footer   */

.copyright {
   font-size: 0.8em;
   color: #606060;
   display: block;
   padding-top: 50px;
}