@charset "utf-8";
/*--------------------------------------------------------

	style

	01. forPC Layout

	02. forSP Layout

--------------------------------------------------------*/




/********************************************************************************

	01. forPC Layout

********************************************************************************/


/* ============================================================ firstview */
/* 書目を追加する時に供給本コードを使ってclass名を設定／追加する .firstview_wrap_*****  */
.firstview_wrap_16750{
  background: url(../../assets/img/16750/bg_firstview_wrap.jpg) center center;
  background-size: cover;
}

/* ============================================================ cat_content */
.nav_subject_menu_ttl {
    background-color: #f68200;
}
.nav_subject_menu .contents_list_item {
    background-color: #ffeedc;
    border: 1px solid #f68200;
}
.nav_subject_menu .contents_list_item a {
    color: #f68200;
}
.nav_subject_menu .contents_list_item:before {
    border-bottom: 5px solid #fdbb72;
}
.nav_subject_menu .contents_list_item:hover:before {
    border-bottom: 5px solid #fdbb72;
    border-color: #fdbb72;
}

.tab_area li{background:#ffeedc;}

.tab_area li:hover {
  background: #f68200;
}
.tab_area li.select{
  /*アクティブタブの装飾*/
  /*border-left: 1px solid #f68200;
  border-right: 1px solid #f68200;*/
}
.tab_area li.select:before{
  border-color: #f68200;
}
.tab_area li.select:hover {
  background: #f68200;
}
.tab_area li.select:hover:before {
/*    background: #fdbb72;*/
}

.tab_area_active .tab_area li.select{
/*  background-color:#f68200;*/
}
.tab_area_active .tab_area li.select:before {
/*    background: #fdbb72;*/
}

#sub_cat h2.head_2_01:after {
    background: #f68200;
}
#sub_cat h2.head_2_02:after {
    background: #f68200;
}
#sub_cat h2.head_2_03:after {
    background: #fdbb72;
}
#sub_cat h3.head_3_01 {
  background: #ffdfbb;
  border-bottom: 2px solid #f68200;
}
#sub_cat h3.head_3_02 {
  background: #ffdfbb;
}
#sub_cat h3.head_3_03:after {
  background: #fdbb72;
}

#sub_cat h3.head_04:after {
    background: #fdbb72;
}

#sub_cat h4.head_4_01 {
  background: #ffdfbb;
}

.feature_panel .feature_panel_head .text{
  background: #f68200;
}
.feature_panel .feature_panel_head .number{
  border: 2px solid #f68200;
  color: #f68200;
}
.feature_panel .feature_panel_inner {
  box-shadow: 15px 15px 0 #ffdfbb;
}
.feature_panel .feature_panel_main .text li:before {
  background: #fdbb72;
}
.feature_panel .feature_panel_link .head{
  background: #f68200;
}

.download_panel_01 .download_panel_head:after {
    background: #f68200;
}
.download_panel_02 .download_panel_inner {
  background: #ffdfbb;
}
.download_panel_02 .download_panel_main li:before {
    border-bottom: 1px solid #f68200;
}

.movie_panel_01 a{
    position: relative;
    display: block;
}
.movie_panel_01 a:after {
    content: "";
    height: 60px;
    width: 60px;
    background: url(../img/common/icon_play.svg) no-repeat;
    background-size: 60px 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .9;
}

.list_panel_main li:after {
    background: #fdbb72;
}

.list_panel_01 .adjustment02 {
  margin-bottom: 30px;
}

.list_panel_01 .adjustment02 li {
  width: auto;
  margin-right: 30px;
}

@media screen and (min-width: 0px) and (max-width: 1026px) {
  .list_panel_01 .adjustment02 li {
    width: 100%;
    margin-right: 0;
  }
}

.nav_panel_02_dmaster .nav_panel_main li a:before {
  background: url(../img/common/icon_disc_dmaster.svg) no-repeat;
}
.nav_panel_02_digitalbook .nav_panel_main li a:before {
  background: url(../img/common/icon_book_digital.svg) no-repeat;
}

