@charset "UTF-8";





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

	container contents 

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

.contents-wrapper{position: relative;}


/*---------------------------------------------------------------
	header
---------------------------------------------------------------*/

.contents-header {
  padding: var(--margin) 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.contents-header .section > * {
  max-width: none;
}

/*---------------------------------------------------------------
	main
---------------------------------------------------------------*/

.contents-main {

}


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

.section > *,
.inner {
	max-width: 1400px;
}


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

	gnav

===============================================================

.gnav {
  transition: 0.3s ease;
}

.gnav .label {
  color: var(--main-gray);
  position: relative;
}

.gnav .list.type-split li + li {
  margin-left: 30px;
}

.gnav .label {
  display: inline-block;
}

@media (min-width: 769px) {
  .gnav .list {
    flex-wrap: wrap;
  }
}


/* ------------------------------------------------------------------
 gnav-trigger
------------------------------------------------------------------ 

.gnav-trigger {
	width: 44px;
	height: 44px;
	margin: 0 !important;
	background-color: transparent;
	cursor: pointer;
	position: fixed;
	top: 5px;
	right: 0;
	z-index: 1000;
}

.gnav-trigger > .label {
	width: 32px;
	height: 4px;
	background-color: #333;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.gnav-trigger > .label:before,
.gnav-trigger > .label:after {
	content: '';
	width: 100%;
	height: 4px;
	font-size: 0 !important;
	line-height: 0;
	background-color: #333;
	display: block;
	position: absolute;
	left: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.gnav-trigger > .label:before {
	top: -10px;
}

.gnav-trigger > .label:after {
	bottom: -10px;
}

.gnav-trigger.active > .label {
	background-color: transparent;
}

.gnav-trigger.active > .label:before,
.gnav-trigger.active > .label:after {
	top: 50%;
	left: 50%;
	transform-origin: left top 0;
}

.gnav-trigger.active > .label:before {
	transform: rotate(45deg) translate(-50%, -50%);
}

.gnav-trigger.active > .label:after {
	transform: rotate(-45deg) translate(-50%, -50%);
}

/*---------------------------------------------------------------
	responsive
--------------------------------------------------------------

@media (max-width: 768px) {
  .gnav-trigger {
    display: block;
  }
  .gnav {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    padding: 66px 0 0;
    background-color: var(--white-color);
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 100;
    overflow-y: scroll;
  }
  .gnav.active {
    left: 0;
  }
  .gnav .list.type-split {
    display: block;
  }
  .gnav .list.type-split li {
    width: 100%;
    margin: 0 !important;
    font-size: 1.28em;
  }
  .gnav .list.type-split li .label {
    padding: var(--margin);
    border-bottom: 1px solid var(--main-gray);
  }
  .gnav .list li .label {
    width: 100%;
  }
}





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

	list

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

/*---------------------------------------------------------------
	split
---------------------------------------------------------------

.list.type-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.list.type-split li {
  font-size: 1rem;
  display: inline-block;
}

.list.type-split li + li {
  margin-left: var(--margin-s);
}

/*---------------------------------------------------------------
	split_line
---------------------------------------------------------------

.list.type-split_line {
  display: flex;
  flex-wrap: wrap;
}

.list.type-split_line li {
  font-weight: 700;
  line-height: 1;
}

.list.type-split_line a {
  color: var(--main-gray);
}

.list.type-split_line li + li {
  margin-left: 1em;
  padding-left: 1em;
  border-left: 2px solid var(--main-gray);
}

.contents-footer .list.type-split_line {
  margin-bottom: var(--margin-s);
  font-weight: 600;
}





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

	scroll section

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


.scroll-section .thumbnail figure {
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
}


.scroll-section .thumbnail.trac-back figure.is-inview {
  transform: scale(1) !important;
  transition-delay: .1s;
  transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
  
.scroll-section .thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.area-scroll {
  background-color: transparent !important
}

@media (min-width: 769px) {
  html.has-scroll-init {
    overflow: hidden;
  }
  .area-scroll {
    height: 100vh;
    padding: 0 !important;
    font-size: 0;
    letter-spacing: 0;
    white-space: nowrap;
    position: relative;
  }
  .area-scroll:before {
    content: '';
    height: 100%;
    font-size: 0;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
    display: inline-block;
  }
  .scroll-section {
    width: max-content;
    font-size: 1rem;
    letter-spacing: .075em;
    position: relative;
    /*background-color: #eee;*/
    vertical-align: middle;
    display: inline-block;
  }
  .scroll-section .section {
    display: inline-block;
  }
  .scroll-section [class^="section-"] {
    max-width: none;
    /*margin-left: calc(var(--margin) * 1.75);*/
    padding: 0;
    vertical-align: middle;
    white-space: normal;
    display: inline-block;
  }
  .scroll-section [class^="section-"].size-s {
    width: 100%;
    max-width: 600px;
  }
  .scroll-section [class^="section-"].size-l {
    width: 100%;
    max-width: 1020px;
  }
  .scroll-section [class^="section-"].vertical-full {
    height: 100vh;
  }
  .scroll-section [class^="section-"] + [class^="section-"] {
    margin-top: 0;
  }
  .scroll-section .setion_headding {
    margin-right: calc(var(--margin) * 1.75);
  }
  [data-scroll]:not(.is-inview) {
    transform: none !important;
  }
  .scroll-section .thumbnail:after {
    display: none;
  }
  .scroll-section .thumbnail img {
    width: auto;
    max-width: none;
    height: 100%;
  }
}

