@charset "utf-8";

@import "../../common/css/layout.css";

/*-------------------------------------------------------------------------
  Main Visual
/*-----------------------------------------------------------------------*/

#mainVisual {
  padding: 4rem 0;
  background: url(../img/mainVisual/bg.jpg) no-repeat center;
  background-size: cover;
}
  #mainVisual .box {
    max-width: 48.8rem;
    min-width: 24.4rem;
    width: 100%;
    margin: 0 2.4rem 2.4rem 0;
    position: relative;
  }
  #mainVisual .box span {
    max-width: 19.6rem;
    min-width: 19.6rem;
    margin: 0 2.4rem 2.4rem 0;
    display: block;
  }
  #mainVisual .box h1 {
    width: 100%;
    margin: 0 2.4rem 2.4rem 0;
    position: relative;
  }
  /*#mainVisual h1:before {
    content: url(../../common/img/icon/arrow01.svg);
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
  }*/
  #mainVisual .box p {
    padding-top: 4rem;
    font-size: 1.4rem;
    font-weight: bold;
  }
  #mainVisual ul {
    display: flex;
    justify-content: space-between;
  }
    #mainVisual ul li {
      max-width: 32.4rem;
      min-width: 16.2rem;
      margin: 0 2.4rem 0 0;
    }
    #mainVisual ul li:first-child,#mainVisual ul li:nth-child(2) {
      padding-bottom: 2.4rem;
    }
  #mainVisual ol li{
    position:relative;
  }
    #mainVisual ol .title{
      margin:2% 0 5% 0;
      padding:3% 3% 3% 17%;
      background:#fff;
      border-radius:10px;
    }
    #mainVisual ol .book{
      width:10%;
      transform: rotate( -10deg );
      position:absolute;
      top: 0px;
      left: 10px;
    }
  #mainVisual .wrap > p {
    display: block;
  }

/*-------------------------------------------------------------------------
  Past issue
/*-----------------------------------------------------------------------*/

