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

  home

  01. forPC Layout

  02. forSP Layout

  03. forSP Layout (max-width: 321px)

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






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

  01. forPC Layout

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

/* ----------------------------------
  PC　SP view divergence - utility
---------------------------------- */
.u-media-pc {
  display: block;
}
.u-media-sp {
  display: none;
}

/*===========================================
  main_pict
  リード・メインビジュアル
=============================================*/

.main_pict {position: relative; overflow: hidden;}
.main_pict .main_pict_bg {z-index:1;}
.main_pict .main_pict_inner {z-index:2;}

.main_pict .main_pict_inner {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
}
.main_pict .main_pict_inner .main_lead {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.main_pict .main_pict_inner .main_text_year {
    height: 100%;
    width: 100%;
    text-align: center;
}
.main_pict .main_pict_inner .main_text_year img {
    width: 16%;
    margin: 0 42%;
    filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .75));
}
.main_pict .main_pict_inner .main_text_guide {
    height: 100%;
    width: 100%;
    text-align: center;
}
.main_pict .main_pict_inner .main_text_guide img {
    width: 9.4%;
    margin: 0 45.3%;
}
.main_pict .main_pict_inner .main_text {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 0 0 20px 10px;
  color: #fff;
  font-family: 'Noto Sans JP', serif;
  font-size: 6.5vw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .15em;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, .75);
}
@media screen and (max-width: 900px) {
.main_pict .main_pict_inner .main_text {
  font-size: 9.5vw;
}
}
.main_pict .main_pict_inner .main_text .main_text_small {
  font-size: 3.5vw;
}

.main_pict .main_pict_bg {
  position: relative;
  overflow: hidden;
  /*height: 560px;*/
  height: 35vw;
  text-align: center;
}
@media screen and (max-width: 900px) {
.main_pict .main_pict_bg {
  height: 60vw;
}
}

.main_pict .main_pict_bg img {
  position: relative;
  /*left: 50%;
  transform: translate(-50%, 0);*/
  width: 100%;
  /*min-width: 1024px;*/
}

.main_pict .slick-slider {
    top: 50%;
    transform: translate(0px, -50%);
}
.main_pict .slick-slide{
  overflow: hidden;
  height: 35vw;
}

  .main_pict .slide-pc {
    display: block;
  }
  .main_pict .slide-sp {
    display: none;
  }


@media screen and (max-width: 1026px) {
  .main_pict .slide-pc {
    display: none;
  }
  .main_pict .slide-sp {
    display: block;
  }
}

/*@media screen and (max-width: 900px) {
.main_pict .slick-slide{
  height: 60vw;
}
}*/

.slide-animation{
    animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

.main_pict_bg .caption {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 15%;
  transform: translate(-50%,0);
  padding: 4px 1px 4px 6px;
  background: rgba(255,255,255,.7);
  letter-spacing: -.03em;
}
.main_pict_bg .caption_top {
  font-size: 14px;
}
.main_pict_bg .caption_bottom {
  font-size: 13px;
}
.main_pict_bg .title_textbook {
  margin: 0 2px;
  padding: 2px 4px;
  background: #999;
  color: #fff;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, 
.main_pict_bg .title_textbook {
  padding: 2px 4px 0;
}  /* IE11 */
}

.main_pict_bg .caption_left {
  transform: translate(-140%,0);
}
.main_pict_bg .caption_right {
  transform: translate(40%,0);
}
.mainpict_kokugo .title_textbook {
  background: #e62b3c;
}
.mainpict_shakai .title_textbook {
  background: #bac622;
}
.mainpict_sugaku .title_textbook {
  background: #264fd6;
}
.mainpict_rika .title_textbook {
  background: #0095e5;
}
.mainpict_shodo .title_textbook {
  background: #f68200;
}
.mainpict_eigo .title_textbook {
  background: #0a8e3d;
}
.mainpict_katei .title_textbook {
  background: #f5b41b;
}
.mainpict_joho .title_textbook {
  background: #37a514;
}

/* ============================================================ nav_panel */
.nav_panel {
  background: #eff5f7;
}
.nav_panel .nav_panel_main {
  position: relative;
  z-index: 5;
  top: -25px;
  display: flex;
  max-width: 1070px;
  margin: 0 auto;
  background: #fff;
  font-size: min(1.75vw, 20px);
}
.nav_panel .nav_panel_main li {
  flex: 1;
}
.nav_panel .nav_panel_main li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border: 1px solid #000484;
  border-right: none;
  transition: background 0.4s ease 0s;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, 
.nav_panel .nav_panel_main li a {
  padding: 7px 0 1px;
}  /* IE11 */
}