.text_panel_01 .text_panel_inner {
  border-top: 5px solid #ffdfbb;
  box-shadow: 15px 15px 0 #ffdfbb;
}
.text_panel_02 .text_panel_inner {
  border-top: 5px solid #ffdfbb;
}
.text_panel_04 .text_panel_main li:before {
    background: #fdbb72;
}

/* ============================================================ btn */
.btn_wrap .btn span:before {
    border-bottom: 5px solid #fdbb72;
}
.btn_wrap .btn span:hover:before {
    border-bottom: 5px solid #f68200;
    border-color: #f68200;
}
.btn_wrap .btn span:after {
    background-color: #f68200;
}
/* ============================================================ toggle_btn */
.toggle_btn_wrap .btn .text:after {
    background-color: #f68200;
}
.toggle_btn_wrap .btn .icon:after {
    border-top: 2px solid #f68200;
    border-right: 2px solid #f68200;
}




/********************************************************************************

	02. forSP Layout
    *横幅が1025px以下の場合


********************************************************************************/

@media screen and (min-width: 0px) and (max-width: 1026px) {



/* ============================================================ firstview */
/* 書目を追加する時に供給本コードを使ってclass名を設定／追加する .firstview_wrap_*****  */
.firstview_wrap_16750 {
    background: url(../../assets/img/16750/bg_firstview_wrap_sp.jpg) center 40px no-repeat;
    background-size: cover;
}

.feature_panel .feature_panel_inner {
    box-shadow: 12px 12px 0 #ffdfbb;
}

.text_panel_01 .text_panel_inner {
    box-shadow: 12px 12px 0 #ffdfbb;
}

.tab_area_active .tab_area li.select{
  background-color:#fff;
}
.tab_area_active .tab_area li.select:before {
/*  background: #f68200;*/
}

.tab_area_active_sp .tab_area li.select{
/*  background-color:#f68200;*/
}
.tab_area_active_sp .tab_area li.select:before {
/*  background: #fdbb72;*/
}

/* ============================================================ btn */
.btn_wrap .btn span:before {
    border-bottom: 4px solid #fdbb72;
}
.btn_wrap .btn span:hover:before {
    border-bottom: 4px solid #f68200;
}


}

/********************************************************************************

	03. 追加

********************************************************************************/

.img_panel_01 {
  width: 416px;
}


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

  .img_panel_01:last-child{
    margin-left: auto;
  }
}


.firstview .substance img {
  margin: 15px 0 20px
}

@media screen and (min-width: 0px) and (max-width: 1026px) {
  .img_panel_01 {
    width: 100%;
    text-align: center;
  }
  .firstview .substance img {
    float: none;
    max-width: 250px;
    margin: 60px auto 70px auto !important;
    width: 88% !important;
  }
}


/* ============================================================ btn */
.btn_wrap .btn span:before {
    border-bottom: 5px solid #f68200;
}
.btn_wrap .btn span:hover:before {
    border-bottom: 5px solid #f68200;
    border-color: #f68200;
}
.btn_wrap .btn span:after {
    background-color: #f68200;
}
.btn_wrap { /*QRコンテンツ一覧ボタンプルダウン実装時は追加*/
z-index :10;
cursor:pointer;
}


@media screen and (min-width: 0px) and (max-width: 1026px) {

    .btn_wrap .btn span:before {
        border-bottom: 4px solid #f68200;
    }
    .btn_wrap .btn span:hover:before {
        border-bottom: 4px solid #f68200;
    }


    .btn_wrap { /*QRコンテンツ一覧ボタンプルダウン実装時は追加*/
    z-index :10;
    }
    .hp_wd {
    width: 220px !important;
    }

}

/* ============================================================ toggle_panel_01 */

.toggle_panel_01 .toggle_panel_main a {
    margin: 0 0 15px;
}

.toggle_panel_01 .toggle_panel_main_rowx4 {
    align-items: flex-start;
    flex-wrap: wrap;
}