@media (max-width: 769px) {
  .section:not(.countdown_area) {
    opacity: 1 !important;
  }
  .main > .section {
    margin-bottom: var(--margin-l);
  }
  .main > :last-child {
    margin-bottom: 0 !important;
  }
  .section + .section {
    padding-top: var(--margin-l);
  }
  .area-scroll {
    padding: 0 !important;
  }
  .scroll-section .thumbnail {
    width: 100%;
    height: auto;
  }
  .scroll-section .thumbnail img {
    width: 100%;
    height: auto;
  }
}

/*---------------------------------------------------------------
	section-01
---------------------------------------------------------------*/
#section1 {
    width: calc(100vw - 70px);
    min-width: 980px;
    height: calc(100vh - 8px);
    padding-left: 70px;
    overflow: hidden;
    border-bottom: 8px solid #F7BD11;
}

#section1 .section-header {
  height: 100%;
}
/*
#section1 .logo {
    display: block;
  width: 36vw;
  position: absolute;
  top: 20vh;
  left:32vw;
}
*/
#section1 .logo {
  width: 39%;
  position: absolute;
  top: 18%;
  left: 0;
  right: 0;
  bottom: 18%;
  margin: auto;
    
}

#section1 .logo .logo_inner{position: relative;}

#section1 .logo .cha01{position: absolute; width: 36%; top: 5%; left: 44%;}
#section1 .logo .cha02{position: absolute; width: 36%; top: 27.5%; left: 29%;}
#section1 .logo .cha03{position: absolute; width: 36%; top: 24.5%; right: 0%;}
#section1 .logo .cha01 img,#section1 .logo .cha02 img,#section1 .logo .cha03 img{width: 100%;}

#section1 .logo .l_onpu{position: absolute; width: 17%; right: 2%; top: -1.5%;}
#section1 .logo .l_onpu img{width: 100%;}

#section1 .logo .l_lesson{position: absolute; width: 62%; left: 23%; bottom: 1.5%;}
#section1 .logo .l_lesson img{width: 100%;}


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


#section1 .logo .logo_sp{display: none;}



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

#section2 {
    width: 1860px;
    height: 100vh;
}

@media only screen and (min-width:1460px){
    #section2 {width: 2100px;}
}

@media only screen and (min-width:1960px){
    #section2 {width: 2460px;}
}

@media only screen and (min-width:2200px){
    #section2 {width: 2720px;}
}

.sec2_body{
    position: absolute;
  top: 130px;
  left:140px;
}
.sec2_body .ttl{font-size: 90px;}
.sec2_body .ttl p{font-size: 13px; margin: 0;}

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

.sec2_body .body .btn_news{width: 280px; margin-bottom: 50px;}

#section2 .figure{position: absolute; left: 880px; top: 0; width:100vw; height:93vh; min-height:580px;}
#section2 .figure img{width: auto; height: 100%; margin:0; padding: 0;}

@media only screen and (min-width:2100px){
#section2 .figure{position: absolute; left: 940px;}
}


/*---------------------------------------------------------------
	section-03
---------------------------------------------------------------*/
#section3 {
    width: 6720px;
    height: 100vh;
}

@media only screen and (min-width:1460px){
#section3 {width: 6800px;}
}

