@charset "utf-8";
/* レイアウトのためのCSS */
body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  color: #333;
  font-size: 1.4rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
}
@media screen and (max-width:767px) {
  body {
    font-size: 1.2rem;
  }
}
a {
  color: #333;
  text-decoration: none;
  outline: none;
}
img {
  width: 100%;
  height: auto;
}
/* font-family */
.top-lead, h1, h2, h3 span, #g-nav, #pcnav, .openbtn, #footer {
  font-family: 'Lato', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  letter-spacing: 0.1em;
  text-transform: capitalize;
}
/* splash */
#splash-logo {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.3em;
  text-transform: capitalize;
  color: #eb6100;
}
/*pcnav*/
#pcnav {
  width: 50%;
  margin-left: 43%;
  margin-right: 7%;
  font-size: 1.6rem;
}
#pcnav span.bgLRextend::before {
  background: #333;
}
/* header */
#header h1 {
  text-transform: capitalize;
  position: absolute;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #eb6100;
}
#header h1, #header h1 .brpoint1 {
  display: block;
}
h1 a {
  color: #eb6100;
}
h2 {
  text-transform: capitalize;
  font-size: 3rem;
}
.topmark {
  position: fixed;
  z-index: -1;
}
.topmark .area1 {
  width: 60%;
  height: auto;
}
/* lead */
.top-lead {
  position: fixed;
  text-transform: capitalize;
  font-weight: bold;
  color: #fff;
  line-height: 2.0;
}
.top-lead span.bgLRextend::before {
  background: #333;
}
/* main-area */
#main-area {
  width: 90%;
  margin: 0 auto;
  padding: 50px 0;
}
/* topics */
#topics-wrap {
  max-width: 100%;
  height: auto;
  background-color: #fff;
}
#topics {
  border-left: 3px solid #000;
  padding: 0 0 0 20px;
  margin: 50px 0px 50px 5px;
  text-align: left;
}
#topics h2 {
  font-size: 2.6rem;
}
#topics h2 span.bgLRextend::before {
  background: #333;
}
.bx-wrapper {
  box-shadow: none;
  border: none;
}
/* vision */
#vision {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 100px 0;
}
#vision .img {
  width: 40%;
  min-height: 590px;
  background: url("../img/main-image_640.jpg") no-repeat center;
  background-size: cover;
}
#vision .content {
  width: 50%;
  text-align: right;
}
#vision h2 {
  color: #eb6100;
  margin: 0 0 30px 0;
}
#vision p {
  line-height: 2;
  margin: 0 0 50px 0;
}
#vision .vision-lead {
  position: relative;
  color: #eb6100;
  font-weight: bold;
  margin: 0 0 90px 0;
}
#vision .vision-lead::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: 0;
  background: #eb6100;
  width: 12em;
  height: 3px;
}
/* service */
#service h2 {
  text-align: center;
  margin: 0 0 100px 0;
}
#service h2 span.bgLRextend::before {
  background: #333;
}
#service .service-area {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 300px 0;
}
#service .service-area::after {
  content: '';
  position: absolute;
  width: 70%;
  height: 23em;
  background: #f3f3f3;
  right: 10%;
  top: 20%;
  z-index: -1;
}
#service .service-area:nth-of-type(2n+1) {
  flex-direction: row-reverse;
}
#service .service-area .img {
  width: 50%;
}
#service .service-area .content {
  width: 40%;
  background: #fff;
  box-shadow: 0 0 20px #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 150px;
}
#service .service-area .content-area {
  padding: 40px;
}
#service .service-area .content-area h3 {
  text-align: center;
  margin: 0 0 30px 0;
}
#service .service-area .content-area h3 span {
  font-weight: bold;
  text-transform: capitalize;
  display: block;
}
#service .service-area .content-area p {
  margin: 0 0 30px 0;
}
#service .btn {
  text-align: right;
}
/* faq */
#faq {
  margin: 0 0 200px 0;
}
#faq h2 {
  text-align: center;
  margin: 0 0 50px 0;
  padding-top: 100px;
}
#faq h2 span.bgLRextend::before {
  background: #333;
}
.accordion-area ul li {
  padding-left: 15px;
  line-height: 1.7em;
  background: url(../../common/image/list1.gif) no-repeat left 0.4em;
}
.faq-bg {
  position: relative;
  height: 35vh;
  background: url("../img/last-image.jpg") no-repeat center;
  background-size: cover;
  margin: 0 0 200px 20%;
}
.faq-bg::after {
  content: '';
  position: absolute;
  top: 20%;
  left: -20%;
  width: 100%;
  height: 35vh;
  background: #f3f3f3;
  z-index: -1;
}
/* 599px以下
--------------------------------------------*/
@media screen and (max-width:599px) {
  #pcnav {
    display: none;
  }
  /* splash */
  #splash-logo {
    font-size: 2.6rem;
  }
  /* header */
  #header h1, #header h1 .brpoint1 {
    font-size: 1.7rem;
    left: 7%;
  }
  #header h1 .brpoint1 {
    padding-top: 7px;
  }
  /* all */
  h2 {
    font-size: 2.6rem;
  }
  .topmark {
    top: 24vh;
    left: 10%;
  }
  .topmark .area1 {
    width: 55%;
    height: auto;
  }
  /* lead */
  .top-lead {
    top: 58%;
    left: 10%;
    font-size: 2.6rem;
    line-height: 2.0;
  }
  /* topics */
  #topics h2 {
    font-size: 2.6rem;
  }
  #topics {
    margin: 0 0 100px 0;
  }
  /* vision */
  #vision .vision-lead {
    font-size: 1.6rem;
  }
  #vision p {
    font-size: 1.4rem;
  }
  #vision {
    margin: 0 0 50px 0;
  }
  #vision .img {
    width: 100%;
    min-height: 290px;
    margin: 0 0 50px 0;
  }
  #vision .content {
    width: 100%;
    text-align: left;
  }
  /* service */
  #service .service-area .content-area h3 {
    font-size: 1.8rem;
  }
  #service .service-area .content-area h3 span {
    font-size: 2.0rem;
  }
  #service .service-area .content-area p {
    font-size: 1.4rem;
  }
  #service h2 {
    margin: 0 0 50px 0;
  }
  #service .service-area {
    margin: 0 0 50px 0;
  }
  #service .service-area .img {
    width: 100%;
    z-index: 2;
  }
  #service .service-area .content {
    width: 100%;
    top: -10px;
    animation: none;
    opacity: 1;
    z-index: 1;
  }
  /* faq */
  #faq h3.title {
    font-size: 1.4rem;
  }
  #faq .accordion-area li {
    margin: 10px 0;
    font-size: 1.2rem;
  }
  #faq {
    margin: 0 0 100px 0;
  }
  #faq h2 {
    margin: 0 0 50px 0;
  }
  .faq-bg {
    margin: 0 0 100px 10%;
  }
  .faq-bg, .faq-bg::after {
    height: 38vh;
  }
}
/* 600px以上、767px以下
--------------------------------------------*/
@media screen and (min-width:600px) and (max-width:767px) {
  #pcnav {
    display: none;
  }
  /* splash */
  #splash-logo {
    font-size: 2.8rem;
  }
  /* header */
  #header h1, #header h1 .brpoint1 {
    font-size: 1.9rem;
    left: 7%;
  }
  #header h1 .brpoint1 {
    padding-top: 8px;
  }
  /* all */
  h2 {
    font-size: 3.0rem;
  }
  .topmark {
    top: 28vh;
    left: 12%;
  }
  .topmark .area1 {
    width: 55%;
    height: auto;
  }
  /* lead */
  .top-lead {
    top: 57%;
    left: 13%;
    font-size: 3.0rem;
    line-height: 1.8;
  }
  /* topics */
  #topics h2 {
    font-size: 3.0rem;
  }
  #topics {
    margin: 0 0 100px 0;
  }
  /* vision */
  #vision .vision-lead {
    font-size: 1.8rem;
  }
  #vision p {
    font-size: 1.4rem;
  }
  #vision {
    margin: 0 0 50px 0;
  }
  #vision .img {
    width: 100%;
    min-height: 290px;
    margin: 0 0 50px 0;
  }
  #vision .content {
    width: 100%;
    text-align: left;
  }
  /* service */
  #service .service-area .content-area h3 {
    font-size: 2.0rem;
  }
  #service .service-area .content-area h3 span {
    font-size: 2.0rem;
  }
  #service .service-area .content-area p {
    font-size: 1.4rem;
  }
  #service .service-area {
    margin: 0 0 200px 0;
  }
  #service .service-area .content {
    width: 47%;
    top: 100px;
  }
  /* faq */
  #faq h3.title {
    font-size: 1.6rem;
  }
  #faq .accordion-area li {
    margin: 10px 0;
    font-size: 1.4rem;
  }
  .faq-bg {
    margin: 0 0 100px 15%;
  }
  .faq-bg, .faq-bg::after {
    height: 45vh;
  }
}
/* 768px以上、1189px以下
--------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1189px) {
  #pcnav {
    display: none;
  }
  /* splash */
  #splash-logo {
    font-size: 3.0rem;
  }
  /* header */
  #header h1, #header h1 .brpoint1 {
    font-size: 2.0rem;
    left: 7%;
  }
  #header h1 .brpoint1 {
    padding-top: 9px;
  }
  /* all */
  h2 {
    font-size: 3.2rem;
  }
  .topmark {
    top: 30vh;
    left: 15%;
  }
  .topmark .area1 {
    width: 70%;
    height: auto;
  }
  /* lead */
  .top-lead {
    top: 62%;
    left: 17%;
    font-size: 3.3rem;
    line-height: 2.0;
  }
  /* topics */
  #topics h2 {
    font-size: 3.2rem;
  }
  /* vision */
  #vision .vision-lead {
    font-size: 2.0rem;
  }
  #vision p {
    font-size: 1.6rem;
  }
  /* service */
  #service .service-area .content-area h3 {
    font-size: 2.2rem;
  }
  #service .service-area .content-area h3 span {
    font-size: 2.2rem;
  }
  #service .service-area .content-area p {
    font-size: 1.6rem;
  }
  /* faq */
  .faq-bg {
    margin: 0 0 100px 25%;
  }
  .faq-bg, .faq-bg::after {
	width: 50vw;
    height: 45vh;
  }
  #faq h3.title {
    font-size: 1.8rem;
  }
  #faq .accordion-area li {
    margin: 10px 0;
    font-size: 1.5rem;
  }
}
/* 1190px以上
--------------------------------------------*/
@media screen and (min-width:1190px) {
  /* splash */
  #splash-logo {
    font-size: 3.2rem;
  }
  /* header */
  #header h1, #header h1 .brpoint1 {
    font-size: 2.2rem;
    left: 8%;
  }
  #header h1 .brpoint1 {
    padding-top: 10px;
  }
  /* all */
  h2 {
    font-size: 3.4rem;
  }
  .topmark {
    top: 26vh;
    left: 15%;
  }
  .topmark .area1 {
    width: 80%;
    height: auto;
  }
  /* lead */
  .top-lead {
    top: 62%;
    left: 16%;
    font-size: 4.0rem;
    line-height: 2.0;
  }
  /* topics */
  #topics h2 {
    font-size: 3.4rem;
  }
  /* vision */
  #vision .vision-lead {
    font-size: 2.2rem;
  }
  #vision p {
    font-size: 1.8rem;
  }
  /* service */
  #service .service-area .content-area h3 {
    font-size: 2.4rem;
  }
  #service .service-area .content-area h3 span {
    font-size: 2.4rem;
  }
  #service .service-area .content-area p {
    font-size: 1.8rem;
  }
  /* faq */
  .faq-bg {
    margin: 0 0 100px 30%;
  }
  .faq-bg, .faq-bg::after {
	width: 60vw;
    height: 52vh;
  }
  #faq h3.title {
    font-size: 2.0rem;
  }
  #faq .accordion-area li {
    margin: 10px 0;
    font-size: 1.6rem;
  }
}
/* footer
------------------------------------------------------------*/
footer {
  padding: 30px 15px 30px 15px;
  margin-top: 0px;
  background: #999 url(../img/footerbg.png) repeat left top;
}
footer, #footerbox, #copyright {
  position: relative;
}
#footerbox {
  position: relative;
  margin: 5px auto;
  padding: 0px;
}
#footerbox #footergroup {
  overflow: hidden;
  margin: 0px auto;
}
#footerbox #footergroup figure.footright {
  float: right;
}
#footerbox #footergroup .footleft {
  float: none;
}
#footerbox #footergroup p {
  color: #CCC;
  padding: 5px;
  line-height: 1.6em;
}
#footerbox #footergroup p.gfonts2 {
  font-family: 'Allerta Stencil', sans-serif;
  color: #CCC;
}
#footerbox #footergroup p .fonts3 {
  text-transform: lowercase;
}
#footerbox #footergroup p.gfonts2 a:link, #footerbox #footergroup p.gfonts2 a:visited {
  text-decoration: none;
  color: #CCC;
}
#footerbox #footergroup p.gfonts2 a:hover, #footerbox #footergroup p.gfonts2 a:focus, #footerbox #footergroup p.gfonts2 a:active {
  text-decoration: none;
  color: #C60;
}
#copyright {
  text-align: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: solid 1px #dddddd;
}
#copyright p {
  color: #CCC;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1.5em;
}
#copyright p a:link, #copyright p a:visited {
  text-decoration: none;
  color: #CCC;
}
#copyright p a:hover, #copyright p a:focus, #copyright p a:active {
  text-decoration: none;
  color: #C60;
}
/* 519px以下
--------------------------------------------*/
@media screen and (max-width:519px) {
  #footerbox #footergroup {
    max-width: 100%;
    height: auto;
  }
  #footerbox #footergroup figure.footright {
    width: 25%;
    margin: 28px 0px 0px 0px;
  }
  #footerbox #footergroup .footleft {
    width: 75%;
    margin: 20px 0px 20px 10px;
  }
  #footerbox #footergroup figure.footright img.size {
    max-width: 60%;
    height: auto;
    border: none;
    margin: 0px 0px 20px 0px;
    line-height: 0;
  }
  #footerbox p {
    font-size: 1.0rem;
  }
  #footerbox p.gfonts2 {
    font-size: 1.6rem;
  }
  #copyright p {
    font-size: 1.0rem;
  }
  #copyright p small {
    font-size: 1.0rem;
  }
}
/* 520px以上599px以下
--------------------------------------------*/
@media screen and (min-width:520px) and (max-width:599px) {
  #footerbox #footergroup {
    max-width: 90%;
    height: auto;
  }
  #footerbox #footergroup figure.footright {
    width: 30%;
    margin: 26px 0px 0px 0px;
  }
  #footerbox #footergroup .footleft {
    width: 70%;
    margin: 20px 0px 20px 50px;
  }
  #footerbox #footergroup figure.footright img.size {
    max-width: 60%;
    height: auto;
    border: none;
    margin: 0px 0px 20px 0px;
    line-height: 0;
  }
  #footerbox p {
    font-size: 1.0rem;
  }
  #footerbox p.gfonts2 {
    font-size: 1.6rem;
  }
  #copyright p {
    font-size: 1.0rem;
  }
  #copyright p small {
    font-size: 1.0rem;
  }
}
/* 600px以上767px以下
--------------------------------------------*/
@media screen and (min-width:600px) and (max-width:767px) {
  #footerbox #footergroup {
    max-width: 80%;
    height: auto;
  }
  #footerbox #footergroup figure.footright {
    width: 28%;
    margin: 22px 0px 0px 0px;
  }
  #footerbox #footergroup .footleft {
    width: 72%;
    margin: 20px 0px 20px 20px;
  }
  #footerbox #footergroup figure.footright img.size {
    max-width: 65%;
    height: auto;
    border: none;
    margin: 5px 0px 20px 0px;
    line-height: 0;
  }
  #footerbox p {
    font-size: 1.1rem;
  }
  #footerbox p.gfonts2 {
    font-size: 1.7rem;
  }
  #copyright p {
    font-size: 1.1rem;
  }
  #copyright p small {
    font-size: 1.1rem;
  }
}
/* 768px以上、1189px以下
--------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1189px) {
  #footerbox #footergroup {
    max-width: 70%;
    height: auto;
  }
  #footerbox #footergroup figure.footright {
    width: 32%;
    margin: 28px 0px 0px 0px;
  }
  #footerbox #footergroup .footleft {
    width: 68%;
    margin: 20px 0px 20px 30px;
  }
  #footerbox #footergroup figure.footright img.size {
    max-width: 68%;
    height: auto;
    border: none;
    margin: 0px 0px 20px 0px;
    line-height: 0;
  }
  #footerbox p {
    font-size: 1.2rem;
  }
  #footerbox p.gfonts2 {
    font-size: 1.8rem;
  }
  #copyright p {
    font-size: 1.2rem;
  }
  #copyright p small {
    font-size: 1.2rem;
  }
}
/* 1190px以上
--------------------------------------------*/
@media screen and (min-width:1190px) {
  #return, #footerbox, #copyright {
    width: 1190px;
    margin-left: auto;
    margin-right: auto;
  }
  #footerbox #footergroup {
    max-width: 50%;
    height: auto;
  }
  #footerbox #footergroup figure.footright {
    width: 32%;
    margin: 28px 0px 0px 0px;
  }
  #footerbox #footergroup .footleft {
    width: 68%;
    margin: 24px 0px 20px 30px;
  }
  #footerbox #footergroup figure.footright img.size {
    max-width: 68%;
    height: auto;
    border: none;
    margin: 0px 0px 20px 0px;
    line-height: 0;
  }
  #footerbox p {
    font-size: 1.4rem;
  }
  #footerbox p.gfonts2 {
    font-size: 1.9rem;
  }
  #copyright p {
    font-size: 1.4rem;
  }
  #copyright p small {
    font-size: 1.4rem;
  }
}
/* 全体
------------------------------------------------------------*/
.online1, .online3, .campaign1, .campaign3, #catchbace1, #catchbace3 {
  position: relative;
}
/* オンライン講座
-----------------------------------------------------*/
/* online1
------------------------------------------------------------*/
.online1 figure .salebox {
  max-width: 100%;
  height: auto;
  margin-top: 25px;
}
.online1 a {
  display: block;
  margin-top: 0px;
}
.online1 a:link, .online1 a:visited {
  opacity: 1;
}
.online1 a:hover, .online1 a:focus, .online1 a:active {
  opacity: 0.7;
}
/* online3
------------------------------------------------------------*/
.online3 figure .salebox {
  max-width: 100%;
  height: auto;
  margin-top: 25px;
  margin-bottom: 10px;
}
.online3 a {
  display: none;
}
.online3 a:link, .online3 a:visited {
  opacity: 1;
}
.online3 a:hover, .online3 a:focus, .online3 a:active {
  opacity: 0.7;
}
/* 教材の入荷待ち時
-----------------------------------------------------*/
/* catchbace1
-----------------------------------------------------*/
#catchbace1 figure .salebox {
  max-width: 100%;
  height: auto;
  margin-top: 15px;
}
#catchbace1 a {
  display: block;
}
#catchbace1 a:link, #catchbace1 a:visited {
  opacity: 1;
}
#catchbace1 a:hover, #catchbace1 a:focus, #catchbace1 a:active {
  opacity: 0.7;
}
/* catchbace3
-----------------------------------------------------*/
#catchbace3 figure .salebox {
  max-width: 100%;
  height: auto;
  margin-top: 15px;
  margin-bottom: 25px;
}
#catchbace3 a {
  display: none;
}
#catchbace3 a:link, #catchbace3 a:visited {
  opacity: 1;
}
#catchbace3 a:hover, #catchbace3 a:focus, #catchbace3 a:active {
  opacity: 0.7;
}
/* 教材のセール
-----------------------------------------------------*/
/* campaign1
------------------------------------------------------------*/
.campaign1 figure .salebox {
  max-width: 100%;
  height: auto;
  margin-top: 15px;
}
.campaign1 a {
  display: block;
}
.campaign1 a:link, .campaign1 a:visited {
  opacity: 1;
}
.campaign1 a:hover, .campaign1 a:focus, .campaign1 a:active {
  opacity: 0.7;
}
/* campaign3
------------------------------------------------------------*/
.campaign3 figure .salebox {
  max-width: 100%;
  height: auto;
  margin-top: 15px;
  margin-bottom: 10px;
}
.campaign3 a {
  display: none;
}
.campaign3 a:link, .campaign3 a:visited {
  opacity: 1;
}
.campaign3 a:hover, .campaign3 a:focus, .campaign3 a:active {
  opacity: 0.7;
}
/* 599px以下
--------------------------------------------*/
@media screen and (max-width:599px) {
  .online1 a, #catchbace1 a, .campaign1 a {
    display: none;
  }
  .online3 a, #catchbace3 a, .campaign3 a {
    display: block;
  }
}
/* 600px以上、767px以下
--------------------------------------------*/
@media screen and (min-width:600px) and (max-width:767px) {
  .online1 a, #catchbace1 a, .campaign1 a {
    display: none;
  }
  .online3 a, #catchbace3 a, .campaign3 a {
    display: block;
  }
}
/* 768px以上、1189px以下
--------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1189px) {
  .online1 a, #catchbace1 a, .campaign1 a {
    display: block;
    max-width: 85%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .online3 a, #catchbace3 a, .campaign3 a {
    display: none;
  }
}
/* 1190px以上
--------------------------------------------*/
@media screen and (min-width:1190px) {
  .online1 a, #catchbace1 a, .campaign1 a {
    display: block;
    max-width: 75%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .online3 a, #catchbace3 a, .campaign3 a {
    display: none;
  }
}