@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&family=Rajdhani:wght@300;400;500;600;700&display=swap');

@import url("_layout.css");
@import url("_typography.css");

* {
  box-sizing: border-box;
}
.text--center{
  text-align: center;
}
.text--right{
  text-align: right;
}
.text--left{
  text-align: left;
}
.vtext{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
rt{
  text-align: center;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.font--bold{
  font-weight: bold;
}
.wrapper {
  width: 100%;
  padding-bottom: 60px;
  overflow: hidden;
  font-family: 'Noto Sans JP', sans-serif !important;
}
.wrapper__inner {
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
}

.sp{ display: none; }
.pc{ display: block; }

.sp--inline{ display: none; }
.pc--inline{ display: inline; }


.feature__title{
  color: #080808;
}
img{
  max-width: 100%;
}
html{
  font-size: 62.5%;
}
body {
  line-height: 2;
  position: relative;
  font-size: 16px;
  font-weight: normal;
  color: #000;
}
.fl-l{
  float: left;
}
.fl-r{
  float: right;
}
h1,h2,h3,h4,h5,h6{
  margin: 0;
}
/*
.fsize10{ font-size:10px; }
.fsize11{ font-size:11px; }
.fsize12{ font-size:12px; }
.fsize14{ font-size:14px; }
.fsize16{ font-size:16px; }
.fsize18{ font-size:18px; }
.fsize20{ font-size:20px; }
.fsize27{ font-size:27px; }
*/
.fw100{ font-weight: 100;}
.fw200{ font-weight: 200;}
.fw300{ font-weight: 300;}
.fw400{ font-weight: 400;}
.fw500{ font-weight: 500;}
.fw600{ font-weight: 600;}
.fw700{ font-weight: 700;}

.mb1{ margin-bottom: 1rem; }
.mb2{ margin-bottom: 2rem; }
.mb3{ margin-bottom: 3rem; }
.mb4{ margin-bottom: 4rem; }
.mb5{ margin-bottom: 5rem; }
.mb6{ margin-bottom: 6rem; }
.mb7{ margin-bottom: 7rem; }
.mb8{ margin-bottom: 8rem; }
.mb9{ margin-bottom: 9rem; }
.mb10{ margin-bottom: 10rem; }

.p1 { padding:1rem; }
.p2 { padding:2rem; }
.p3 { padding:3rem; }

.pl1 { padding-left:1rem; }
.pl2 { padding-left:2rem; }
.pl3 { padding-left:3rem; }

.pr1 { padding-right:1rem; }
.pr2 { padding-right:2rem; }
.pr3 { padding-right:3rem; }

.grow{
  flex: 1;
}

@media screen and (max-width:940px) {
  .contents__inner,
  body{ 
    
    width:100%;
    min-width: auto;
  }
  .wrapper__inner {
    max-width: 100%;
  }
  .text--center--sp{
    text-align: center;
  }
  .text--right--sp{
    text-align: right;
  }
  .text--left--sp{
    text-align: left;
  }
}
@media screen and (max-width:767px) {
  .sp{ display: block; }
  .pc{ display: none; }
  .sp--inline{ display: inline; }
  .pc--inline{ display: none; }
  body {
    font-size: 14px;
  }
  section{
    
  }
  .wrapper__inner{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  img{
    max-width: 100%;
  }
  .p0--sp { padding: 0!important; }
  .p1--sp { padding:1rem!important; }
  .p2--sp { padding:2rem!important; }
  .p3--sp { padding:3rem!important; }

  .pl1--sp { padding-left:1rem!important; }
  .pl2--sp { padding-left:2rem!important; }
  .pl3--sp { padding-left:3rem!important; }

  .pr1--sp { padding-right:1rem!important; }
  .pr2--sp { padding-right:2rem!important; }
  .pr3--sp { padding-right:3rem!important; }

  .box--sp{
    display: flex;
    justify-content:center;
    align-items:center;
  }
}

.hilight{ 
  color: #EC6C2A;
}
ul.simple{
  padding-left: 3rem;
}
ul.simple li{
  font-weight: 400;
  list-style:none;
  text-indent: -1.2rem;
  margin-bottom: 0.7rem;
}
ul.simple li::before{
  content: "■";
  font-size: 1.3rem;
  display: inline-block;
  margin-right: 10px;
}
ul.simple.orange li::before{
  color: #F5A100;
}
ul.simple.gray li::before{
  color: #AFB093;
}
ul.simple.blue li::before{
  color: #0081C0;
}

.pc-on {
  display: block;
}
.sp-on {
  display: none;
}
.pc-on-inline {
  display: inline-block;
}
.sp-on-inline {
  display: none;
}
a:hover{
  opacity: 0.8;
}
.mv2{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/*	‐‐‐‐‐‐‐‐‐‐‐‐スマホ指定‐‐‐‐‐‐‐‐‐‐‐‐‐*/
@media screen and (max-width:767px) {
  .pc-on {
    display: none;
  }
  .sp-on {
    display: block;
  }
  .pc-on-inline {
    display: none;
  }
  .sp-on-inline {
    display: inline-block;
  }
  .contents__inner {
    padding: 0px 15px;
  }
  .mb1--sp{ margin-bottom: 1rem; }
  .mb2--sp{ margin-bottom: 2rem; }
  .mb3--sp{ margin-bottom: 3rem; }
  .mb4--sp{ margin-bottom: 4rem; }
  .mb5--sp{ margin-bottom: 5rem; }
  .mb6--sp{ margin-bottom: 6rem; }
  .mb7--sp{ margin-bottom: 7rem; }
  .mb8--sp{ margin-bottom: 8rem; }
  .mb9--sp{ margin-bottom: 9rem; }
  .mb10--sp{ margin-bottom: 10rem; }

}


/*	‐‐‐‐‐‐‐‐‐‐‐‐1p目‐‐‐‐‐‐‐‐‐‐‐‐‐*/
.box{
  display: flex;
  align-items: center;
  justify-content:center;
}
.flex-wrap{
  flex-wrap: wrap;
}
.row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.wp100{ width: 100%; }
.wp50{ width: 50%; }

.vol36-bg{
  background:#EAF5F8;
  padding:4rem 1rem 8rem 1rem; 
  
}

.top-main-title img{
  margin-top: -9rem;
}

.panel{
  background: white;
  border-radius:2rem;
  padding: 3.5rem;
}
.tag-title{
  color: white;
  background: #00B4ED;
  line-height: 1;
  display: inline-block;
  padding: 1rem 2.5rem;
  border-radius: 2rem;
}
.panel-title{
  margin-top: -5rem;
  margin-bottom: 2.5rem;
}
.note{
  font-size: 1.2rem;
  padding-left: 1.5rem;
  text-indent: -1rem;
}
ul.simple li{
  font-size: 1.4rem;
  font-weight: bold;
}
ul.simple li::before{
  content: "●";
  color: #00B4ED;

}

.lesson-note{
  margin-top: -8rem;
}


.course-block{
  position: relative;
  width: 100%;
  display: flex;
  justify-content:flex-start;
  margin-bottom: -2rem;
}
.course-block.right{
  width: 100%;
  display: flex;
  justify-content:flex-end;

}

.course-img{
  width: 296px;
}
.course-block p{
  margin-top: 1rem;
  font-size:1.4rem;
}

.course-01 .caption-block,
.course-03 .caption-block,
.course-05 .caption-block{
  max-width: 380px;
}
.course-02 .caption-block,
.course-04 .caption-block{
  max-width: 420px;
}

.caption-block h3{
  margin-bottom: .5rem;
}


.course-block::before{
  content: "";
  display: block;
  position: absolute;
}
.course-block.course-01::before{
  width: 299px;
  height: 271px;
  background:url(../img/feature/vol36/course-01-bg.png) no-repeat;
  background-size: cover;
  right: 0;
  top: 0;
}
.course-block.course-02::before{
  width: 203px;
  height: 61px;
  background:url(../img/feature/vol36/course-02-bg.png) no-repeat;
  background-size: cover;
  left: 0;
  top: 80px;
}
.course-block.course-03::before{
  width: 302px;
  height: 96px;
  background:url(../img/feature/vol36/course-03-bg.png) no-repeat;
  background-size: cover;
  right: 0;
  top: 20px;
}

.course-block.course-04::before{
  width: 171px;
  height: 59px;
  background:url(../img/feature/vol36/course-04-bg.png) no-repeat;
  background-size: cover;
  left: 0;
  bottom: 60px;
}
.course-block.course-05::before{
  width: 108px;
  height: 108px;
  background:url(../img/feature/vol36/course-05-bg.png) no-repeat;
  background-size: cover;
  right: 170px;
  top: 20px;
}

@media screen and (max-width:767px) {
  .wp100--sp{
    width: 100%!important;
  }
  .tag{
   width: 100%;
  }
  .vol36-bg{
    background:#EAF5F8;
    padding:4rem 0;
    
  }
  .top-main-title  img{
    margin-top: 0;
  }
  .lesson-note{
    margin-top: 0;
  }
  .panel-title{
    margin-top: -3.5rem;
    margin-bottom: 2rem;
  }
  .panel{
    padding: 2rem;
  }
  .course-block::before{
    display: none;
  }
  .caption-block{
    text-align: center;
  }
  .caption-block p{
    text-align: left;
  }
  .course-block{
    margin-bottom: 1.5rem;
  }
  .course-img{
    margin-bottom: -1.5rem;
  }
}

/*	‐‐‐‐‐‐‐‐‐‐‐‐2p目‐‐‐‐‐‐‐‐‐‐‐‐‐*/

.section-block{
  display: flex;
  justify-content:space-between;
  align-items: flex-start;
}
.section-caption-block,
.section-img-block{
  width: 50%;
}
.section-caption-block.wide{
  width: 100%;
}
.section-img-block{
  padding-left: 4.5rem;
}

.person{
  width: 130px;
  margin-right: 3rem;
}
.caption-body{
  margin-top: 3rem;
}

.person-name{
  font-size: 1.5rem;
  font-weight: bold;
}
.person-caption{
  font-size: 1.4rem;
  
}

.sep-block{
  margin: 2rem 0;
}

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

.topics-title{
  width: 238px;
}
.topics-caption{
  flex: 1;
  padding: 0 3rem;
}
.fig-01{
  width: 220px;
}
.link-text{
  display: flex;
  align-items: center;
  text-decoration: underline;
}
.link-text > img{
  margin-right: 5px;
}

.fig-02{
  width: 297px;
}

.sep-block.offset{
  margin-bottom: -10rem;
}

.person-08-block{
  max-width: 480px;
  margin: auto;
}
@media screen and (max-width:767px) {
  h2{
    width: 100vw;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .person{
    width: 110px;
    margin-right: 2rem;
  }
  .section-block{
    display: block;
  }
  .section-caption-block{
    width: 100%;
  }
  .section-img-block{
    width: 100vw;
    padding-left:0;
    margin-top: 3rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .section-caption-block h3{
    text-align: center;
    margin-bottom: 2rem;
  }
  .section-caption-block h3 img{
    width: auto;
    height: 32px;
  }
  .sep-block{
    margin: 2rem -1.5rem;
    width: 100vw;
  }

  .topics-block{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
  }
  .topics-caption{
    flex: 1;
    padding: 0 0 3rem 0;
  }

  .person-name{
    font-size: 1.3rem;
    font-weight: bold;
  }
  .person-caption{
    font-size: 1.1rem;
    
  }
  .fig-02{
    width: 100%;
  }

  .sep-block.offset{
    margin-bottom: 2rem;
  }
}
/*	‐‐‐‐‐‐‐‐‐‐‐‐3p目‐‐‐‐‐‐‐‐‐‐‐‐‐*/


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


}