@media only screen and (min-width:1960px){
#section3 {width: 7170px;}
}

@media only screen and (min-width:2200px){
#section3 {width: 7590px;}
}



#section3 .figure{position: absolute; left: 800px; top: 0; width: 260px; height:93vh; min-height:580px;}
#section3 .figure img{width: auto; height: 100%; margin:0; padding: 0;}

#section3 .info_lesson{
    position: absolute;
    top: 180px;
    left: 1200px;
}

@media only screen and (min-width:1680px){
#section3 .info_lesson{left: 1230px;}
}

@media only screen and (min-width:1960px){
#section3 .info_lesson{left: 1280px;}
}

@media only screen and (min-width:2200px){
#section3 .info_lesson{left: 1380px;}
}


#section3 .info_lesson .cap{font-size: 11px; margin-top: 20px;}

.chart dl{width: 690px; font-size: 13px; line-height: 180%;}
.chart dl dt{width: 150px; float: left; margin-right: 0; border-top:1px solid #000; padding: 20px 0; font-weight: bold;}
.chart dl dd{width: 480px; float: left; border-top:1px solid #F7BD11; padding:20px 0;}


#section3 .figure2{position: absolute; left: 1990px; top: 190px; width: 385px; height:376px; }
#section3 .figure2 img{width: auto; height: 100%; margin:0; padding: 0;}

@media only screen and (min-width:1680px){
#section3 .figure2{left: 1990px;}
}

@media only screen and (min-width:1960px){
#section3 .figure2{left: 2040px;}
}

@media only screen and (min-width:2200px){
#section3 .figure2{left: 2160px;}
}


.sec3_body{
    position: absolute;
    width: 380px;
  top: 260px;
  left:2460px;
}

@media only screen and (min-width:1680px){
.sec3_body{left: 2460px;}
}

@media only screen and (min-width:1960px){
.sec3_body{left: 2500px;}
}

@media only screen and (min-width:2200px){
.sec3_body{left: 2630px;}
}

.sec3_body .ttl{font-size: 36px;}
.sec3_body .ttl p{font-size: 13px; margin: 0;}

.sec3_body .body{margin:50px 0 0 0;}
.sec3_body .body p{font-size: 13px; line-height: 220%;}


#section3 .figure2.fig_second{position: absolute; left: 2920px; top: 190px; width: 385px; height:376px; }
#section3 .figure2.fig_second img{width: auto; height: 100%; margin:0; padding: 0;}

@media only screen and (min-width:1680px){
#section3 .figure2.fig_second{left: 2920px;}
}

@media only screen and (min-width:1960px){
#section3 .figure2.fig_second{left: 2950px;}
}

@media only screen and (min-width:2200px){
#section3 .figure2.fig_second{left:3090px;}
}


.sec3_body.sec3_second{
    position: absolute;
    width: 320px;
  top: 260px;
  left:3390px;
}

@media only screen and (min-width:1680px){
.sec3_body.sec3_second{left: 3390px;}
}

@media only screen and (min-width:1960px){
.sec3_body.sec3_second{left: 3410px;}
}

@media only screen and (min-width:2200px){
.sec3_body.sec3_second{left: 3560px;}
}


#section3 .info_lesson2{
    position: absolute;
    width: 690px;
    top: 265px;
    left: 3780px;
}
#section3 .info_lesson2 .cap{font-size: 11px; margin-top: 20px; line-height: 220%;}

@media only screen and (min-width:1680px){
#section3 .info_lesson2{left: 3780px;}
}

@media only screen and (min-width:1960px){
#section3 .info_lesson2{left: 3790px;}
}

@media only screen and (min-width:2200px){
#section3 .info_lesson2{left: 3955px;}
}


#section3 .figure3{position: absolute; left: 4540px; top: 0; width: 260px; height:93vh; min-height:580px;}
#section3 .figure3 img{width: auto; height: 100%; margin:0; padding: 0;}


@media only screen and (min-width:1680px){
#section3 .figure3{left: 4540px;}
}

@media only screen and (min-width:1960px){
#section3 .figure3{left: 4540px;}
}

@media only screen and (min-width:2200px){
#section3 .figure3{left: 4700px;}
}


.sec3_body.sec3_third{
    position: absolute;
    width: 380px;
  top: 260px;
  left:4920px;
}


@media only screen and (min-width:1680px){
.sec3_body.sec3_third{left:4920px;}
}

@media only screen and (min-width:1960px){
.sec3_body.sec3_third{left:5020px;}
}

@media only screen and (min-width:2200px){
.sec3_body.sec3_third{left:5240px;}
}


#section3 .figure4{position: absolute; left: 5380px; top: 0; max-width: 1275px; height:93vh; min-height:580px;}
#section3 .figure4 img{width: auto; height: 100%; margin:0; padding: 0;}


@media only screen and (min-width:1680px){
#section3 .figure4{left: 5380px;}
}

@media only screen and (min-width:1960px){
#section3 .figure4{left: 5470px;}
}

@media only screen and (min-width:2200px){
#section3 .figure4{left: 5690px;}
}


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


/*
#section3 .figure5{position: absolute; left: 5858px; top: 0; width: 260px; height:93vh; min-height:580px;}
#section3 .figure5 img{width: auto; height: 100%; margin:0; padding: 0;}
*/



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

#section4 {
    width: 2000px;
    height: 100vh;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width:1680px){
#section4 {width: 2030px;}
}