#past-issues {
  padding-top: 4rem;
}
  #past-issues #intro {
    padding: 2.4rem 1.6rem;
    border-top: solid #777 2px;
    border-bottom: solid #777 2px;
  }
  #past-issues #intro a{
    text-decoration:underline;
  }
  #past-issues h1 {
    padding-left: 7.2rem;
    padding-right:1rem;
    background: url(../img/past-issues/icon_book.svg) no-repeat left top;
    color: #e83416;
    display: inline-block;
  }
  #past-issues .book_title {
    margin: 4.5rem 0 0 0;
  }
    #past-issues h1 .series {
      display: block;
      font-size: 2.4rem;
    }
    #past-issues h1 .size,
    #past-issues h1 .part {
      font-size: 1.8rem;
      font-weight: 200;
    }
    #past-issues h1 .size {
      margin-left: 1.6rem;
      padding: 2px 12px;
      background-color: #e73817;
      color: #fff;
    }

  #past-issues #kakomon .appendix {
    margin: 1.5rem 0 0 5.5rem;
  }
  #past-issues .appendix {
    border:dotted 2px #e83416;
    color:#e83416;
    display:inline-block;
    border-radius: 5px;
    margin:5.5rem 0 0 5rem;
    padding:0.3rem 1.5rem;
  }
  #past-issues .appendix li{
    margin-left: 3.5rem;
    text-indent: -3.5rem;
  }
  #past-issues .appendix span{
      font-size:2rem;
      font-weight:bold;
    }
    #past-issues .appendix .headphone:before{
      content:"";
      background:url(../img/past-issues/icon_headphone.svg) no-repeat;
      height: 2.5rem;
      width: 2.5rem;
      display: inline-block;
      position: relative;
      left: 0;
      top: 0.5rem;
      margin:0 1rem 0 0;
    }
    #past-issues .appendix .calendar:before{
      content:"";
      background:url(../img/past-issues/icon_calendar.svg) no-repeat;
      height: 2.5rem;
      width: 2.5rem;
      display: inline-block;
      position: relative;
      left: 0;
      top: 0.5rem;
      margin:0 1rem 0 0;
    }
    #past-issues .appendix .caption{
      font-size: 1.4rem;
      margin-bottom: 0.5rem;
      text-indent: 0rem;
    }
    #past-issues .appendix .cd:before{
      content:"";
      background:url(../img/past-issues/icon_cd.svg) no-repeat;
      height: 2.5rem;
      width: 2.5rem;
      display: inline-block;
      position: relative;
      left: 0;
      top: 0.5rem;
      margin:0 1rem 0 0;
    }
    #past-issues .appendix .book_open img{
      height: 2.5rem;
      width: 2.5rem;
      vertical-align: middle;
      margin:0 1rem 0 0;
    }
  #past-issues .point {
    padding-top: 5.6rem;
  }
  #past-issues #master .point {
    clear:both;
  }
    #past-issues .point li {
      margin-bottom: 1.2rem;
      color: #fff;
      position: relative;
    }
    #past-issues .point li p {
      padding: 0.4rem 1.6rem 0.4rem 3.2rem;
      background-color: #eb5d99;
      display: inline-block;
      position: relative;
    }
    #past-issues .point .star  {
      padding: 0.4rem 1.6rem 0.4rem 6rem;
      background: url(../../common/img/icon/star.png) no-repeat 8px center #eb5d99;
      font-size: 2rem;
      font-weight: bold;
    }
    #past-issues .point .asterisk  {
      padding: 0.4rem 1.6rem 0.4rem 6rem;
      background: url(../../common/img/icon/asterisk.png) no-repeat 24px center #eb5d99;
      font-size: 2rem;
      font-weight: bold;
    }

  #past-issues .point li .arrow_box {
    padding-top: 2rem;
    text-align: center;
    vertical-align: middle;
  }
    #past-issues .point li .arrow_box span {
      font-size: 2.4rem;
      font-weight: 400;
    }

  #past-issues .book {
    padding-top: 3.2rem;
    justify-content: space-between;
  }
    #past-issues .book li {
      margin: 0 0 2.4rem 0;
      width:18.06%;
    }
    #past-issues .book li:last-child {
      margin: 0 0 2.4rem 0;
    }
      #past-issues .book li p {
        margin-top: 0.8rem;
        padding-right: 1.2rem;
        font-size: 1.3rem;
        text-align: right;
        background: url(../../common/img/icon/arrow_txt.svg) no-repeat right center;
      }

    #past-issues .arrow_box{
        width:11.2rem;
        height:11.2rem;
        background:#FFFFFF;
        padding:10px;
        text-align:center;
        border:3px solid #EB5D99;
        color:#eb5d99;
        font-family: "NotoSansCJKjp", "HGS明朝E", "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","ＭＳ Ｐ明朝",serif !important;
        font-size: 1.6rem;
        font-weight: 300;
        border-radius:10rem;
        -webkit-border-radius:10rem;
        -moz-border-radius:10rem;
        position:absolute;
        top: -5rem;
        right: -14rem;
        z-index: 1;
    }
    #past-issues .arrow_box:after,
    #past-issues .arrow_box:before{
        border: solid transparent;
        content:'';
        height:0;
        width:0;
        pointer-events:none;
        position:absolute;
        right:99%;
        top:50%;
    }
    #past-issues .arrow_box:after{
        border-color: rgba(255, 255, 255, 0);
        border-top-width:7px;
        border-bottom-width:7px;
        border-left-width:12px;
        border-right-width:12px;
        margin-top: -7px;
        border-right-color:#FFFFFF;
    }
    #past-issues .arrow_box:before{
        border-color: rgba(235, 93, 153, 0);
        border-top-width:10px;
        border-bottom-width:10px;
        border-left-width:16px;
        border-right-width:16px;
        margin-top: -10px;
        margin-right: 3px;
        border-right-color:#EB5D99;
    }

/*-------------------------------------------------------------------------
  Check
/*-----------------------------------------------------------------------*/