.nav_panel .nav_panel_main li a:hover {
  background: #888;
  color: #fff;
}
.nav_panel .nav_panel_main .nav_panel_kokugo a:hover {
  background: #e62b3c;
}
.nav_panel .nav_panel_main .nav_panel_shakai a:hover {
  background: #bac622;
}
.nav_panel .nav_panel_main .nav_panel_sugaku a:hover {
  background: #264fd6;
}
.nav_panel .nav_panel_main .nav_panel_rika a:hover {
  background: #0095e5;
}
.nav_panel .nav_panel_main .nav_panel_shodo a:hover {
  background: #f68200;
}
.nav_panel .nav_panel_main .nav_panel_eigo a:hover {
  background: #0a8e3d;
}
.nav_panel .nav_panel_main .nav_panel_katei a:hover {
  background: #f5b41b;
}
.nav_panel .nav_panel_main .nav_panel_joho a:hover {
  background: #37a514;
}
.nav_panel .nav_panel_main .nav_panel_tankyu a:hover {
  background: #920783;
}

.nav_panel .nav_panel_main li:last-child a {
  border-right: 1px solid #000484;
}
.nav_panel .nav_panel_main li a:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: "";
  height: 4px;
  width: 100%;
  background: #000484;
}

/* ============================================================ btn */
.btn_wrap {
  padding: 40px 0;
  background: #eff5f7;
  text-align: center;
}
.btn_wrap .btn {
  padding: 0 0 0 29px;
  display: inline-block;
  text-decoration: none;
}
.btn_wrap .btn span{
    border: 1px solid #ccc;
    font-size: 22px;
    padding: 15px 50px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition-property: color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 2;
    min-width: 520px;
    height: 72px;
    margin: 0 auto;
    background-color: #fff;
    pointer-events: painted;
}
.btn_wrap .btn span:before {
    content: "";
    display: block;
    width: 68px;
    height: 2px;
    border-bottom: 5px solid #76c9ec;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -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);
}
.btn_wrap .btn span:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 0;
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    background-color: #0096df;
    right: auto;
    left: 0;
    width: 100%;
    opacity: 0;
}
.btn_wrap .btn span:hover {
    color: #fff;
    text-decoration: none;
    border: 1px solid #0096df;
    border-color: #0096df;
}
.btn_wrap .btn span:hover:after {
    opacity: 1;
}
.btn_wrap .btn span:hover:before {
    transform: translate(-50%, -50%) scaleX(0);
    border-bottom: 5px solid #0096df;
    border-color: #0096df;
    z-index: -1;
}

.btn_wrap_contact {
  position: relative;
  padding: 70px 0;
  min-height: 210px;
  background: #f7f7f7;
}
.btn_wrap_contact .btn span{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: none;
}

.btn_wrap_sitemap {
  position: relative;
  padding: 10px 0;
  background: #eff5f7;
}
.btn_wrap_sitemap .btn span{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(330px, -50%);
    border: none;
    padding: 0 36px;
    height: 40px;
    min-width: 140px;
    font-size: 18px;
}
.btn_wrap_sitemap .btn span:before {
    width: 34px;
}
.btn_wrap_sitemap .icon_new {
    left: 50%;
    top: -5px;
    transform: translate(486px, 0);
}

/* ============================================================ home_content */
#content_lead {
  padding: 0 0 14px;
  background: #eff5f7;
}
#content_lead .box_wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 15px 0 30px;
}
#content_lead .box {
  font-size:14px;
  letter-spacing: .05em;
}
#content_lead .substance {
  position: relative;
}
#content_lead .text_lead {
  color: #000484;
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 2;
  text-align: center;
}
#content_lead .text_lead:after {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translate(-50%,0);
    content: "";
    height: 4px;
    width: 105px;
    background: #0096dd;
}

#pick_up {
  min-height: 250px;
  padding: 0 0 14px;
  background: #fff;
}
#pick_up .pick_up_title{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.05em;
}
#pick_up .box_wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px 2%;
}
#pick_up .box {
  display: flex;
  justify-content: space-between;
}
#pick_up .news_list {
  max-width: 950px;
  width: 77.8%;
}