.toggle_panel_01 .toggle_panel_main_rowx4 a:nth-of-type(1),
.toggle_panel_01 .toggle_panel_main_rowx4 a:nth-of-type(3) {
    margin-right: 3%;
}

.toggle_panel_01 .toggle_panel_main_rowx3 {
    align-items: flex-start;
    flex-wrap: wrap;
}

.toggle_panel_01 .toggle_panel_main_rowx3 a:nth-of-type(1) {
    margin: 0 25%;
}

.toggle_panel_01 .toggle_panel_main_rowx3 a:nth-of-type(2) {
    margin-right: 3%;
}
.toggle_panel_01 .toggle_panel_main_rowx3 a:nth-of-type(3) {
}

.toggle_panel_01 .adjustment01 a:nth-of-type(1) {
  margin: 0 30%;
}

@media screen and (min-width: 0px) and (max-width: 1026px) {
    .toggle_panel_01 .toggle_panel_main_rowx4 a {
        width: 47.5%;
    }

    .toggle_panel_01 .toggle_panel_main_rowx3 a:nth-of-type(2) {
        width: 47.5%;
    }
    .toggle_panel_01 .toggle_panel_main_rowx3 a:nth-of-type(3) {
        width: 47.5%;
    }
    
}

/* ============================================================== ■■■ QRボタン追加ここから　*/
.btn_qr {
  position: relative;
  margin: 0 auto ;
  width :1280px ;
}
.btn_qrinner {
  display: none ;
  position: absolute;
  top:-50px;
  right:15px;
  margin: 0px 0 0 0 ;
  width:292px;
  height:auto;
  background-color : #fff ;
}
@media all and (-ms-high-contrast: none) {
  .btn_qrinner {
   position: absolute; top:-60px;right:15px;
  }
}

.btn_qr_2 {
  position: relative;
  margin: 0 auto ;
}
.btn_qrinner_2 {
  display: none ;
  position: absolute;
  top:-90px;
  left:245px;
  margin: 0px 0 0 0 ;
  width:520px;
  height:auto;
  background-color : #fff ;
}
@media all and (-ms-high-contrast: none) {
  .btn_qrinner_2 {
   position: absolute;
   top:-100px;
   right:15px;
  }
}

.active_qr, .active_qr_2 {
  display: block ;
  margin: 0 0 0 0 ;
  background-color : #fff ;
  border-right : 1px #ccc solid ;
  border-left : 1px #ccc solid ;
  border-bottom : 1px #ccc solid ;
  -webkit-animation : ani_qr .2s eace-out 0s normal 1 forwards ;
  -ms-animation :     ani_qr .2s ease-out 0s normal 1 forwards ;
  -moz-animation :    ani_qr .2s ease-out 0s normal 1 forwards ;
  animation :         ani_qr .2s ease-out 0s normal 1 forwards ;
  opacity : 0 ;
  z-index : 1 ;
}
@-webkit-keyframes ani_qr { 
  0% {
    opacity : 0 ;
    margin: -30px 0 0 0 ;
  }
  100% {
    opacity : 1 ;
    margin: 0 0 0 0 ;
  }
}
@keyframes ani_qr { 
  0% {
    opacity : 0 ;
    margin: -30px 0 0 0 ;
  }
  100% {
    opacity : 1 ;
    margin: 0 0 0 0 ;
  }
}
@-moz-keyframes ani_qr { 
  0% {
    opacity : 0 ;
    margin: -30px 0 0 0 ;}
  100% {
    opacity : 1 ;
    margin: 0 0 0 0 ;
  }
}

.btn_qr_ul {
  margin: 11px 0 12px 63px ;
  width : 171px ;
}
.btn_qr_ul li {
  height:31px;
  font-size : 17px ;
  line-height:31px;
  background: url(../../../assets/img/common/nav_arrow_disc01.svg) right center ;
  background-size : 24px 24px ;
  background-repeat : no-repeat ;
}

