@charset "UTF-8";
.history01:after{
  background-color: #EBC7B5;
}
.history02:after{
  background-color: #E6D47E;
}
.history03:after{
  background-color: #C3DE85;
}
.history04:after{
  background-color: #A0DED9;
}
.history05:after{
  background-color: #A6CFF7;
}
.history06:after{
  background-color: #CFBEF7;
}
.history07:after{
  background-color: #F7BED7;
}
.history08:after{
  background-color: #F6C674;
}
.history01 .year_area p{
  color: #CC9F85;
}
.history02 .year_area p{
  color: #D4B82F;
}
.history03 .year_area p{
  color: #88B81A;
}
.history04 .year_area p{
  color: #56B8AF;
}
.history05 .year_area p{
  color: #5D9EDE;
}
.history06 .year_area p{
  color: #AB91EB;
}
.history07 .year_area p{
  color: #EB86B1;
}
.history08 .year_area p{
  color: #EE9E00;
}
.history01 .year_area p:after{
  background-color: #EBC7B5;
}
.history02 .year_area p:after{
  background-color: #E6D47E;
}
.history03 .year_area p:after{
  background-color: #C3DE85;
}
.history04 .year_area p:after{
  background-color: #A0DED9;
}
.history05 .year_area p:after{
  background-color: #A6CFF7;
}
.history06 .year_area p:after{
  background-color: #CFBEF7;
}
.history07 .year_area p:after{
  background-color: #F7BED7;
}
.history08 .year_area p:after{
  background-color: #F6C674;
}
.history01 .swiper-slide h5{
  color: #CC9F85;
}
.history02 .swiper-slide h5{
  color: #D4B82F;
}
.history03 .swiper-slide h5{
  color: #88B81A;
}
.history04 .swiper-slide h5{
  color: #56B8AF;
}
.history05 .swiper-slide h5{
  color: #5D9EDE;
}
.history06 .swiper-slide h5{
  color: #AB91EB;
}
.history07 .swiper-slide h5{
  color: #EB86B1;
}
.history07 .swiper-slide h5{
  color: #EE9E00;
}
.swiper-slide-prev, .swiper-slide-next{
  opacity: 0;
}

