@charset "UTF-8";



/* responsive Start */
/*===================================================================== */

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

/*===============================================================

	container contents 

===============================================================*/

.contents-wrapper{position: relative; height: 100%;}



/*---------------------------------------------------------------
	section-01
---------------------------------------------------------------*/

#section1 {
    width: 100%;
  height: 88vh;
min-width: 100%;
    padding:0 32px 0 32px;
    border-bottom: 12px solid #F7BD11;
      box-sizing: border-box;

  position: relative;
  overflow: hidden;
}


#section1 .logo {
    display: block;
  width: 72%;
  position: absolute;
  top:25vh;
  left: 3%;
  right: 0;
bottom: 25vh;
  margin: auto;

}
#section1 .logo img{width: 100%;}

#section1 .logo .l_onpu{position: absolute; width: 17%; right: 2%; top: -25px;}

    
/*---------------------------------------------------------------
	section-02
---------------------------------------------------------------*/

    
#section2 {
    width: 100%;
    height:100%;
    position: relative;
}
    
.sec2_body{
    position: relative;
    margin-left: 32px;
padding:60px 32px 0 32px; 
  top: 0;
  left:0;
}
    
.sec2_body .ttl{font-size: 54px;}
.sec2_body .ttl p{font-size: 13px; margin: 0; padding: 0; line-height: 1;}

.sec2_body .body{margin:30px 0 0 0;}
.sec2_body .body p{font-size: 14px; line-height: 220%; margin-bottom:30px;}

.sec2_body .body .btn_news{width: 100%; margin-bottom: 30px;}

#section2 .figure{width:100%; height:100%; position:relative; top: 0; left: 0; margin:40px 0 0 0; padding: 0; min-height:100%;}
#section2 .figure img{width: 100%; height: auto; margin:0; padding: 0;}


/*---------------------------------------------------------------
	section-03
---------------------------------------------------------------*/

    
#section3 {
    width: 100%;
    height:auto;
}
    
#section3 .figure{width: calc(100% - 32px); height:auto; min-height:100%; margin:35px 0 0 0; position: relative; left: 0; top: 0; }
#section3 .figure img{width: 100%; height: auto; margin:0; padding: 0;}

#section3 .info_lesson{
    position: relative; 
    width: calc(100% - 32px);
    margin:40px 0 0 32px;
    top: 0;
    left: 0;
}
#section3 .info_lesson .cap{font-size: 11px; margin: 20px 0 0 32px; }

.chart dl{width: calc(100% - 64px); font-size: 13px; line-height: 180%; margin:0 32px 0 32px;}
.chart dl dt{width: calc(35% - 30px); float: left; margin:0 30px 0 0; border-top:1px solid #000; padding: 10px 0; font-weight: bold;}
.chart dl dd{width: 65%; float: left; margin:0!important; border-top:1px solid #F7BD11; padding:10px 0;}


#section3 .figure2{position: relative; left: 0; top: 0; width: calc(100% - 96px); height:auto; margin: 40px 32px 20px 63px; }
#section3 .figure2 img{width: 100%; height: auto; margin:0; padding: 0;}


.sec3_body{
    position: relative;
    width: calc(100% - 96px);
    margin:0 0 0 63px;
  top: 0;
  left:0;
}
.sec3_body .ttl{font-size: 28px;}
.sec3_body .ttl p{font-size: 13px; margin: 0;}

.sec3_body .body{margin:25px 0 0 0; width:100%;}
.sec3_body .body p{font-size: 14px; line-height: 220%;}


#section3 .figure2.fig_second{position: relative; left: 0; top: 0; width: calc(100% - 96px); height:auto; margin: 40px 32px 20px 63px; }
#section3 .figure2.fig_second img{width: 100%; height: auto; margin:0; padding: 0;}

.sec3_body.sec3_second{
    position: relative;
    width: 80%;
  top: 0;
  left:0;
}


#section3 .info_lesson2{
    position: relative; 
    width: calc(100% - 32px);
    margin:40px 0 0 32px;
    top: 0;
    left: 0;
}
#section3 .info_lesson2 .cap{width: calc(100% - 64px); font-size: 11px; margin:20px 32px 0 32px; line-height: 200%;}


#section3 .figure3{position: relative; left: 0; top: 0; width: calc(100% - 96px); height:auto; margin: 30px 32px 20px 63px; min-height:auto;}
#section3 .figure3 img{width: 100%; height: auto; margin:0; padding: 0;}


.sec3_body.sec3_third{
    position: relative;
    width: 80%;
  top: 0;
  left:0;
}

#section3 .figure4{position: relative; left: 0; top: 0; max-width: 100%; height:auto; min-height:auto; margin:30px 0 0 0;}
#section3 .figure4 img{width:100%; height: auto; margin:0; padding: 0;}

#section3 .figure4 .left{float: none; max-width: 100%; height: 100%; margin:0; padding: 0;}
#section3 .figure4 .right{float: none; max-width: 100%; height: 100%; margin:0; padding: 0;}
    
    

/*---------------------------------------------------------------
	section-04
---------------------------------------------------------------*/

#section4 {
    width: calc(100% - 32px);
    padding: 70px 0 0 32px;
    height:auto;
    position: relative;
    z-index: 2;
}