.check {
  padding-bottom: 6.4rem;
}
  .check p{
    margin:-1rem 0 1rem 0;
  }
  .check h1 {
    height: 64px;
    width: 40rem;
    padding: 1.6rem 0 0 3.2%;
    color: #e83416;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif !important;
    font-size: 2.4rem;
    font-weight: bold;
    position: relative;
  }
  .check h1:before {
    content: url(../img/past-issues/check/icon_check.png);
    height: 3.2rem;
    width: 3.2rem;
    margin-right: 0.8rem;
    display: inline-block;
    position: relative;
    left: 0;
    top: 0.8rem;
  }
  .check h1:after {
    content: " ";
    height: 64px;
    width: 40rem;
    border-bottom: 64px solid #fde5e5;
    border-right: 64px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .check h2 {
    padding: 5.6rem 0 2.4rem 0;
    font-size: 3.2rem;
    font-weight: bold;
  }
  .check .separate h2 {
    padding: 1.5rem 0 0.5rem 0;
    font-size: 2rem;
    font-weight: bold;
  }
  .check h2:after {
    content: url(../img/past-issues/check/icon_star.png);
    height: 3.2rem;
    width: 2.8rem;
    margin-left: 0.8rem;
    display: inline-block;
    position: relative;
  }

  .check .separate h2:after {
    content: " ";
    height: 2.6rem;
    width: 2.2rem;
    background: url(../img/past-issues/check/icon_star.png) no-repeat left top;
    background-size: cover;
  }
  .check .wrap .box {
    padding: 0 3.2% 1.6rem;
    background-color: #fde5e5;
  }
  .check #book_eiken .web {
    position:relative;
  }
    .check #book_eiken .web .arrow{
      width:20%;
      position:absolute;
      top:40%;
      left:40%;
      z-index:999;
    }

  .check #book_eiken .book {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .check #book_eiken .web {
    width:70%;
  }
    .check #book_eiken .book li {
      margin: 0 2.4% 2.4rem 0;
      width: 48.8%;
      position: relative;
    }
    .check #book_eiken .book li:last-child {
      margin: 0 0 2.4rem 0;
    }
   .check #book_eiken .book .comment{
      background-color:#e83416;
      padding:2rem;
      color:#fff;
      border-radius:10px;
      text-align:center;
    }
    .check #book_eiken .book .web1{
      position:relative;
    }
    .check #book_eiken .book .web1 .comment{
      position:absolute;
      bottom:150px;
      right:50px;
    }
    .check #book_eiken .book .web2{
      position:relative;
    }
    .check #book_eiken .book .web2 .comment{
      position:absolute;
      bottom:150px;
      right:30px;
    }

  .check #book_master .flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .check #book_master .double  {
    width:48.5%;
  }
    .check #book_master .double .expansion {
      margin: 0 2.4% 2.4rem 0;
      position: relative;
    }
  .check #book_master .book  {
    text-align:center;
  }
  .check #book_master .separate  {
    width:50.5%;
  }
  .check #book_master .separate .separate_check {
    color:#e83416;
    font-size:2rem;
    font-weight:bold;
    text-align:center;
    border-bottom: dashed #e83416 2px;
    margin:16px 0 0 0 ;
    padding:6px;
  }
    .check #book_master .separate .separate_check:before {
    content: url(../img/past-issues/check/icon_check.png);
      height: 3.2rem;
      width: 3.2rem;
      margin-right: 1.8rem;
      display: inline-block;
      position: relative;
      left: 0;
      top: 0.8rem;
    }
  .check #book_master .single  {
    width:48.2%;
  }
    .check #book_master .single .expansion  {
      margin: 0 2.4% 2.4rem 0;
      position: relative;
    }
.check .link {
    padding-top: 4rem;
  }
  .check .link a{
    border: 1px solid #000;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    font-size:1.4rem
  }
  .check .link a:after{
    content:"〉";
    margin-left:2rem;
  }

    .balloon {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 7px 20px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #fff;
    border-radius: 15px;
  }

  .balloon:before{
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid #fff;
  }

  .balloon p {
    margin: 0;
    padding: 0;
  }

/*-------------------------------------------------------------------------
  Present
/*-----------------------------------------------------------------------*/

#present{
  margin:0 0 3.2rem 0 ;
}
  #present .box{
    padding: 3%;
    background-color:#fcf2d2;
  }
    #present .wrap .box p{
      padding-top: 0.8rem;
      font-size: 1.4rem;
      line-height: 1.6;
      margin-top:1rem;
    }
  #present h1{
    color:#f16d16;
    text-align:center;
  }
  #present h1:before{
    content:"";
    background:url(../img/present/icon_box.svg) no-repeat;
    height: 3.2rem;
    width: 3.2rem;
    display: inline-block;
    position: relative;
    margin:0 2rem 0 0;
  }
  #present h1:after{
    content:"";
    background:url(../img/present/icon_box.svg) no-repeat;
    height: 3.2rem;
    width: 3.2rem;
    display: inline-block;
    position: relative;
    margin:0 0 0 2rem;
  }
  #present .wrap .box ul li.microphone img{
    height: 3.2rem;
    width: 3.2rem;
    vertical-align: middle;
    margin: 0 2.0rem 0 1.5rem;
  }
  #present .wrap .box ul li.note img{
    height: 2.5rem;
    width: 3.7rem;
    vertical-align: middle;
    margin: 0 1.5rem 0 1.5rem;
  }
  #present .wrap .box ul li.paper img{
    height: 3.2rem;
    width: 3.2rem;
    vertical-align: middle;
    margin:0 1.2rem 0 2.3rem;
  }