#pick_up_top {
  padding: 0 0 14px;
  background: #fff;
}
#pick_up_top .pick_up_title{
  height: 1.6em;
  border-bottom: 4px solid #3fac2f;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.05em;
}
#pick_up_top .box_wrap {
  width: 1280px;
  margin: 0 auto;
  padding: 50px 0 0;
}
#pick_up_top .box {
  display: flex;
  justify-content: space-between;
}
#pick_up_top .news_list {
  width: 950px;
}

.news_list .news_list_date {
  width: 15%;
  color: #4b68af;
}
.news_list .news_list_content {
  width: 85%;
}
.news_list .news_list_block {
  border-bottom: 1px solid #b4b4b4;
  padding: 10px 0;
  width: 100%;
}
.news_list .news_list_block .no_link {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.news_list .news_list_block_inner {
  display: flex;
  flex-wrap: wrap;
}

/*.news_list .news_list_block:first-child a,
.news_list .news_list_block:first-child .no_link {
  padding: 8px 0 10px;
}*/

.news_list .news_list_block .news_list_content p{
  margin: 0 0 2px;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, 
.news_list .news_list_block .news_list_content p{
  margin: 0 0 5px;
}  /* IE11 */
}

.news_list .news_list_block .news_list_content a span{
  border-bottom: 1px solid #000;
}
.news_list .news_list_block .news_list_content a:hover span{
  border-bottom: none;
}

/* もっと見る */
.news_list .news_list_block.infoList {
    display: none; /* もっと見る 設置時に有効化 */
}
a.ico_pulldown.switchInfo{
    position: relative;
    display: block; /* もっと見る 設置時に有効化 */
    margin: 25px 0 5px 250px;
    padding: 1px 0 3px;
    width: 180px;
    border: 1px solid #b4b4b4;
    color: #6e6e6e;
    text-align: center;
}
a.ico_pulldown.switchInfo:after{
    content: "閉じる";
    font-size: 14px;
}
a.ico_pulldown.switchInfo.active:after{
    content: "もっと見る";
    font-size: 14px;
}
a.ico_pulldown.switchInfo span{
    position: absolute;
    display: block;
    height: 30px;
    top: 0;
    background-size: 12px auto;
}

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

a.ico_pulldown.switchInfo {
    left: 50%;
    transform: translate(-50%, 0);
    margin: 25px 0 5px;
}

}

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

.news_list .news_list_block {
    width: auto;
}
a.ico_pulldown.switchInfo {
    left: auto;
    transform: translate(0, 0);
    margin: 25px auto 5px;
/*    width: 100%;*/
}
a.ico_pulldown.switchInfo:after{
    font-size: 12px;
}
a.ico_pulldown.switchInfo.active:after{
    font-size: 12px;
}

}

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

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


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

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



/* ----------------------------------
  PC　SP view divergence - utility
---------------------------------- */
.u-media-pc {
  display: none;
}
.u-media-sp {
  display: block;
}

img {
  height: auto;
    /*width: 100%;*/
}

#home_content{
    /*position: relative;
    margin-right: auto;
    margin-left: auto;
    max-width: 400px;*/
}

/*===========================================
  main_pict
  リード・メインビジュアル
=============================================*/
.nav_active .main_pict {
  /*display: none;*/
}

.main_pict .main_pict_inner {
  /*transform: translate(-50%, -50%);*/
}
.main_pict .main_pict_inner .main_text_year img {
  width: 140px;
  margin: 0;
}
.main_pict .main_pict_inner .main_text .main_text_small {
    font-size: 26px;
}
.main_pict .main_pict_inner .main_text_guide img {
  width: 83px;
  margin: 0;
}

.main_pict {
/*  margin: -80px 0 0;*/
}
.main_pict .main_pict_bg {height:465px;}

.main_pict .main_pict_bg img {
    /*min-width: auto;*/
}

.main_pict .slick-slider {
    top: 80px;
    transform: translate(0, 0);
}
.main_pict .slick-slide {
    height: 385px;
}

.main_pict .main_pict_inner .main_text{
  position: relative;
  margin: 0 0 13px 10px;
  font-size: min(14.5vw, 64px);
}

.main_pict_bg .caption {
    position: absolute;
    z-index: 5;
    left: 3%;
    bottom: 55px;
    transform: translate(0,0);
    width: 250px;
    padding: 6px 6px 4px;
    background: rgba(255,255,255,.7);
    letter-spacing: -.03em;
    line-height: 1.2;
    /*zoom: .8;*/
    transform: scale(.8);
    transform-origin:left bottom;
}
.main_pict_bg .title_textbook {
    padding: 1px 4px;
}
.main_pict_bg .caption_top {
    margin: 0 0 5px;
    font-size: 12px;
}
.main_pict_bg .caption_bottom {
    font-size: 11px;
}

