@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;
}
/* font-family */
.top-lead, h1, h2, h3, #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;
}
/* header */
#header h1 {
  text-transform: capitalize;
  position: absolute;
  line-height: 1;
  letter-spacing: 0.1em;
}
#header h1, #header h1 .brpoint1 {
  display: block;
}
#header h1 a:link, #header h1 a:visited {
  color: #eb6100;
}
#header h1 a:hover, #header h1 a:focus, #header h1 a:active {
  color: #009;
}
h2 {
  text-transform: capitalize;
  font-size: 3rem;
}
/* lead */
.top-lead {
  position: fixed;
  text-transform: capitalize;
  font-weight: bold;
  color: #fff;
  line-height: 2.0;
}
.top-lead span.bgLRextend::before {
  background: #333;
}
.top-lead span.top-lead-last2 {
  padding-bottom: 20px;
  border-bottom: dashed rgba(255, 255, 255, 1.00) 2px;
}
.top-lead span.top-lead-last {
  line-height: 3.2;
}
/* 599px以下
--------------------------------------------*/
@media screen and (max-width:599px) {
  #pcnav {
    display: none;
  }
  /* header */
  #header h1, #header h1 .brpoint1 {
    font-size: 1.7rem;
    left: 7%;
  }
  #header h1 .brpoint1 {
    padding-top: 7px;
  }
  /* all */
  h2 {
    font-size: 2.6rem;
  }
  /* lead */
  .top-lead {
    top: 57%;
    left: 10%;
    font-size: 2.6rem;
    line-height: 2.0;
  }
  .top-lead span.top-lead-last span.small {
    font-size: 2.0rem;
  }
}
/* 600px以上、767px以下
--------------------------------------------*/
@media screen and (min-width:600px) and (max-width:767px) {
  #pcnav {
    display: none;
  }
  /* header */
  #header h1, #header h1 .brpoint1 {
    font-size: 1.9rem;
    left: 5%;
  }
  #header h1 .brpoint1 {
    padding-top: 8px;
  }
  /* all */
  h2 {
    font-size: 3.0rem;
  }
  /* lead */
  .top-lead {
    top: 57%;
    left: 13%;
    font-size: 3.0rem;
    line-height: 1.8;
  }
  .top-lead span.top-lead-last span.small {
    font-size: 2.2rem;
  }
}
/* 768px以上、1189px以下
--------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1189px) {
  #pcnav {
    display: none;
  }
  /* header */
  #header h1, #header h1 .brpoint1 {
    font-size: 2.0rem;
    left: 4%;
  }
  #header h1 .brpoint1 {
    padding-top: 9px;
  }
  /* all */
  h2 {
    font-size: 3.2rem;
  }
  /* lead */
  .top-lead {
    top: 60%;
    left: 15%;
    font-size: 3.4rem;
    line-height: 2.0;
  }
  .top-lead span.top-lead-last span.small {
    font-size: 2.6rem;
  }
}
/* 1190px以上
--------------------------------------------*/
@media screen and (min-width:1190px) {
  /* header */
  #header h1, #header h1 .brpoint1 {
    font-size: 2.2rem;
    left: 3%;
  }
  #header h1 .brpoint1 {
    padding-top: 10px;
  }
  /*pcnav*/
  #pcnav {
    width: 60%;
    margin-left: 33%;
    margin-right: 7%;
    font-size: 1.6rem;
  }
  #pcnav span.bgLRextend::before {
    background: #333;
  }
  /* all */
  h2 {
    font-size: 3.4rem;
  }
  /* lead */
  .top-lead {
    top: 58%;
    left: 15%;
    font-size: 3.9rem;
    line-height: 2.0;
  }
  .top-lead span.top-lead-last span.small {
    font-size: 3.0rem;
  }
}
/* 全体
------------------------------------------------------------*/
.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;
  }
}