@charset "UTF-8";
.sp {
  display: none;
}

#container {
  width: 100%;
  color: #333333;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-feature-settings: "palt";
}

body.mac {
  font-size: 15px;
}

div#wrap-container {
  padding: 0;
  width: 100%;
}

#main-contents {
  width: 100%;
  margin: 0 0 6%;
}

h1 {
  border-bottom: 1px solid #cccccc;
  font-size: 1.8em;
  margin: 0 0 12px;
  padding-bottom: 4px;
  font-weight: 700;
  line-height: 1;
}

p.title_banner {
  width: 980px;
  margin: 0 auto;
}

/* リード文 */
div#read-inner {
  width: 980px;
  margin: 0 auto;
  padding: 0 0 3%;
}

div #read {
  width: 980px;
  font-size: 0.95em;
  width: 930px;
  margin: 0 auto 20px;
  line-height: 1.7;
}

#read p {
  margin: 5% auto 3%;
  font-size: 1.1em;
  line-height: 1.8em;
  font-weight: 400;
  letter-spacing: 0.3px;
}

#read p strong {
  display: block;
  font-size: 1.5em;
  text-align: center;
  margin: 0 0 2%;
}

.read-ul {
  background-color: #f5f5f5;
  margin: 20px auto 25px 3.5%;
  width: 775px;
  text-align: center;
}

#read ul.what-image {
  display: flex;
  width: 90%;
  margin: 0 auto;
}

#read ul.what-image li {
  width: 23%;
  text-align: center;
  margin: 0 1%;
}

#read ul.what-image li img {
  width: 100%;
}

#read ul.what-image li span {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin: 5% 0 0;
}

#read dl {
  width: 55%;
  margin: 3.5% auto 0;
  border: 2px solid #FA838C;
  border-radius: 0.4em;
  padding: 3% 5.5%;
  color: #F96772;
}

#read dl dt {
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  margin: 0 0 2.5%;
}

#read dl dd {
  font-size: 1.15em;
  line-height: 1.8;
}

#read dl dd img {
  width: 20px;
  vertical-align: middle;
  margin: 0 1% 0 0;
}

/* ポイント */
div#point {
  width: 100%;
  padding: 65px 0;
  margin: 0 0 20px;
  background: #fed2df;
  background: linear-gradient(90deg, #fed2df 0%, #fedbd5 100%);
}

div#point-inner {
  width: 980px;
  margin: 0 auto;
}

div#point-inner p {
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  margin: 0 0 3%;
}

div#point-inner p span {
  display: block;
  margin: 0 0 1%;
  font-size: 1.3rem;
}

div.point-area-t,
div.point-area-s {
  background-color: #FFFFFF;
  position: relative;
}

div.point-area-t {
  width: 42%;
  float: left;
  padding: 3%;
}

div.point-area-s {
  width: 42%;
  float: right;
  padding: 3%;
}

div.point-area-t a {
  color: #FB4B87;
}

div.point-area-s a {
  color: #FF7948;
}

div#point-inner div.point-area-t p.kind,
div#point-inner div.point-area-s p.kind {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.05rem;
  font-weight: bold;
  color: #FFFFFF;
  padding: 4% 5%;
}

div.point-area-t p.kind {
  background-color: #FB4B87;
}

div.point-area-s p.kind {
  background-color: #FF7948;
}

div.point-area-t img,
div.point-area-s img {
  display: block;
  width: 47%;
  margin: 0 auto;
}

div.point-area-t ul,
div.point-area-s ul {
  margin: 11% 0 0;
}

div.point-area-t ul li,
div.point-area-s ul li {
  margin: 0 0 7%;
  font-size: 1.1rem;
}

div.point-area-t ul li a,
div.point-area-s ul li a {
  opacity: 1;
  transition: 0.2s;
}

div.point-area-t ul li a:hover,
div.point-area-s ul li a:hover {
  opacity: 0.6;
  transition: 0.2s;
}

/* ポイント一覧 */
div#point-list.teacher {
  background-color: #FFEAF0;
}

div#point-list.student {
  background-color: #FDE9BE;
}

div#point-list {
  width: 100%;
  padding: 75px 0;
}

div#point-list div#teacher-title {
  width: 980px;
  margin: 0 auto;
  text-align: center;
}

div#point-list div#student-title {
  width: 980px;
  margin: 0 auto;
  text-align: center;
}

div#point-list div#teacher-title img {
  display: block;
  width: 20%;
  margin: 0 auto;
}

div#point-list div#student-title img {
  display: block;
  width: 20%;
  margin: 0 auto;
}

div#point-list div#teacher-title span {
  display: block;
  color: #FB4B87;
  font-size: 1.85em;
  font-weight: bold;
  margin: 4% 0 3%;
}