/*  .microphone:before{
    content:"";
    background:url(../img/present/icon_microphone.svg) no-repeat;
    height: 3.2rem;
    width: 3.2rem;
    display: inline-block;
    position: relative;
    top:0.6rem;
    margin:0 1rem 0 2.5rem;
  }
  .note:before{
    content:"";
    background:url(../img/present/icon_note.svg) no-repeat;
    height: 2.5rem;
    width: 3.7rem;
    display: inline-block;
    position: relative;
    top:0.4rem;
    margin: 0 1.5rem 0 1.5rem;
  }
  .paper:before{
    content:"";
    background:url(../img/present/icon_paper.svg) no-repeat;
    height: 3.2rem;
    width: 3.2rem;
    display: inline-block;
    position: relative;
    top:0.5rem;
    margin:0 1.2rem 0 2.3rem;
  }*/
  #present .wrap li{
    font-size:3rem;
  }
    #present .wrap li span{
      font-size:2rem;
    }
  #present .flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #present .flex .button{
    width:22%;
    margin:2% 2% 0 0;
  }
    #present .flex .button span{
      font-size:1.5rem;
      font-weight:normal;
      line-height: 2rem;
      display:inline-block;
    }

/*-------------------------------------------------------------------------
  Lesson
/*-----------------------------------------------------------------------*/

#lesson {
  padding: 7.2rem 0 6.4rem;
  background-color: #a3d4e3;
  position: relative;
  overflow-y: hidden;
}
  #lesson h1 {
    padding-left: 8.4rem;
    background: url(../img/lesson/icon-movie.png) no-repeat left center;
    position: relative;
    z-index: 1;
  }
  #lesson p {
    padding-top: 4rem;
    font-size: 2.4rem;
    line-height: 1;
  }
    #lesson p sup {
      font-size: 1.2rem;
    }
    #lesson p .note {
      font-size: 1.4rem;
    }
    #lesson dl dt {
      font-size: 3.2rem;
      font-weight: bold;
    }
      #lesson dl dt span {
        font-size: 2.4rem;
        font-weight: normal;
      }
      #lesson dl dd p {
        padding-top: 0.8rem;
        font-size: 1.4rem;
        line-height: 1.6;
      }
  #lesson a.movie {
    color:#fff;
    background-color:#178eb4;
    display:inline-block;
    padding: 1.5rem 4rem;
    margin:2rem 0 2rem 0;
    font-size: 2rem;
    font-weight:bold;
    line-height: 1.5;
    border-radius:1rem;
    text-align:center;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
  }
  #lesson a.movie:hover {
    opacity:0.7;
  }
  #lesson .teacher {
    max-width: 656px;
    position: absolute;
    top: 6rem;
    right: 0;
    z-index: 0;
  }

/*-------------------------------------------------------------------------
  Diary
/*-----------------------------------------------------------------------*/

#diary {
  padding: 7.2rem 0 6.4rem;
  background-color: #b8de97;
}
  #diary h1 {
    padding-left: 8.4rem;
    background: url(../img/diary/icon-diary.png) no-repeat left center;
  }
  #diary p {
    padding-top: 4rem;
    font-size: 1.6rem;
    line-height: 1.75;
  }
  #diary dl {
    margin-top: 4rem;
    padding: 2.4rem 4rem;
    background-color: #5a9329;
    color: #fff;
  }
    #diary dl dt {
      width: 12rem;
      font-size: 2.4rem;
      font-weight: bold;
      display: inline-block;
      vertical-align: top;
    }
    #diary dl dd {
      width: calc(100% - 12.4rem);
      padding-top: 0.3rem;
      font-size: 1.9rem;
      display: inline-block;
    }

    #diary #form {
      width: 100%;
      /*padding-top: 120%;*/
      margin: 4rem auto 0;
      overflow: auto;
      -webkit-overflow-scrolling:touch;
      /*position: relative;*/
    }
    #diary #form iframe {
      /*position: absolute;
      top: 0;
      left: 0;*/
      max-height: 100%;
      /*height: 100%;*/
      height: 1000px;
      max-width: 100%;
      width: 100%;
      overflow-y: scroll;
    }