/* ============================================================ nav_panel */
.nav_active .nav_panel {
  display: none;
}

.nav_panel .nav_panel_main {
    position: relative;
    z-index: 5;
    top: -28px;
    display: flex;
    flex-wrap: wrap;
    min-width: 352px;
    margin: 0 auto;
    background: #fff;
    font-size: 12px;
}
.nav_panel .nav_panel_main li {
    flex-basis: 11.11%;
}
.nav_panel .nav_panel_main li a {
    padding: 3px 0;
    min-height: 44px;
    text-align: center;
}
.nav_panel .nav_panel_main li:nth-child(4) a {
    /*border-right: 1px solid #000484;*/
}

.nav_panel .nav_panel_main li.nav_panel_shakai a {
    padding: 3px 4px 3px 0;
}

/* ============================================================ btn */
.btn_wrap .btn span {
    font-size: 13px;
    padding: 10px 50px;
    min-width: 274px;
    height: 42px;
}
.btn_wrap .btn span:before {
    width: 42px;
    height: 2px;
    border-bottom: 4px solid #76c9ec;
}
.btn_wrap .btn span:hover:before {
    border-bottom: 4px solid #0096df;
}

.btn_wrap_contact {
    padding: 40px 0;
    min-height: auto;
}
.btn_wrap_contact .btn span {
    transform: translate(-47%, -50%);
}

.btn_wrap_sitemap {
    padding: 5px 0;
}
.btn_wrap_sitemap .btn span {
    left: auto;
    right: 2%;
    transform: translate(0, -50%);
    padding: 0 28px;
    height: 30px;
    min-width: 134px;
    font-size: 13px;
}
.btn_wrap_sitemap .btn span:before {
    width: 25px;
}
.btn_wrap_sitemap .icon_new {
    left: auto;
    right: 2%;
    top: -11px;
    transform: translate(0, 0);
}

/* ============================================================ home_content */
.nav_active #contents {
  display: none;
}

.box_wrap {
    padding: 12px 2% 18px;
    width: 96%;
}

#content_lead .box_wrap {
    width: 94%;
    margin: 0 auto;
    padding: 15px 0 25px;
}
#content_lead .text_lead {
    font-size: 15px;
    line-height: 1.8;
}
#content_lead .text_lead:after {
    bottom: -17px;
    height: 3px;
    width: 52px;
}

#pick_up {
    padding: 0 3%;
}
#pick_up .box_wrap {
/*    max-width: 400px;*/
    width: 100%;
    padding: 30px 0 40px;
}
#pick_up .box {
    flex-wrap: wrap;
}
#pick_up .pick_up_title {
    font-size: 21px;
    letter-spacing: 0;
}
#pick_up .substance {
    width: 92%;
    padding: 4% 4% 10%;
}

#pick_up .substance p {
    float: none;
    width: 100%;
    margin: 0px 0 0;
}

#pick_up .news_list {
  width: 100%;
}

#pick_up_top {
    padding: 0 3%;
}
#pick_up_top .box_wrap {
    max-width: 400px;
    width: 100%;
    padding: 30px 0 5px;
}
#pick_up_top .box {
    flex-wrap: wrap;
}
#pick_up_top .pick_up_title {
    border-bottom: 3px solid #3fac2f;
    font-size: 21px;
    letter-spacing: 0;
}
#pick_up_top .substance {
    width: 92%;
    padding: 4% 4% 10%;
}

#pick_up_top .substance p {
    float: none;
    width: 100%;
    margin: 0px 0 0;
}

#sub_cat .box_wrap {
    width: 100%;
}

.news_list .news_list_block {
    flex-flow: column;
    padding: 9px 0;
}
.news_list .news_list_block .no_link {
    flex-flow: column;
}
.news_list .news_list_content {
    width: 100%;
    letter-spacing: -.09em;
}
.news_list .news_list_block:first-child a,
.news_list .news_list_block:first-child .no_link {
  padding: 8px 0 9px;
}


}




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

  03. forSP Layout
    *横幅が320px以下の場合


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

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



.main_pict .main_pict_bg {
    height: 435px;
}

.main_pict .main_pict_inner {
    transform: translate(-50%, -58%);
}

#home .wide_btn02_wrap {
    top: 302px;
}

#home .wide_btn03_wrap {
    top: 262px;
}

.main_pict_bg .caption {
    bottom: 85px;
}


}