.sec4_body{
    width:calc(100% - 32px); 
    margin-left: 32px;
  position: relative;
  top: 0;
  left:0;
}
.sec4_body .ttl{font-size:42px; line-height: 100%;}
.sec4_body .ttl p{font-size: 13px; margin: 0;}


#section4 .newsarea{position: relative; top:0; left: 0; }
#section4 .newsblock{width:calc(100% - 64px); float: none; margin:0 0 30px 32px;}
#section4 .newsblock:nth-child(odd){margin-right: 80px;}
#section4 .newsblock .newsimage{width:100%; height: auto; overflow: hidden; margin-bottom: 40px;}
#section4 .newsblock .newsimage img{width: 100%; height: auto;}
#section4 .newsblock .date{font-size: 11px; margin-bottom: 16px; letter-spacing:.05em;}
#section4 .newsblock .news_ttl{font-size: 18px; margin-bottom:10px; line-height: 180%; letter-spacing: .04em;}
#section4 .newsblock .news_body{font-size: 13px; font-weight: 400; line-height: 200%; letter-spacing: .04em; font-feature-settings: "palt";}

#section4 .newsblock .btnarea{width: 50%; margin:30px 0 0 0; }

#section4 .btn_newslist{position: relative; top:0; left: 0; width: 110px; margin: 0 auto;}
#section4 .btn_newslist a{
    width: 110px;
    height: 110px;
    color: #FFF;
    font-size: 12px;
    text-decoration: none;
    position: relative;
    transition: transform .3s;
    
/*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向右揃え（Safari用） */
 justify-content: center; /* 横方向右揃え */
}

#section4 .btn_newslist a:hover{ opacity: 1; transition: transform .15s;}

#section4 .btn_newslist a::before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 110px;
    height: 110px;
    border-radius: 70px;
    background-color: #E03134;
    z-index: -1;
    transition: transform .4s;
}

#section4 .btn_newslist a:hover::before{
    transform: scale(1, 1);
    transition: transform .07s;
}

#section4 .figure6{position: relative; left: 0; top: 0; width:calc(100% - 32px); height:auto; min-height:auto; padding:30px 32px 0 0; }
#section4 .figure6 img{width: 100%; height: auto; margin:0; padding: 0;}
    




/*---------------------------------------------------------------
	section-05
---------------------------------------------------------------*/

#section5 {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    background-color: #F7BD11;
}
    
#section5 .sec4_body{
    width:calc(100% - 64px); 
    margin:0 0 0 64px;
    padding-top: 90px;
  position: relative;
  top: 0;
  left:0;
}

#section5 .bord_yellow{
display: none;
}

#section5 .figure7{display: none; position: relative; right: 0; top:0; width:40%; height:40%; }
#section5 .figure7 img{width:100%; height:auto; margin:0; padding: 0;}


#section5 .profilearera{
    position: relative; 
    width:calc(100% - 64px); 
    margin:30px 0 0 64px;
    top: 0; 
    left: 0;
}
#section5 .profilearera .name{
    font-size: 26px;
    margin-bottom: 10px;
}
#section5 .profilearera .profile{
    font-size:12px; line-height: 180%; letter-spacing: .04em; margin-bottom: 15px;
}
#section5 .profilearera .outline{
    font-size:12px; line-height: 180%; letter-spacing: .04em;
}
#section5 .profilearera .outline a{text-decoration: none; position: relative;}
#section5 .profilearera .outline a::after{
  position: absolute;
  bottom: -6px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .2s;
}
#section5 .profilearera .outline a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

#section5 .profilearera .copyright{
    margin-top: 60px;
    padding-bottom: 100px;
    font-size: 10px;
    color: #000000;
    letter-spacing: .04em;
}


.sec5_btnarea{width:calc(100% - 32px); margin-top: 50px; }
.sec5_btnarea .btn_news{float: left; width:100%;}
.sec5_btnarea .btn_news:nth-child(odd){margin-bottom:40px;}
.sec5_btnarea .btn_news a{background-image: url("../images/arrow02_white.png"); font-size: 14px;}
.sec5_btnarea .btn_news a::before{background: #FFF;}


#section5 .gobalmenu{display: none;}


#section5 .figure8{width:12px; position: absolute; left:inherit; right: 28px; top:32px; z-index: 102;}
#section5 .figure8 img{width: 8px; height: auto; margin:0; padding: 0;}
    
    
    
/* responsive End */
/*===================================================================== */
}