.btn_qr_ul_2 {
  margin: 13px 0 14px 168px ;
  width : 190px ;
}
.btn_qr_ul_2 li {
  height:37px;
  font-size : 18px ;
  line-height:37px;
  background: url(../../../assets/img/common/nav_arrow_disc01.svg) right center ;
  background-size : 24px 24px ;
  background-repeat : no-repeat ;
}
.btn_qr_ul li a, .btn_qr_ul_2 li a {
  display:block;
  width :100%;
  height:100% ;
  opacity:1;
}
.btn_qr_ul li a:link, .btn_qr_ul_2 li a:link {
  opacity:1;
}
.btn_qr_ul li a:visited, .btn_qr_ul_2 li a:visited {
  opacity:1;
}
.btn_qr_ul li a:hover, .btn_qr_ul_2 li a:hover {
  opacity:0.7;
  background: rgba(255, 255, 255, 0.4);
}
.btn_qr_ul li a:active, .btn_qr_ul_2 li a:active {
  opacity:0.6;
  background: rgba(255, 255, 255, 0.6);
}
/* ============================================================== ■■■ QRボタン追加ここまで　*/
/* ============================================================== ■■■ 資料ダウンロード　追加クラスここから　*/
.download_panel_main_2, .download_panel_main_2__boGr {
  font-size: 22px;
}
.download_panel_main_2 > li, .download_panel_main_2__boGr > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  height: auto;
  margin: 10px 0;
  padding: 0 40px 0 60px;
  background: #fff;
  padding : 9px 0 ;
}
.download_panel_main_2 > li:before {
    content: "";
    display: block;
    width: 35px;
    height: 1px;
    border-bottom: 1px solid #f68200 !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-.1%, -50%);
    opacity: 1;
    pointer-events: none;
    transition-property: transform, opacity;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.download_panel_main_2__boGr > li:before {
    content: "";
    display: block;
    width: 35px;
    height: 1px;
    border-bottom: 1px solid #222 !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-.1%, -50%);
    opacity: 1;
    pointer-events: none;
    transition-property: transform, opacity;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}


.download_panel_02 .download_panel_main_2 > li:before {
/*border-bottom: 1px solid #888;*/
}
.download_panel_main_2 .text, .download_panel_main_2__boGr .text {
  margin: 0 0 0 58px ;
  padding : 15px 0 ;
  width: 100%;
  text-indent : 0px ;
}
.download_panel_main_2 .link, .download_panel_main_2__boGr .link {
/*border:1px #000 solid ;*/
width :330px ;
}
@media all and (-ms-high-contrast: none){
.download_panel_main_2 .link, .download_panel_main_2__boGr .link {
  width :515px ;
  }
}

.download_panel_main_2 .link a, .download_panel_main_2__boGr .link a {
  height: 38px;
  margin: 0 0 0 15px ;
}
.download_panel_main_2 .link img, .download_panel_main_2__boGr .link img {
vertical-align: middle;
}
.download_panel_main_2 .no_file, .download_panel_main_2__boGr .no_file {
  width: 31px;
  margin: 0 10px;
}
.download_panel_main_2 .link ul li, .download_panel_main_2__boGr .link ul li {
  display: flex;
  justify-content: space-between;
  margin : 8px 0 ;
  font-size : 18px !important;
  line-height : 38px !important;
  height: 38px;
}
.download_panel_main_2 .link .shomoku, .download_panel_main_2__boGr .link .shomoku  {
  display : inline-block ;
  *display: inline !important;
  *zoom: 1 !important;
  width: 197px ;
  margin : 0 0 0 0 ;
}
.download_panel_main_2 .link .icon, .download_panel_main_2__boGr .link .icon  {
width: 150px ;
display : inline-block ;
}
.junbi {
display:inline-block ;
margin: 0 0 0 10px ;
}

/* ============================================================== ■■■ 資料ダウンロード　追加クラスここまで　*/

@media screen and (min-width: 0px) and (max-width: 1026px) {
    /* ============================================================== ■■■ QRボタン追加ここから　*/
    .btn_qr {
      position: relative;
      margin: 0 auto ;
      width :100% ;
      z-index:9;
    }
    .btn_qrinner {
      display: none ;
      position: absolute;
      top:-11px;
      right:3%;
      margin: 0px 0 0 0 ;
      width:200px;
      height:auto;
      background-color : #fff ;
    }
    .btn_qr_2 {
      position: relative;
      margin: 0 auto ;
      width:293px;
      z-index:9!importnat;
    }
    .btn_qrinner_2 {
      display: none ;
      position: absolute;
      top:-30px;
      left:6.7%;
      margin: 0 0 0 0 ;
      width:274px;
      height:auto;
      background-color : #fff ;
    }
    .active_qr, .active_qr_2 {
      display: block ;
      margin: 0 0 0 0 ;
      background-color : #fff ;
      border-right : 1px #ccc solid ;
      border-left : 1px #ccc solid ;
      border-bottom : 1px #ccc solid ;
      -webkit-animation : ani_qr .2s eace-out 0s normal 1 forwards ;
      -ms-animation :     ani_qr .2s ease-out 0s normal 1 forwards ;
      -moz-animation :    ani_qr .2s ease-out 0s normal 1 forwards ;
      animation :         ani_qr .2s ease-out 0s normal 1 forwards ;
      opacity : 0 ;
    }
    @-webkit-keyframes ani_qr { 
      0% {
        opacity : 0 ;
        margin: -30px 0 0 0 ;
      }
      100% {
        opacity : 1 ;
        margin: 0 0 0 0 ;
      }
    }
    @keyframes ani_qr { 
      0% {
        opacity : 0 ;
        margin: -30px 0 0 0 ;
      }
      100% {
        opacity : 1 ;
        margin: 0 0 0 0 ;
      }
    }
    @-moz-keyframes ani_qr { 
      0% {
        opacity : 0 ;
        margin: -30px 0 0 0 ;}
      100% {
        opacity : 1 ;
        margin: 0 0 0 0 ;
      }
    }

    .btn_qr_ul {
      margin: 10px 0 10px 28px ;
      width : 143px ;
    }
    .btn_qr_ul li {
      height:25px;
      font-size : 13px ;
      line-height:25px;
      background: url(../../../assets/img/common/nav_arrow_disc01.svg) right center ;
      background-size : 18px 18px ;
      background-repeat : no-repeat ;
    }
    .btn_qr_ul_2 {
      margin: 10px 0 10px 64px ;
      width : 146px ;
    }
    .btn_qr_ul_2 li {
      height:25px;
      font-size : 13px ;
      line-height:25px;
      background: url(../../../assets/img/common/nav_arrow_disc01.svg) right center ;
      background-size : 18px 18px ;
      background-repeat : no-repeat ;
    }
    .btn_qr_ul li a, .btn_qr_ul_2 li a {
      display:block;
      width :100%;
      height:100% ;
      opacity:1;
    }
    .btn_qr_ul li a:link, .btn_qr_ul_2 li a:link {
      opacity:1;
    }
    .btn_qr_ul li a:visited, .btn_qr_ul_2 li a:visited {
      opacity:1;
    }
    .btn_qr_ul li a:hover, .btn_qr_ul_2 li a:hover {
      opacity:0.8;
    }
    .btn_qr_ul li a:active, .btn_qr_ul_2 li a:active {
      opacity:0.6;
    }

    /* ============================================================== ■■■ QRボタン追加ここまで　*/
    /* ============================================================== ■■■ 資料ダウンロード　追加クラスここから　*/
    .title__2, .title__3 {
      margin: 0 ;
    }
    .download_panel_main_2, .download_panel_main_2__boGr {
      font-size: 22px;
    }
    .download_panel_main_2 > li, .download_panel_main_2__boGr > li {
      position: relative;
      display: block;
    /*  align-items: center;*/
    /*  justify-content: space-between;*/
      height: auto;
      margin: 10px 0;
      padding: 0 40px 0 60px;
      background: #fff;
      padding : 9px 0 ;
    }
    .download_panel_main_2 > li:before {
        content: "";
        display: block;
        width: 30px;
        height: 1px;
        border-top: 1px solid #f68200 ;
        position: absolute;
        left: 0;
        top: 30px;
        transform: translate(-.1%, -50%);
        opacity: 0.8;
        pointer-events: none;
        transition-property: transform, opacity;
        transition-duration: 1s;
        transition-delay: 0s;
        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    }
    .download_panel_main_2__boGr > li:before {
        content: "";
        display: block;
        width: 27px;
        height: 1px;
        position: absolute;
        left: 0;
        top: 30px;
        transform: translate(-.1%, -50%);
        opacity: 0.8;
        pointer-events: none;
        transition-property: transform, opacity;
        transition-duration: 1s;
        transition-delay: 0s;
        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    }
    .download_panel_main_2 .text, .download_panel_main_2__boGr .text {
      margin: 8px 0 0 0;
      padding: 0 10px 0 40px ;
      width: 100%;
      font-size : 16px ;
      text-indent : 0px ;
    /*border:1px #f1f1f1 solid ;*/
    }
    .download_panel_main_2 .link, .download_panel_main_2__boGr .link {
      margin: 0 0 0 17% ;
      width: 75%;
    }
    .download_panel_main_2 .link a, .download_panel_main_2__boGr .link a {
      height: 38px;
      margin: 0 0 0 15px ;
    }
    .download_panel_main_2 .link img, .download_panel_main_2__boGr .link img {
      vertical-align: middle;
      height: 38px;
    }
    .download_panel_main_2 .no_file, .download_panel_main_2__boGr .no_file {
      width: 31px;
      margin: 0 10px;
    }

    .download_panel_main_2 .link ul li, .download_panel_main_2__boGr .link ul li {
      display: flex;
      justify-content: space-between;
      margin : 8px 0 ;
      font-size : 18px !important;
      line-height : 38px !important;
      height: 38px;
    }
    .download_panel_main_2 .link .shomoku, .download_panel_main_2__boGr .link .shomoku  {
      display : inline-block ;
      width: 55% ;
      margin : 0 0 0 0 ;
      font-size : 13px ;
      font-size: min(3vw, 13px) !important;
    }
    .download_panel_main_2 .link .icon, .download_panel_main_2__boGr .link .icon  {
      width: 45% ;
      display : inline-block ;
      font-size:12px ;
    }
    .download_panel_main_2 .link .icon img, .download_panel_main_2__boGr .link .icon img  {
    width : 25px !important;
    height:30px !important;
    }
    .junbi {
      display:inline-block ;
      margin: 0 0 0 20px ;
    }
    /* ============================================================== ■■■ 資料ダウンロード　追加クラスここまで　*/
}






/* サイドメニュー */
.subject_menu_heading_s {
  margin: .5em 0 .3em 0 ;
  font-size: 20px ;
}

.firstview .substance .year_position_01 {
  left: 20px;
}
.firstview .substance .year_position_02 {
  left: 178px;
}

.firstview .substance .year_position_03 {
  left: 333px;
  bottom: 38px;
}




@media screen and (min-width: 0px) and (max-width: 1026px) {
  
  .firstview .substance img {
    float: none;
    max-width: 400px;
    margin: 60px -5% 70px auto !important;
    width: 100% !important;
  }

  .firstview .substance .year_position_01 {
    bottom: 80px;
    left: 40%;
    transform: translate(-126px, 0) scale(.82);
  }

  .firstview .substance .year_position_02 {
      bottom: 80px;
      left: 50%;
      transform: translate(-50px, 0) scale(.82);
  }

  .firstview .substance .year_position_03 {
      bottom: 80px;
      left: 60%;
      transform: translate(28px, 0) scale(.82);
  }
}



.adjustment_02 {
  max-width: 629px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.adjustment_02 a {
  width: 32%;
}

.adjustment_02 a img {
  width: 100%;
}

@media screen and (min-width: 0px) and (max-width: 1026px) {
  .adjustment_02 {
    display: block;
  }
  .adjustment_02 a {
    width: 100%;
  }

  .adjustment_02 a img {
    width: 100%;
  }
}