div#point-list div#student-title span {
  display: block;
  color: #FF7948;
  font-size: 1.85em;
  font-weight: bold;
  margin: 4% 0 3%;
}

div.point-list-inner {
  width: 980px;
  margin: 0 auto 7%;
}

div.point-list-inner:nth-last-of-type(1) {
  width: 980px;
  margin: 0 auto;
}

div#point-list.teacher div.point-list-inner h2 {
  font-size: 1.7em;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 2%;
  color: #F55076;
}

div#point-list.student div.point-list-inner h2 {
  font-size: 1.7em;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 2%;
  color: #FF7948;
}

div#point-list h2 img {
  width: 17px;
  vertical-align: -2px;
  margin: 0 10px 0 0;
}

div#point-list h2 span {
  display: inline-block;
  text-align: left;
  text-indent: -1.05em;
}

div#point-list div.point-detail {
  background-color: #FFFFFF;
  padding: 9% 0 5%;
}

div#point-list div.content {
  width: 920px;
  margin: 0 auto;
}

div.content-cate {
  margin: 0 0 10%;
}

div.content-cate img {
  width: 54%;
  margin: 0 3% 0 0;
  vertical-align: top;
}

div.content-cate p.list-read {
  display: inline-block;
  vertical-align: top;
  font-size: 1.15em;
  line-height: 1.8;
  margin: 0 0 7%;
  width: 42%;
}

div.detail-list {
  display: flex;
  flex-wrap: wrap;
}

div.detail-list:nth-last-of-type(1) {
  margin: 0;
}

div.detail-outer {
  width: 28%;
  margin: 0 8% 8% 0;
}

div.detail-outer:nth-of-type(3n) {
  margin: 0 0 5%;
}

img.detail-image {
  width: 100%;
  border: 2px solid #CCCCCC;
  margin: 0 0 10%;
}

div.detail-left {
  float: right;
}

div.detail-left p.detail-caption {
  font-size: 1.03em;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 5%;
}

div.detail-left a {
  color: #004DA2;
}

div.detail-left a:hover {
  color: #FF0000;
}

div.detail-left dt {
  margin: 0 0 2%;
  line-height: 1.4;
}

div.detail-left dd img {
  margin: 0 5px 0 0;
  vertical-align: -2px;
}

div.teacher div.other-link {
  text-align: center;
  margin: 0;
}

div.other-link a img {
  width: 4%;
  vertical-align: -3px;
  margin: 0 0 0 2%;
}

div.other-link.sepa {
  text-align: center;
  margin: 5% 0 0;
}

div.teacher div.other-link a {
  display: inline-block;
  padding: 2%;
  margin: 0 4% 5% 0;
  border: 2px solid #FF6797;
  border-radius: 0.3em;
  font-size: 1.2em;
  font-weight: 700;
  color: #FF6797;
  width: 40%;
  text-align: left;
  background: url(/static/images/seihin_joho/online-lesson/arrow_pink.png) no-repeat 94% 50%;
}

div.student div.other-link a {
  display: inline-block;
  padding: 2%;
  margin: 0 4% 5% 0;
  border: 2px solid #FF6D3F;
  border-radius: 0.3em;
  font-size: 1.2em;
  font-weight: 700;
  color: #FF6D3F;
  width: 40%;
  text-align: left;
  background: url(/static/images/seihin_joho/online-lesson/arrow_orange.png) no-repeat 94% 50%;
}

div.teacher div.other-link a:nth-of-type(2n),
div.student div.other-link a:nth-of-type(2n) {
  margin: 0 0 5% 0;
}

div.other-link a:nth-last-of-type(1) {
  margin: 0;
}

div.other-link a:hover {
  text-decoration: none;
  opacity: 0.6;
}

span.triangle {
  display: inline-block;
  width: 15px;
  height: 17px;
  transform: matrix(0, 1, -1, 0, 0, 0);
  background: #FFFFFF 0 0 no-repeat padding-box;
  opacity: 1;
}

p.attention {
  border: 1px solid #0099FF;
  color: #0099FF;
  text-align: center;
  padding: 1.8% 0;
  width: 80%;
  margin: 0 auto 4%;
}

p.attention a {
  color: #0099FF;
}

p.attention a:hover {
  color: #FF0000;
}

div #relation-outer {
  width: 100%;
  margin: 0 0 5%;
}

div .relation {
  width: 980px;
  margin: 100px auto 0;
}

.relation h3 {
  font-size: 1.6em;
  text-align: center;
  padding: 13px 0;
  color: #fff;
  background-color: #004DA2;
}

.relation img {
  width: 230px;
  height: 153px;
  margin: 20px 15px 0 0;
}

.link-img li {
  display: inline;
}

.link-img li:nth-child(4n) img {
  margin-right: 0;
}

/* バナーエリア */
div#banner-area {
  margin: 0 0 5%;
}

/* clfx */
.clfx:after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}