br.sp {
  display: none;
}

@media screen and (min-width:481px) and (max-width:1000px){
  .double .long{
    height:160px;
  }
  .separate h2{
    height:90px;
  }
}

@media screen and (min-width:481px){
  .sp_only{
    display:none;
  }
}
@media screen and (max-width:480px){
  .pc_only{
    display:none;
  }

  #diary #form iframe {
    height: 455px;
  }

  #mainVisual {
    padding: 1.6rem 0 4rem;
    background: url(../img/mainVisual/bg.jpg) no-repeat center left;
    background-size: cover;
  }
    #mainVisual h1 {
      width: 100%;
      margin: 0 0 2.4rem 0;
    }
      #mainVisual h1 span {
        max-width: 16rem;
        min-width: 16rem;
        margin: 0 2.4rem 1.2rem 0;
      }
      #mainVisual .box p {
        font-size: 1.2rem;
      }
    #mainVisual ul {
      width: 100%;
      display: block;
    }
      #mainVisual ul li {
        width: 100%;
        margin: auto;
      }
    #mainVisual ol .book{
      top: 2.2rem;
      left: 1.2rem;
    }
  #past-issues h1 {
    margin-top: 4rem;
    padding-left: 3.2rem;
    background: url(../img/past-issues/icon_book.svg) no-repeat left top;
    -webkit-background-size: 6%;
    background-size: 6%;
  }
    #past-issues h1 .series {
      display: block;
      font-size: 2rem;
    }
    #past-issues h1 .size,
    #past-issues h1 .part {
      vertical-align: super;
    }

    #past-issues h1 .size {
      margin-left: 0;
    }
  #past-issues .appendix {
    margin:1rem 0 0 0;
  }
  #past-issues .point {
    padding-top: 7.2rem;
  }
  #past-issues #master .point {
    padding-top: 2rem;
  }
    #past-issues .book li {
      margin: 0 2.4% 2.4rem 0;
      width: 47.6%;
    }
    #past-issues .book li:nth-child(2n) {
      margin: 0 0 2.4rem 0;
    }