@media only screen and (min-width:1960px){
#section4 {width: 2120px;}
}

@media only screen and (min-width:2200px){
#section4 {width: 2180px;}
}



.sec4_body{
    position: absolute;
  top: 150px;
  left:140px;
}
.sec4_body .ttl{font-size:46px; line-height: 100%;}
.sec4_body .ttl p{font-size: 13px; margin: 0;}


#section4 .newsarea{position: absolute; top:160px; left: 435px; }
#section4 .newsblock{width: 420px; float: left; margin-bottom: 60px;}
#section4 .newsblock:nth-child(odd){margin-right: 80px;}
#section4 .newsblock .newsimage{width:420px; height: 255px; 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: 17px; margin-bottom:10px; line-height: 180%; letter-spacing: .04em;}
#section4 .newsblock .news_body{font-size: 12px; font-weight: 400; line-height: 200%; letter-spacing: .04em; font-feature-settings: "palt";}

#section4 .newsblock .btnarea{width: 210px; margin:40px 0 0 0; }

#section4 .btn_newslist{position: absolute; top:345px; left: 1495px;}
#section4 .btn_newslist a{
    width: 140px;
    height: 140px;
    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: 0.9; transition: transform .15s;}

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

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

#section4 .figure6{position: absolute; left: 1780px; top: 0; width: 260px; height:93vh; min-height:580px;}
#section4 .figure6 img{width: auto; height: 100%; margin:0; padding: 0;}


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

#section5 {
    width: 450px;
    height: 100vh;
    position: relative;
    z-index: 1;
}

@media only screen and (min-width:1460px){
#section5 {width: 460px;}
}



#section5 .bord_yellow{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #F7BD11;
    width: 1100px;
    height: 630px;
}

#section5 .figure7{position: absolute; left: 895px; top:114px; width:390px; height:390px; }
#section5 .figure7 img{width: auto; height: 100%; margin:0; padding: 0;}


#section5 .profilearera{
    position: absolute; 
    top: 280px; 
    left: 140px;
}
#section5 .profilearera .name{
    font-size: 24px;
    margin-bottom: 20px;
}
#section5 .profilearera .profile{
    font-size:11px; line-height: 180%; letter-spacing: .04em; margin-bottom: 40px;
}
#section5 .profilearera .outline{
    font-size:11px; 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: 110px;
    font-size: 10px;
    color: #000000;
    letter-spacing: .04em;
}


.sec5_btnarea{width: 460px; margin-top: 50px;}
.sec5_btnarea .btn_news{float: left; width:200px;}
.sec5_btnarea .btn_news:nth-child(odd){margin-right:60px;}
.sec5_btnarea .btn_news a{background-image: url("../images/arrow02_white.png");}
.sec5_btnarea .btn_news a::before{background: #FFF;}



#section5 .gobalmenu{position: absolute; bottom: 70px; left: 200px;}
#section5 .gobalmenu ul{margin: 0; padding: 0;}
#section5 .gobalmenu li{display: inline-block; margin: 0 50px 0 0; }
#section5 .gobalmenu li a{text-decoration: none; font-size: 15px; position: relative; letter-spacing: .03em; }
#section5 .gobalmenu li 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 .gobalmenu li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}



#section5 .figure8{position: absolute; left:1040px; top:655px;}
#section5 .figure8 img{width: 60px; height: auto; margin:0; padding: 0;}