@media screen and (min-width : 601px){
  .history_table #main_box h2.main_box_mainImg{
    background-image: url("/textbook_history/table/images/mainImg_pc.jpg");
  }
  /* tab */
  .tab-panel{
    margin: 0 auto;
    padding: 17px 0 0 32px;
    max-width: 1120px;
  }
  .tab-group{
    display: flex;
    justify-content: center;
    margin-right: 32px;
    /* border-bottom: 3px solid #0078B9; */
  }
  .tab{
    flex-grow: 1;
    padding:23px;
    list-style:none;
    cursor:pointer;
    width: 50%;
    font-size: 1.125rem;
    font-weight: 700;
  }
  .tab.sansu{
    padding-right: 110px;
    text-align: right;
  }
  .tab.rika{
    padding-left: 110px;
    text-align: left;
  }
  .tab.active{
    position: relative;
    color:#0078B9;
    transition: all 0.2s ease-out;
  }
  .tab.active:after{
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 9px 7px 9px;
    border-color: transparent transparent #0078B9 transparent;
  }
  .tab.active:before{
    content: "";
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 3px;
  }
  .tab.rika.active{
    color:#45b036;
  }
  .tab.sansu.active:after{
    right: 143px;
  }
  .tab.rika.active:after{
    left: 119px;
    border-color: transparent transparent #45b036 transparent;
  }
  .tab.sansu.active:before{
    left: 0;
    background-color: #0078B9;
  }
  .tab.rika.active:before{
    right: 0;
    background-color: #45b036;
  }
  .panel-group{
    border-top:none;
  }
  .panel{
    display:none;
  }
  .panel.active{
    display: block;
  }

  .panel_contents{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    padding-top: 48px;
  }
  .panel_contents:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: -20vw;
    width: 120vw;
    height: 1px;
  }
  .panel_contents:first-of-type{
    padding-top: 32px;
  }
  .lead{
    padding: 16px 20px;
    margin: 40px 32px 32px 0;
    background-color: #F0F0F0;
  }
  .lead p{
    font-size: 1rem;
    line-height: 1.5;
  }

  .year_area{
    margin-right: 24px;
    padding: 53px 0 188px;
    border-right: 2px solid #E5E5E5;
  }
  .year_text:not(:first-of-type){
    padding-top: 170px;
  }
  .year_area p{
    position: relative;
    padding-right: 23px;
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 700;
  }
  .year_area p:after{
    content: "";
    position: absolute;
    top: 3px;
    right: -9px;
    border-radius: 50%;
    width: 16px;
    height: 16px;

  }

  .year_area + div{
    padding: 53px 0 48px;
    /* width: 100%; */
    overflow-x: auto;
  }
  .img_area{
    padding: 53px 0 48px;
    overflow-x: auto;
    /* -ms-overflow-style: none;
    scrollbar-width: none; */
  }
  /* .img_area::-webkit-scrollbar {
    display:none;
  } */
  .img_wrapper{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 40px;
  }
  .img_wrapper:not(:first-of-type):not(.top0){
    margin-top: 40px;
  }
  .img_wrapper:last-of-type{
    padding-bottom: 20px;
  }
  .img_box:not(:first-of-type){
    margin-left: 56px;
  }
  .img_box:last-of-type{
    padding-right: 32px;
  }
  .img_box img{
    width: auto;
    height: 122px;
  }
  .img_box p{
    margin-top: 10px;
    font-size: 1rem;
  }

  /* modal */
  .modal__content{
    max-width: 840px;
  }

  .modal_inner{
    padding: 27px 0 40px;
    overflow: hidden;
  }
  .swiper-slide{
    text-align: center;
    height:auto;
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .swiper-slide h5{
    font-size: 1.5rem;
    width: 90%;
    margin: 0 auto;
  }
  .swiper-slide .ttl{
    margin: 24px auto;
    font-size: 1rem;
    width: 600px;
  }
  .swiper-slide img{
    /*height: 390px;*/
    height: 540px;
  }
  .swiper-slide .swiper_text{
    font-size: 1rem;
    margin: 24px auto 0;
    width: 90%;
  }
  .swiper-slide .swiper_lead{
    margin: 13px auto 0;
    padding-left: 1rem;
    width: 420px;
    text-indent: -1rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
  }
  .note_click{
    position: relative;
    right: 0;
    bottom: 31px;
    margin-right: 32px;
    font-size: 0.875rem;
    text-align: right;
  }
  .note_click img{
    margin-right: 3px;
    width: 19px;
    height: auto;
    vertical-align: middle;
  }


}@media screen and (max-width : 1024px) and (min-width : 601px){

  .year_area{
    /* padding-bottom: 180px; */
    width: 110px;
  }
  .year_area p{
    padding-right: 32px;
  }
  .year_text:not(:first-of-type){
    padding-top: 148px;
  }

  .year_area + div{
    width: calc(100% - 136px);
  }
  .img_area{
    padding-bottom: 0;
    /* width: 80%; */
  }
  .img_box:not(:first-of-type){
    margin-left: 2.83vw;
  }
  .img_box img{
    width: auto;
    /* height: 12.71vw; */
  }

}@media screen and (max-width : 600px){
  .history_table #main_box h2.main_box_mainImg{
    background-image: url("/textbook_history/table/images/mainImg_sp.jpg");
  }
  /* tab */
  .tab-panel{
    margin: 0 auto;
    padding: 0 0 0 3.73vw;
  }
  .tab-group{
    display: flex;
    justify-content: center;
    position: relative;
    margin-right: 3.73vw;
    /* border-bottom: 3px solid #0078B9; */
  }
  .tab-group:after{
    content: "";
    position: absolute;
    bottom: 0.1px;
    left: -10vw;
    width: 120vw;
    height: 1px;
    background-color: #EDEDED;
    z-index: -1;
  }
  .tab{
    flex-grow: 1;
    padding: 3.67vw 2.67vw;
    list-style:none;
    cursor:pointer;
    width: 50%;
    font-size: 3.73vw;
    text-align: center;
    font-weight: 700;
  }
  .tab.active{
    position: relative;
    border-bottom: 3px solid #0078B9;
    color:#0078B9;
    /* transition: color 0.2s ease-out; */
  }
  .tab.active:after{
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width:  0 9px 7px 9px;
    border-color: transparent transparent #0078B9 transparent;
  }
  .tab.rika.active{
    border-color: #45b036;
    color:#45b036;
  }
  .tab.rika.active:after{
    border-color: transparent transparent #45b036 transparent;
  }

  .panel-group{
    padding-top: 6.4vw;
  }
  .panel{
    display:none;
  }
  .panel.active{
    display: block;
  }

  .lead{
    margin-right: 3.73vw;
    padding: 4.27vw 5.33vw;
    background-color: #F0F0F0;
  }
  .lead p{
    font-size: 4.27vw;
    line-height: 1.5;
  }
  .note_click{
    margin: 6.4vw 3.73vw 0 0;
    font-size: 3.2vw;
    text-align: center;
  }
  .note_click img{
    margin-right: 1vw;
    width: 5.07vw;
    height: auto;
    vertical-align: middle;
  }
  .panel_contents{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
  }
  .panel_contents:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: -3.73vw;
    width: 100vw;
    height: 1px;
  }
  .panel_contents:not(:first-of-type){
    padding-top: 6.45vw;
  }

  .year_area{
    margin-right: 3vw;
    padding: 10.13vw 0 40vw;
    border-right: 2px solid #E5E5E5;
  }
  .year_text:not(:first-of-type){
    padding-top: 34.67vw;
  }
  .year_area p{
    position: relative;
    padding-right: 5.33vw;
    width: 14vw;
    font-size: 3.2vw;
    line-height: 1.33;
    font-weight: 700;
  }
  .year_area p:after{
    content: "";
    position: absolute;
    top: 1vw;
    right: -1.8vw;
    border-radius: 50%;
    width: 3.2vw;
    height: 3.2vw;
  }

  .year_area + div{
    padding: 10.67vw 0;
    margin-bottom: 3vw;
    overflow-x: auto;
  }
  .img_area{
    /* padding: 10.67vw 0;
    overflow-x: scroll; */
    /* -ms-overflow-style: none;
    scrollbar-width: none; */
  }
  /* .img_area::-webkit-scrollbar {
    display:none;
  } */
  .img_wrapper{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 5.87vw;
  }
  .img_wrapper:not(:first-of-type):not(.top0){
    margin-top: 10.67vw;
  }
  .img_box:not(:first-of-type){
    margin-left: 10.67vw;
  }
  .img_box:last-of-type{
    padding-right: 4vw;
  }
  .img_box img{
    width: auto;
    height: 24.53vw;
  }
  .img_box p{
    margin-top: 2.67vw;
    font-size: 3.73vw;
  }

    /* modal */
    .modal_inner{
      /*padding: 9vw 7vw 8.53vw;*/
      /*padding: 0;*/
      padding: 0 0 6vh 0;
      overflow: hidden;
      margin-right: calc(9% - 7vw);
      margin-left: calc(9% - 7vw);
      top: 3.7rem;
      width: calc(100% - 20px);
    }
    .swiper-slide{
      text-align: center;
      max-height: 80vh;
      overflow-x: hidden;
      overflow-y: auto;
      height:auto;
    }
    .swiper-slide .swiper_contents{
      padding: 0 0 5vh 0;
    }
    .swiper-slide h5{
      font-size: 6.4vw;
      font-weight: 700;
      width: 90%;
      margin: 0 auto;
      padding: 9vw 0 0;
    }
    .swiper-slide .ttl{
      margin: 4.53vw auto 6.4vw;
      font-size: 4.27vw;
      width: 90%;
    }
    .swiper-slide img{
      width: 58.4vw;
    }
    .swiper-slide .swiper_text{
      margin: 6.4vw auto 0;
      font-size: 4.27vw;
      line-height: 1.5;
      width: 90%;
      padding-bottom: 8.5vw;
      text-align: left;
    }
    .swiper-slide .swiper_lead{
      margin: 3.47vw auto 0;
      /* margin: 3.47vw auto 0 0; */
      padding-left: 4.27vw;
      width: 71vw;
      text-indent: -4.27vw;
      font-size: 4.27vw;
      line-height: 1.5;
      text-align: left;
    }
    .modal .swiper-button-next, .modal .swiper-rtl .swiper-button-prev{
      /* top: 50% !important; */
      right: 7%;
    }
    .modal .swiper-button-prev, .modal .swiper-rtl .swiper-button-next{
      /* top: 50% !important; */
      left: 6%;
    }
    .history_table .modal__close-btn{
      right: 31px;
      top: 15px;
    }
}