#past-issues .arrow_box{
    top: -7rem;
    right: -9rem;
    z-index: 1;
}
#past-issues .arrow_box:after,
#past-issues .arrow_box:before{
    right: 74%;
    top: 82%;
    transform: rotate(72deg)
}
#past-issues .arrow_box:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:12px;
    border-right-width:12px;
    margin-top: -7px;
    border-right-color:#FFFFFF;
}
#past-issues .arrow_box:before{
    border-color: rgba(235, 93, 153, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:16px;
    border-right-width:16px;
    margin-top: -10px;
    margin-right: 0px;
    border-right-color:#EB5D99;
}


  .check h1:after {
    content: " ";
    height: 64px;
    width: 36rem;
    border-bottom: 64px solid #fde5e5;
    border-right: 56px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .check h2 {
    padding: 2.4rem 0 2.4rem 0 !important;
    font-size: 2.4rem !important;
    font-weight: bold;
  }

  .check #book_eiken .book {
    display: block;
  }
    .check #book_eiken .book li,
    .check #book_master .book li {
      margin: 0 0 2.4rem 0 !important;
      width: 100%;
      position: relative;
    }
  .check #book_master .double,
  .check #book_master .separate,
  .check #book_master .separate .single {
    width:100%;
  }
    .check #book_master .separate .single ul{
      text-align:center;
    }
    .check #book_master .separate .single .expansion{
      width:50%;
      margin-left:25%;
    }
    .check #book_eiken .web .arrow{
      width:30%;
      top:43%;
      left:35%;
    }

  #present .box{
    padding: 1.5rem;
  }
  #present .wrap li{
    font-size:2rem;
    width: 100%;
    padding: 0 0 0 15%;
  }
    #present .wrap li span{
      font-size:1.5rem;
    }
  #present .flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #present .flex .button{
    width:80%;
    margin:5% 0 0 0;
  }
    #present .flex .button span{
      font-size:1.5rem;
      font-weight:normal;
      line-height: 2rem;
      display:inline-block;
    }
  #present h1{
    width:75%;
    margin:0 auto;
  }
  #present h1:before{
    position: absolute;
    top:2.5rem;
    left:2.5rem;
  }
  #present h1:after{
    position: absolute;
    top:2.5rem;
    right:2.5rem;
  }
  #present .wrap .box ul li.microphone img{
    height: 3.2rem;
    width: 3.2rem;
    vertical-align: middle;
    margin:0 1.2rem 0 -4.6rem;
  }
  #present .wrap .box ul li.note img{
    height: 2.5rem;
    width: 3.7rem;
    vertical-align: middle;
    margin: 0 1rem 0 -4.8rem;
  }
  #present .wrap .box ul li.paper img{
    height: 3.2rem;
    width: 3.2rem;
    vertical-align: middle;
    margin:0 1rem 0 -4.2rem;
  }

 /* .microphone:before{
    content:"";
    background:url(../img/present/icon_microphone.svg) no-repeat;
    height: 3.2rem;
    width: 3.2rem;
    display: inline-block;
    position: relative;
    margin:0 0.4rem 0 -3.8rem;
  }
  .note:before{
    content:"";
    background:url(../img/present/icon_note.svg) no-repeat;
    height: 2.5rem;
    width: 3.7rem;
    display: inline-block;
    position: relative;
    margin: 0 1rem 0 -4.8rem;
  }
  .paper:before{
    content:"";
    background:url(../img/present/icon_paper.svg) no-repeat;
    height: 3.2rem;
    width: 3.2rem;
    display: inline-block;
    position: relative;
    top:0.5rem;
    margin:0 0.8rem 0 -4rem;
  }
*/

  #lesson {
    padding: 4.0rem 0;
  }
  #lesson h1 {
    padding-left: 7.2rem;
    background: url(../img/lesson/icon-movie.png) no-repeat left center;
    -webkit-background-size: contain;
    background-size: contain;
  }
  #lesson .box2col.sp > p {
    width: 49%;
    padding-top: 4rem;
    font-size: 1.8rem;
    line-height: 1.75;
  }
    #lesson .box2col.sp > p .note {
      width: 49%;
      font-size: 1.4rem;
    }
    #lesson dl dt {
      font-size: 2.4rem;
      border-bottom: solid 2px #078db6;
    }
      #lesson dl dt span {
        font-size: 1.6rem;
      }
  #lesson a.movie {
    color:#fff;
    background-color:#178eb4;
    display:inline-block;
    padding: 1rem 1rem;
    margin:2rem 0 8rem 0;
    font-size: 2rem;
    font-weight:bold;
    line-height: 1.5;
    border-radius:1rem;
    text-align:center;
    width:50%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
  }
  #lesson a.movie:hover {
    opacity:0.8;
  }
  #lesson .teacher {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  #lesson .teacher img {
    max-height: 24rem;
    width: auto;
    position: absolute;
    top: 3rem;
    right: 0;
  }


  #diary {
    padding: 4.0rem 0;
  }
  #diary h1 {
    padding-left: 6.4rem;
    background: url(../img/diary/icon-diary.png) no-repeat left center;
    -webkit-background-size: contain;
    background-size: contain;
  }
  #diary dl {
    margin-top: 2.4rem;
    padding: 1.6rem 2rem;
    background-color: #5a9329;
    color: #fff;
  }
  #diary dl dt,
  #diary dl dd {
    width: 100%;
    display: block;
  }
  #diary dl dt {
    font-size: 2rem;
    padding-top: 3.2rem;
    border-bottom: solid 2px #b8de97;
  }
  #diary dl dt:first-child {
    padding-top: 0;
  }
  #diary dl dd {
    font-size: 1.6rem;
  }


  br.sp {
    display: block;
  }

}

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

  #diary h1 {
    padding-left: 5.6rem;
    background: url(../img/diary/icon-diary.png) no-repeat left top;
    -webkit-background-size: 16%;
    background-size: 16%;
  }
  #past-issues .arrow_box{
      top: -12rem;
      right: -4rem;
      z-index: 1;
  }

}

@media screen and (min-width:781px){

  #mainVisual .wrap {
    display: flex;
    justify-content: space-between;
  }
  #mainVisual .box {
    width: 56%;
  }
  #mainVisual ul {
    width: 40%;
    display: block;
  }

  #lesson .teacher {
    top: -6rem;
  }
}

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

  #past-issues .appendix {
    margin:1rem 0 !important;
  }
}

.caution p {
  margin-bottom: 20px;
  font-size: 1.4rem;
}