@charset "utf-8";
/*全スタイル共通*/
li {list-style: none;}
a {text-decoration: none;border: none;color: #005EA2;}
html {margin: 0;width: 100%;color: #005EA2;scroll-behavior: smooth;font-family: 'Noto Sans JP';}
body {padding: 0;border: none;margin: 0 auto;}
p {margin: 0;padding: 0;text-align:justify;}
.left {text-align: left;}
button:focus {outline: none;}
*{font-feature-settings:"palt"1;letter-spacing:1px;}

/* ---------------------none----------------------- */
.main_image,.flow_pc,.flow08_pc,.lesson_title_pc{
  display:none;}

@media (min-width: 500px) {
br.pc_none {
	display: none;
}
}
  
/*top*/
.main_view {
  background: url(image/top.webp) no-repeat;
  background-size: cover;
  width: 100%;
  background-position: center top;
  padding-top: 193%;
  margin: 0 auto;}
.scroll {
  font-weight: bolder;
  font-size:1.5em;
  text-align: center;
  width: 100%;
  line-height: 1em;
  font-family: 'Oswald';
  letter-spacing: 0.04em;
  margin-top: 10%;}
.line0 {
  border-top: 3px solid #005EA2;
  margin: 10% 3% 8%;}
.news_title {
  width: 190px;
  margin:14% auto 3%;
  text-align: center;
  font-family: 'Oswald';
  letter-spacing: 1px;
  font-size: 33px;}

/*main*/
main {
  width:100%;
  margin:0 auto;}
.baner img {
  width: 80%;
  display: block;
  margin: 10% auto 0;}
.baner_text {
  margin: 0 auto 10%;
  text-align:center;}

/*news*/
#news {
  margin:0 auto;
  width:80%;
  padding-bottom: 15%;}
.news_open {
  color:#4F555D;
  width: 90%;
  margin: 0 auto;}
.news_text {
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
  height:207px;
  transition: .5s;
  line-height:20px;
  text-align:justify;
  font-size: 13px;
  letter-spacing:1px;}
.news_text a {
  color:#666;
  border-bottom: 1px solid;}
.news_text a .small {
  border: none;
  font-size: 10px;}
.news_text > input {
  display: none;}
.news_text > label {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: linear-gradient( rgba(255, 255, 255, 0.20),#ffffff 60% );
  padding-top: 40px;
  text-align: center;
  font-size: 1em;
  color: #005EA2;}
.news_text > input[type="checkbox"]:checked + label {
  height: 25px;
  padding-top: 5px;
  font-size: 1em;}
.news_text > input[type="checkbox"]:not(:checked) + label::after {
  content: "▼";}
.news_text > input[type="checkbox"]:checked + label::after {
  content: "▲";}
.news_text #doc0 b {
line-height:30px;}

/*message*/
#message{
  background: url(image/message.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding:360% 0 0;
  margin: 0 auto;}

/*flow*/
.flow{
  background: url(image/flow.webp) no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  padding:410% 0 0;
  margin:10% auto 0;}
.flow_content {
  padding:0;}
.flow01,.flow02,.flow03,.flow04,.flow05,.flow06,.flow07 {
  width: 100%;
  padding:39% 0 0;
  margin:5% auto;}
.flow01{
  background: url(image/flow01.webp) no-repeat;
  background-size: cover;}
.flow02{
  background: url(image/flow02.webp) no-repeat;
  background-size: cover;}
.flow03{
  background: url(image/flow03.webp) no-repeat;
  background-size: cover;}
.flow04{
  background: url(image/flow04.webp) no-repeat;
  background-size: cover;}
.flow05{
  background: url(image/flow05.webp) no-repeat;
  background-size: cover;}
.flow06{
  background: url(image/flow06.webp) no-repeat;
  background-size: cover;}
.flow07{
  background: url(image/flow07.webp) no-repeat;
  background-size: cover;}
.flow08{
  background: url(image/flow08.webp) no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 4000px;
  padding:60% 0 0;
  margin: 7% auto 15%;}

  @media screen and (min-width: 340px) {
    .flow08{
      height: 3400px;
    }
  }

  @media screen and (min-width: 370px) {
    .flow08{
      height: 3800px;
    }
  }

    @media screen and (min-width: 410px) {
    .flow08{
      height: 4000px;
    }
  }

  @media screen and (min-width: 430px) {
    .flow08{
      height: 4200px;
    }
  }

  @media screen and (min-width: 768px) {
    .flow08{
      height: 6600px;
    }
  }


  /*lesson*/
.lesson01,.lesson03,.lesson05,.lesson07 {
  padding-bottom: 30%;
  background-color: #005EA2;}
.lesson02,.lesson04,.lesson06 {
  padding-bottom:30%;
  background-color: #fff;}
.lesson01 .profile_title,.lesson03 .profile_title,.lesson05 .profile_title,.lesson07 .profile_title{
  color: #fff;}
.lesson_title {
  background: url(image/lesson_title.webp) no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 96% 0 0;
  margin: 11% auto 0;}
.program {
  margin: 15% auto 0;
  font-size:14px;
  text-align:justify;}


.line01 {
  border-top: 1px solid #fff;
  margin: 11% 66% 13% 1%;}
.line02 {
  border-top: 1px solid #005EA2;
  margin: 11% 66% 13% 1%;}


/*プログラム内容のボタン内*/
.box_one {
  font-size:14px;
  line-height: 25px;
  padding:0 10% 10%;}

.profile_title {
  font-family: 'Oswald';
  color: #005EA2;
  text-align:justify;
  font-size: 2em;
  margin:0 auto;
  margin: 18% auto 10%;
  letter-spacing: 3px;}
.profile_title small {
  font-size:11px;}

.open_button img,.close_button img {
  display: block;
  width: 80%;
  height: auto;
  margin:15% auto 0;}
.open_button img {
  height: auto;
  transition:all 0.4s ease-in-out;}
.open_button:hover img{
  transform:scale(1.08);}
.accordion_inner {
  display: none;}
.lesson01_sign img,.lesson02_sign img,.lesson03_sign img,.lesson04_sign img,.lesson05_sign img,.lesson06_sign img {
  width: 80%;
  height: auto;
  margin:10% 0 5% 21%;}

.lesson01,.lesson01 a {
  color:#fff;}
.lesson01 {
  line-height: 25px;}
#lesson01 {
  background: url(image/lesson01.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding:140% 0 0;
  margin: 0 auto;}
.lesson01_schedule {
  background: url(image/lesson01_schedule.webp) no-repeat;
  background-size: cover;
  background-position: center;
  margin:20% auto 20%;
  padding:140% 0 0;
  width: 85%;}
.lesson01_button {
  border-bottom: 2px solid #fff;
  width:185px;
  text-align: center;
  font-size: 15px;
  line-height: 31px;
  font-weight: bold;
  margin: 0 auto;
  letter-spacing: 2px;}

.program01_title,.program02_title,.program03_title,.program04_title,.program05_title,.program06_title {
  margin:10% auto;
  letter-spacing: 2px;}

.program_content small {
  line-height: 17px;
  font-size:10px;}

#lesson02 {
  background: url(image/lesson02.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding:141% 0 0;
  margin: 0 auto;}
.lesson02_schedule {
  background: url(image/lesson02_schedule.webp) no-repeat;
  background-size: cover;
  background-position: center;
  width: 85%;
  margin: 20% auto 20%;
  padding:310% 0 0;}
.lesson02_button {
  border-bottom: 2px solid #005ea2;
  width:145px;
  text-align: center;
  font-size: 15px;
  line-height: 31px;
  font-weight: bold;
  margin: 0 auto;
  letter-spacing: 2px;}

.lesson03,.lesson03 a {
  color:#fff;}
.lesson03 {
  line-height: 25px;}
#lesson03{
  background: url(image/lesson03.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding:139% 0 0;
  margin: 0 auto;}
.lesson03_schedule {
  background: url(image/lesson03_schedule.webp) no-repeat;
  background-size: cover;
  background-position: center;
  margin: 20% auto 20%;
  padding:450% 0 0;
  width: 85%;}
.lesson03_button {
  border-bottom: 2px solid #fff;
  width:145px;
  text-align: center;
  font-size: 15px;
  line-height: 31px;
  font-weight: bold;
  margin: 0 auto;
  letter-spacing: 2px;}

#lesson04{
  background: url(image/lesson04.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding:139% 0 0;
  margin: 0 auto;}

.lesson04_schedule {
  background: url(image/lesson04_schedule.webp) no-repeat;
  background-size: cover;
  background-position: center;
  margin:20% auto 20%;
  padding:300% 0 0;
  width: 85%;}

.lesson04_schedule_message {
  width: 85%;
  margin: 0 auto 10%;}

.lesson04_button {
  border-bottom: 2px solid #005ea2;
  width:145px;
  font-size: 15px;
  line-height: 31px;
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
  letter-spacing: 2px;}

.lesson05,.lesson05 a {
  color:#fff;}
.lesson05 {
  line-height: 25px;}
#lesson05{
  background: url(image/lesson05.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding:139% 0 0;
  margin: 0 auto;}
.lesson05_schedule {
  background: url(image/lesson05_schedule.webp) no-repeat;
  background-size: cover;
  background-position: center;
  margin: 20% auto 20%;
  padding:63% 0 0;
  width: 85%;}
.lesson05_button {
  border-bottom: 2px solid #fff;
  width:155px;
  text-align: center;
  font-size: 15px;
  line-height: 31px;
  font-weight: bold;
  margin: 0 auto;
  letter-spacing: 2px;}

#lesson06{
  background: url(image/lesson06.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding:139% 0 0;
  margin: 0 auto;}
.lesson06, .lesson06 a, .lesson06 .profile_title {
  color:#005ea2;}
.line06 {
  border-top: 1px solid #005ea2;
  margin: 11% 66% 13% 1%;}
.lesson06_schedule {
  background: url(image/lesson06_schedule.webp) no-repeat;
  background-size: cover;
  background-position: center;
  margin:20% auto 20%;
  padding:250% 0 0;
  width: 85%;}
.lesson06_button {
  border-bottom: 2px solid #005ea2;
  width:160px;
  text-align: center;
  font-size: 15px;
  line-height: 31px;
  font-weight: bold;
  margin: 0 auto;
  letter-spacing: 2px;}
.lesson06_button a {
  color: #005ea2;}

.lesson07,.lesson07 a {
  color:#fff;}
.lesson07 {
  line-height: 25px;}
#lesson07{
  background: url(image/lesson07.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding:139% 0 0;
  margin: 0 auto;}
.lesson07_schedule {
  background: url(image/lesson07_schedule.webp) no-repeat;
  background-size: cover;
  background-position: center;
  margin: 20% auto 20%;
  padding:480% 0 0;
  width: 85%;}
.lesson07_button {
  border-bottom: 2px solid #fff;
  width:155px;
  text-align: center;
  font-size: 15px;
  line-height: 31px;
  font-weight: bold;
  margin: 0 auto;
  letter-spacing: 2px;}


/*button01*/
.cp_button01 img, .cp_button02 img, .cp_button03 img {
  display: block;
  width: 80%;
  height: auto;
  margin:25% auto}
.cp_button02 img,.cp_button03 img {
  margin-top:25%; height: auto;}


/*content*/
.content {
  background: url(image/contents.webp) no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  padding:180% 0 0;
  margin: 0 auto;}

/*rule*/
.rule {
  background: url(image/rule.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding: 135% 0 0;
  margin: 0 auto;}

/*outline*/
.outline {
  background: url(image/outline.webp) no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  padding:310% 0 0;;
  margin: 0 auto;}

/*video*/
#video {
  width:300px;
  height:100%;
  margin:70px auto 0;
  display: block;}
.video {
  width:100%;
  height:100%;
  display: block;
  margin:0 auto;}
#video iframe {
  width: 100%;
  height:100%;}

/*voice*/
#voice {
  margin:30% auto 0;}
#voice img {
  display: block;
  width: 55%;
  height: auto;
  margin: 5% auto 10%;}
.voice_name {
  margin:7% auto;}
.voice_name b {
  font-size: 1.3em;
  letter-spacing: 2px;
  line-height:25px;}
.voice_content {
  font-size: 16px;
  letter-spacing:-0.5px;
  padding-bottom: 0px;}
.voice_photo img {
  width: 70%; height: auto;}
.nextReadBox {
  position: relative;
  overflow: hidden;
  transition: 1s;
  height:210px;
  padding: 0 30px 20px 20px;
  margin:0 auto 13%;
  font-size: 13px;
  letter-spacing: 2px;
  text-align:justify;}
.nextReadBox > label {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: linear-gradient( rgba(255, 255, 255, 0.20),#ffffff 60%);
  padding-top: 40px;
  text-align: center;
  font-size: 13px;
  color: #005EA2;}
.nextReadBox > input {
  display: none;}
.nextReadBox > input[type="checkbox"]:not(:checked) + label::after {
  content: "続きを開く";}
.nextReadBox > input[type="checkbox"]:checked + label::after {
  content: "閉じる";}

/*faq*/
.faq_title img {
  width: 30%;
  height: auto;
  display: block;
  margin: 10% auto;}
.faq_contents {
  font-size:16px;
  letter-spacing: 2px;
  width: 85%;
  text-align:justify;
  margin: 0 auto;}
.faq_contents p {
  font-size:14px;
  margin: 4% 1% 9%;
  background-color: rgba(0,94,171,0.2);
  padding: 4% 5%;}

.circle_button a {
  position: fixed;
  width:100%;
  right: -69%;
  bottom:1%;}
.circle_button img {
  width: 30%; height: auto;}

.top_button img {
  margin:0 auto;
  width: 25%;
  display: block;
  height: auto;
}

/*footer*/
.footer {
  margin: 30% auto;}
.footer p {
  text-align: center;
  font-size: .8em;
  margin: 2% auto 0;}
.footer p a {
    color: #005EA2;}

footer {
  color:#fff;
  padding-bottom: 5%;
  background-color: #005EA4;}
.cr-sis a img {
  margin: 0 auto;
  width: 90%;
  height: auto;
  display: block;
  padding: 15% 0 0;}
.cr-sis p {
  text-align: center;
  margin: 7% auto 0;
  width: 80%;
  font-size: 0.7em;
  letter-spacing: 1px;}
.cr-sis p a {
  color:#ffda7b;}

#sns_icon {
  display: flex;
  width: 30%;
  height: auto;
  margin: 20% auto 15%;
  padding: 0;}
#sns_icon li {
    width: 100%;
    height: auto;
    margin: 0 7%;}
#sns_icon img {
  width: 100%;height: auto;}

.logo {
  margin: 11% auto 7%;
  padding-top: 3%;}
.logo img {
  display: block;
  margin: 0 auto;
  width: 80%;
  height: auto;}
.copyright {
  letter-spacing: 1px;
  font-size: 0.4em;
  margin:10% auto 0;
  text-align:center;}


@media screen and (min-width: 350px) {
  .news_open {
    width: 85%;}
  .news_text > input[type="checkbox"]:checked + label{
    font-size:1.2em;}
  .nextReadBox{
    padding:0 30px 30px 20px;}
}

/*
@media screen and (min-width: 500px) {
  #main {
    width: 70%;
    background-color: #fff;}
  .main_view {
    background: url(image/top_tab.webp) no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 118%;}
  .scroll {
    margin-top: 7%;}
  .baner img{
    width:60%;}
  .news_open {
    width:80%;
    font-size:1.2em;
    line-height:2em;}
  #message {
    background: url(image/message_tab.webp) no-repeat;
    background-size: cover;
    padding:215% 0 0;}
  .line01 {
    margin: 14% 66% 11% 1%;}
  .lesson01_program_title, .lesson02_program_title,.lesson03_program_title, .lesson04_program_title,.lesson05_program_title, .lesson06_program_title, .lesson07_program_title {
    font-size: 1.5em;}
  .lesson01_program_content, .lesson02_program_content,.lesson03_program_content, .lesson04_program_content,.lesson05_program_content, .lesson06_program_content, .lesson07_program_content {
    line-height: 2.5em;
    font-size: 1.3em;}
  .open_button img, .close_button img {
    width: 60%;}
  .cp_button01 img, .cp_button02 img, .cp_button03 img {
    width: 60%;}
  .nextReadBox {
    padding: 0 30px 66px 20px;}
  #voice img {
    width:70%;}
  .nextReadBox > label {
    font-size:1em;}
  .faq_contents {
    font-size:1.2em;}
  .faq_contents p {
    letter-spacing:0px;
    font-size:1em;}
  .circle_button a {
    right:-78%;}
  .circle_button img {
    width: 16%;}
  .top_button img {
    width: 15%;}
  .cr-sis a img {
    width: 60%;
    padding: 10% 0 0;}
  .cr-sis p {
    margin: 4% auto 0;}
  #sns_icon {
    width: 40%;
    margin: 15% auto;}
  .logo img {
    width: 60%;}}
*/
@media screen and (min-width: 500px) {
  #video{
    height:230px;
    width:400px;}
}

@media screen and (min-width: 700px) {
  #main {
    width:700px;}
  .main_view {
    background: url(image/top_tab.webp) no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 118%;}
  .news_open {
    font-size:1.3em;}
  .news_text {
    font-size: 18px;
    line-height:30px;
    height:220px;}
  #message {
    background: url(image/message_tab.webp) no-repeat;
    background-size: cover;
    background-position: center;
    padding:215% 0 0;}

  .open_button img, .close_button img {
    width: 70%;}
  .program {
    font-size: 21px;
    line-height: 34px;}
  .lesson01,.lesson03,.lesson05 {
    line-height: 31px;}
  .program_content small {
    line-height: 22px;
    font-size: 13px;}
  .box_one {
    font-size: 21px;
    line-height: 37px;}
  .lesson01_sign img, .lesson02_sign img, .lesson03_sign img, .lesson04_sign img, .lesson05_sign img, .lesson06_sign img{
    width: 50%;
    margin: 10% 0 10% 50%;}
  .open_button img, .close_button img{
    width: 55%;}
  .profile_title{
    font-size: 3em;
    margin-bottom: 13%;}
  .profile_title small {
    font-size: 14px;}
  .lesson01_button, .lesson02_button, .lesson03_button, .lesson04_button, .lesson05_button, .lesson06_button .lesson07_button{
    width: 240px;
    border-bottom: 4px solid #fff;
    font-size: 20px;
    line-height: 51px;}
  .lesson04_schedule_message, .lesson04_schedule_message p, .lesson04_schedule_message p small{
    display:block;
    text-align: justify;
    font-size:18px;}
  .lesson02_button,.lesson04_button{
    border-bottom: 4px solid #005EA2;
    width:200px;}
  .lesson06_button{
    border-bottom: 4px solid #000;
    width:200px;}
  .lesson03_button{
    width:200px;}
  .lesson05_button{
    width:220px;}
  .cp_button01 img,.cp_button02 img,.cp_button03 img {
    width: 50%;}
  .top_button img {
    width: 15%;}


  .nextReadBox {
    font-size: 16px;
    padding: 0 30px 110px 20px;}

  #video {
    height: 300px;
    width: 500px;}
  #voice {
    margin:10% auto 0;}
  .voice_content {
    font-size:18px;}
  .faq_contents {
    font-size: 17px;}
  .faq_contents p {
    font-size: 15px;}
  .circle_button img {
    width: 20%; height: auto;}
  .circle_button a {
    right: -78%;}
  .footer p {
    font-size:1.3em;}
  .cr-sis a img {
    width: 45%;
    padding: 7% 0 0;}
  .cr-sis p {
    font-size:1.1em;}
  #sns_icon {
    width:20%;
    height: auto;
    margin: 12% auto;}
  .logo img {
    width: 70%;}
}

@media screen and (min-width: 800px){
  .lesson01_button, .lesson02_button, .lesson03_button, .lesson04_button, .lesson05_button, .lesson06_button .lesson07_button{
    font-size: 25px;
    width: 290px;}
  .baner img{
    margin-top:5%;
    width:400px;}
  .baner_text{
    margin-bottom:5%;}
  .voice_name {
    line-height:41px;}
  .voice_content{
    line-height:30px;}
  .nextReadBox{
    margin-bottom:10%;
    font-size:19px;}
  #voice img {
    width: 35%;margin: 10% auto 10%;}
  .faq_title img {
    width:20%;}
  .faq_contents {
    font-size: 23px;}
  .faq_contents p {
    font-size: 20px;}
  .footer {
    margin: 15% auto;}
}

@media screen and (min-width: 1000px) {
  .program, .program01_content, .program_content {
    font-size: 26px;
    line-height: 37px;}
  .program_content small {
    font-size:16px;}
  .open_button img, .close_button img {
    width:60%;
    margin:110px auto 0;}
  .profile_title small {
    font-size: 20px;}
  .profile_content {
    font-size: 22px;
    line-height: 36px;}
  .lesson01_sign img, .lesson02_sign img, .lesson03_sign img, .lesson04_sign img, .lesson05_sign img, .lesson06_sign img {
    width: 60%;
    margin: 10% 0 10% 40%;}

  #video {
    margin:120px auto 0;
    width:700px;
    height:395px;}
  .voice_name b {
    font-size:27px;
    letter-spacing: 3px;}
  .voice_content {
    line-height: 37px;
    font-size: 23px;
    letter-spacing: 1px;}
  .faq_contents {
    font-size: 27px;
    width:95%;}
  .faq_contents p {
    font-size: 25px;}
  .footer p {
    font-size: 20px;}
  .cr-sis p {
    margin: 3% auto 0;
    font-size: 17px;}
  .logo img {
    width:65%;}
  .copyright {
    font-size:18px;}
}

@media screen and (min-width: 1100px) {
  .flow,.flow08,.lesson_title{
    display: none;}
  .baner img{
    margin-top:2%;
    width:500px;}
  .baner_text{
    margin-bottom:2%;}
  #main {
    width:inherit;}
  .main_view {
    background: url(image/top_pc.webp) no-repeat;
    background-size: cover;
    padding-top:43%;}
  .line0 {
    margin: 3% 3%;}
  .news_open {
    width: 700px;}
  .news_title {
    margin:3% auto 0;}
  #news {
    width: 620px;
    padding-bottom: 10%;}
  #message {
    background: url(image/message_pc.webp) no-repeat;
    background-size: cover;
    padding:80% 0 0;}

  .flow_pc{
    display: block;
    background: url(image/flow_pc.webp) no-repeat;
    background-size: cover;
    width:700px;
    height:1100px;
    margin:30px auto 0;}
  .flow_content{
    display: block;
    width:700px;
    margin:0 auto;}
  .flow01, .flow02, .flow03, .flow04, .flow05, .flow06, .flow07{
    background-size: contain;
    padding:135px 0 0;
    width: 340px;
    margin:8px auto;
    display: inline-block;}
  .flow01,.flow03,.flow05{
    margin-right:14px;}
  .flow08_pc {
    display: block;
    background: url(image/flow08_pc.webp) no-repeat;
    background-size: cover;
    background-position: center;
    width:700px;
    height:3100px;
    margin:1% auto 15%;}

  .lesson{
    background-color:#005EA2;}
  .lesson_title_pc{
    display: block;
    background: url(image/lesson_title_pc.webp) no-repeat;
    background-size: cover;
    width:700px;
    margin:0 auto;
    height:460px;}
  .lesson01_back{
    width:100%;
    background-color:#e0c49a;}
  .lesson02_back{
    width:100%;
    background-color: #e5eaed;}
  .lesson03_back{
    width:100%;
    background-color:#e2c484;}
  .lesson04_back{
    width:100%;
    background-color:#D5CBB2;}
  .lesson05_back{
    width:100%;
    background-color:#c3d0db;}
  .lesson06_back{
    width:100%;
    background-color:#8cb0bb;}
  .lesson07_back{
    width:100%;
    background-color:#eceee9;}
  #lesson01{
    padding:525px 0 0;
    display: block;
    background: url(image/lesson01_pc.webp) no-repeat;
    background-size: cover;
    width:700px;}
  #lesson02{
    padding:674px 0 0;
    display: block;
    background: url(image/lesson02_pc.webp) no-repeat;
    background-size: cover;
    width:900px;}
  #lesson03{
    padding:674px 0 0;
    display: block;
    background: url(image/lesson03_pc.webp) no-repeat;
    background-size: cover;
    width:900px;}
  #lesson04{
    padding:674px 0 0;
    display: block;
    background: url(image/lesson04_pc.webp) no-repeat;
    background-size: cover;
    width:900px;}
  #lesson05{
    padding:674px 0 0;
    display: block;
    background: url(image/lesson05_pc.webp) no-repeat;
    background-size: cover;
    width:900px;}
  #lesson06{
    padding:674px 0 0;
    display: block;
    background: url(image/lesson06_pc.webp) no-repeat;
    background-size: cover;
    width:900px;}
  #lesson07{
    padding:674px 0 0;
    display: block;
    background: url(image/lesson07_pc.webp) no-repeat;
    background-size: cover;
    width:900px;}
  .lesson01_schedule {
    background: url(image/lesson01_schedule_pc.webp) no-repeat;
    background-size: cover;
    padding:916px 0 0;}
  .lesson02_schedule {
    background: url(image/lesson02_schedule_pc.webp) no-repeat;
    background-size: cover;
    padding:726px 0 0;}
  .lesson03_schedule {
    background: url(image/lesson03_schedule_pc.webp) no-repeat;
    background-size: cover;
    padding:1550px 0 0;}
  .lesson04_schedule {
    background: url(image/lesson04_schedule_pc.webp) no-repeat;
    background-size: cover;
    padding:2206px 0 0;}
  .lesson04_schedule_message {
    margin: 0 auto 7%;
    width:900px;}
  .lesson05_schedule {
    background: url(image/lesson05_schedule_pc.webp) no-repeat;
    background-size: cover;
    padding:1435px 0 0;}
  .lesson06_schedule {
    background: url(image/lesson06_schedule_pc.webp) no-repeat;
    background-size: cover;
    padding:1582px 0 0;}
  .lesson07_schedule {
    background: url(image/lesson07_schedule_pc.webp) no-repeat;
    background-size: cover;
    padding:1582px 0 0;}
  .program_back{
    background-color:#005EA2;
    font-size: 18px;}
  .program{
    padding:100px 0 70px;
    width:700px;
    margin:0 auto;}
  .open_button img, .close_button img{
    width:350px; height: auto;}
  .line01,.line02{
    margin:7% 77% 7% 0;}

  .lesson01, .lesson03, .lesson05,.lesson02, .lesson04, .lesson06, .lesson07{
    padding-bottom:11%;
    line-height: 32px;}
  .program_content, .program01_content {
    font-size: 20px;
    line-height:40px;}
  .program_content small {
    font-size: 15px;
    letter-spacing:1.5px;}
  .program01_title, .program02_title, .program03_title, .program04_title, .program05_title, .program06_title {
    margin:20px auto;
    font-size:23px}
  .profile_content small {
    letter-spacing:-1px;
    line-height:28px;}
  .profile_title{
    margin:15% auto 7%;}
  .box_one {
    width: 700px;
    font-size: 17px;
    line-height: 29px;
    padding: 0 10%;
    margin: 90px auto 0;}
  .profile_content small {
    letter-spacing:1px;
    line-height: 25px;}
  .lesson01_button, .lesson03_button, .lesson05_button, .lesson07_button{
    width:315px;
    border-bottom: 11px solid #fff;}
  .lesson02_button, .lesson04_button, .lesson06_button {
    border-bottom: 11px solid #005EA2;}
  .lesson01_button{width:325px;}
  .lesson05_button{width:290px;}
  .lesson02_button,.lesson03_button,.lesson04_button,.lesson06_button{
    width:300px;}
  .lesson01_button a,.lesson02_button a,.lesson03_button a,.lesson04_button a,.lesson05_button a,.lesson06_button a,.lesson07_button a{
    line-height: 90px;
    font-size: 27px;
    letter-spacing:4px;}
  .lesson01_schedule ,.lesson02_schedule,.lesson03_schedule,.lesson04_schedule,.lesson05_schedule,.lesson06_schedule, .lesson07_schedule {
    width:700px;
    padding: 500px 0 0;
    margin:10% auto 7%;}
  .lesson01_schedule {
    padding:880px 0 0;
  }

  .lesson02_schedule {
    padding:1270px 0 0;
  }

  .lesson05_schedule {
    padding:500px 0 0;}

  .lesson07_schedule {
     padding:2250px 0 0;
  }
  
  .lesson03_schedule {
    padding:1980px 0 0;
  }

  .lesson04_schedule {
    padding:1150px 0 0;}

  .lesson06_schedule {
    padding:1220px 0 0;
  }


  .lesson01_sign img, .lesson02_sign img, .lesson03_sign img, .lesson04_sign img, .lesson05_sign img, .lesson06_sign img, .lesson07_sign img{
    width: 35%;
    margin: 10% 0 10% 65%;}
  .cp_button01 img,.cp_button02 img, .cp_button03 img{
    margin:10% auto 15%;
    width:300px;
    height: auto;
  }
  .cp_button02 img{
    margin:10% auto;}
  .cp_button03 img{
    margin:9% auto 13%; height: auto;}

  #content{
    width: 700px;
    margin:0 auto;}
  .content {
    background: url(image/contents_pc.webp) no-repeat;
    background-size: cover;
    padding:720px 0 0;}

  #rule{
    width: 700px;
    margin:0 auto;}
  .rule {
    background: url(image/rule_pc.webp) no-repeat;
    background-size: cover;
    padding:655px 0 0;}

  #outline{
    background-color:#005EA2;
    margin:0 auto;}
  .outline {
    width:700px;
    margin:0 auto;
    background: url(image/outline_pc.webp) no-repeat;
    background-size: cover;
    padding:1100px 0 0;}

  #voice{
    margin: 5% auto;}
  #voice img{
    margin:100px auto 5%;
    width:200px;
    height: auto;
  }
  .nextReadBox{
    margin:6% auto 4%;
    width:700px;}
  .voice_name{
    font-size:14px;
    margin: 0% auto;}
  .voice_content {
    line-height: 32px;
    font-size: 17px;
    margin:3% auto;}
  .voice_name b {
    font-size: 22px;}

  .faq_contents {
    width: 700px;
    font-size:23px;
    line-height: 1.8em;}
  .faq_contents p {
    margin: 1% auto 9%;
    font-size:19px;
    line-height: 30px;}
  .faq_title img{
    margin:12% auto 5%;
    width:130px;
    height: auto;
  }
  .line03 {
    border-top: 1px solid #005EA2;
    margin:8% auto;
    width: 700px;}


  .circle_button a {
    right:-87%;}
  .circle_button img {
    width:12%; height: auto;}
  .top_button img{
    width:80px;height: auto;}


  .footer {
    margin:8% auto;}
  .footer p{
    font-size:13px;}
  .cr-sis a img {
    width: 20%; height: auto;}
  .cr-sis p {
    width: 700px;
    margin: 2% auto 0;}
  #sns_icon {
    width: 10%;
    margin: 7% auto;}
  .logo img {
    width: 400px; height: auto;}
  .logo {
    margin: 5% auto 5%;}}

@media screen and (min-width: 1300px){
  #news {
    width: 60%;}
  .circle_button img {
    width:10%;}
}

@media screen and (min-width: 1500px){
  #news {
    width: 50%;}
  .circle_button a {
    right:-89%;}
  .circle_button img {
    width:8%;}
}

@media screen and (min-width: 1700px){
  #news {
    width: 45%;}
  .circle_button img {
    width:7%;}
}

@media screen and (min-width: 1900px){
  #news {
    width: 42%;}
  .circle_button a {
    right:-90%;}
  .circle_button img {
    width:6%;}
}

@media screen and (min-width: 2100px){
  #news {
    width: 40%;}
  .circle_button a {
    right:-91%;}
  .circle_button img {
    width:5%; height: auto;}
}