@charset "UTF-8";
/* CSS Document 
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');*/

@font-face {
  font-family: "Manrope VF";
  src: url("./fonts/variable/ManropeGX.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 200 800; }
@font-face {
  font-family: "Manrope";
  src: url("./fonts/web/Manrope-Bold.woff2") format("woff2"),
  url("./fonts/ttf/Manrope-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700; }
@font-face {
  font-family: "Manrope";
  src: url("./fonts/web/Manrope-Medium.woff2") format("woff2"),
  url("./fonts/ttf/Manrope-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500; }
@font-face {
  font-family: "Manrope";
  src: url("./fonts/web/Manrope-Regular.woff2") format("woff2"),
  url("./fonts/ttf/Manrope-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400; }


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


                      bace


-----------------------------------------------------------------*/
html{
   margin-top: 0 !important;
}
html #wpadminbar {
   display: none;
}

body {
   line-height: 2.0em;
   font-size: 16px;
   width:100%;
   height:100%;
   background-color: #fff;
   font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   -moz-font-feature-settings:'jp90';
   -moz-font-feature-settings:'jp90=1';
   -webkit-font-feature-settings:'jp90' 1;
}

a {
   text-decoration: none;
}

p {
   margin:0;
   text-align:left;
}

p,li {
  font-size: 14px;
}


dl dd,
ul li {
   line-height: 1.2em;
}

 p,a,h1,h2,h3,.contents-name-side,.contents-number,.hero-text,.icons,.copyright{
  font-family: "Manrope";
  color: #000;
 }

 .main {
  width: 100%;
  height: 100%;
  text-align: center;
 }



/* -----------------------------------------------
common
--------------------------------------------------*/



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

.g-header{
  position:fixed;
  top: 50px;
  right: 0;
  width: 50%;
  padding: 0 6%;
  z-index: 9999;
}
.g-header .inner{
  padding:0;
  margin:0;

}

.g-header .inner .flex{
  padding: 0;

}

.g-header .inner .flex .gloval-nav {
   /*margin:100px 0;*/
   box-sizing: border-box;
}

.g-header .inner .flex .gloval-nav .menu{

}

.g-header .inner .flex .gloval-nav .menu .navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.g-header .inner .flex .gloval-nav .menu .navigation li{
  font-size: 1vw;
   
}

.g-header .inner .flex .gloval-nav .menu .navigation .btn_header{
   font-size: 16px;
   color: #000;
   font-weight: bold;
}

.sp {
  display: none
}



.split-box{
   position:absolute;
   width:50%;
   height:100%;
}

.left-box{
   background-color: #FFF100;
   position: fixed;
   top: 0;
   left: 0;
   box-sizing: border-box;
}

.left-box .flex-item{

}

.left-box .logo{
  text-align: left;
  position: fixed;
  left: 100px;
  top: 50px;
  width: 50%;
  height: auto;
  z-index: 1;
}

.left-box .logo img{
  width: 20%;
 
}

.right-box {
  background-color: #fff;
  position:fixed;
  right:0;
  box-sizing: border-box;
  overflow-x:hidden;
  width: 50%;
  height: 100%;
}


.right-box .inner .flex-item{
}

.right-box .inner .flex .flex-item {

}

.right-box .inner .flex .flex-item .hero-text{
  width: 100%;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
}


.right-box .inner .flex .flex-item .hero-text .item{
   font-size: 1.5rem;
   line-height: 2rem;
   font-weight: bold;
   margin: 20px 0;
   text-align: center;
   letter-spacing: 1px;
}

.right-box .inner .flex .flex-item .hero-text .img{
   margin-top:30px;
}

.right-box .inner .flex .flex-item .hero-text .img img{
   max-width: 5%;
   height: auto;
}



/* -----------------------------------------------
footer
--------------------------------------------------*/

.g-footer{
  position: fixed;
  width: 100%;
  height: auto;
  bottom: 50px;
  left: 100px;
  z-index: 9999;

}

.g-footer .inner{

}

.g-footer .inner .flex{

}

.g-footer .inner .flex .flex-item{
  display: flex;
  align-items: center;
  justify-content: flex-start;

}

.g-footer .inner .flex .text{
   margin: 50px;

}

.g-footer .inner .flex .flex-item .hero-text{
   font-size: 32rem;

}

.g-footer .inner .flex .scroll{

}

.g-footer .inner .flex .sns{
}

.g-footer .inner .flex .flex-item .nav{
   display: flex ;
   justify-content: flex-start;
   align-items: center;
}

.g-footer .inner .flex .flex-item .icons{

}

.g-footer .inner .flex .flex-item .nav .title{

}

.g-footer .inner .flex .flex-item .nav .item{
   margin-right:10px;

}

.g-footer .inner .flex .flex-item .nav .icon svg{
  fill: #000;

}

.g-footer .inner .flex .flex-item .nav .space {
   display: inline-block;
   width: 50px;
   border: 1px solid #000;
}

.g-footer .inner .flex .copyright-box{
   position: fixed;
   bottom: 50px;
   left: 38%;
   z-index: 1;
}

.g-footer .inner .flex .copyright-box .copyright{
   font-size: 12px;
}

.vector {
   display: inline-block;
   position: fixed;
   bottom: 200px;
   left: 50px;
   padding: 10px 80px;
   color: #fff;
   text-decoration: none;
   transform: rotate( 90deg );
}

.vector::after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 10%;
   margin: auto;
   width: 100px;
   height: 10px;
   border-bottom: 1px solid #000;
}
.vector::before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: -28px;
   right: 10%;
   margin: auto;
   width: 20px;
   height: 10px;
   border-top: 1px solid #000;
   -webkit-transform: rotate(-20deg);
   transform: rotate(-20deg);
}

.midnightHeader.white span {
   background-color: #000;
}

.midnightHeader.white svg {
   fill: #000;
}

.midnightHeader.white span {
   color: #000;
}

.midnightHeader.white .title {
   color: #000;
}

.midnightHeader.white .copyright {
   color: #fff;
}

.midnightHeader.white .copyright {
   color: #000;
}

.midnightInner.white{
  display: flex !important;
}



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

  .right-box .inner .flex .flex-item .hero-text .img img{
   max-width: 4%;
   height: auto;
}


}



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

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

.g-header{
  position:fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 50px;
  z-index: 9999;
}
.g-header .inner{

}

.g-header .inner .flex{
  padding: 0;

}

.g-header .inner .flex .pc {
  display: none;
}

.g-header .inner .flex .gloval-nav .menu{

}

.g-header .inner .flex .gloval-nav .menu .pc{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.g-header .inner .flex .gloval-nav .menu .navigation li{
   margin:0 25px;
}

.g-header .inner .flex .gloval-nav .menu .navigation .btn_header{
   font-size: 16px;
   color: #000;
   font-weight: bold;
}

/*ハンバーガーメニュー　---------------------------------------------------------*/

   .sp {
     display: block;
   }

 .nav-toggle {
    position: fixed;
    top: 50px;
    right: 20px;
    height: 32px;
    padding-top: 100px;
    cursor: pointer;
  }
  .nav-toggle > div {
    position: relative;
    width: 36px;
  }
  .nav-toggle span {
    width: 100%;
    height: 2px;
    left: 0;
    display: block;
    background-color: #fff;
    position: absolute;
    transition: transform 0.3s ease-in-out, top 0.5s ease;
    /* #nav-toggle close */
  }

  .nav-toggle span:nth-child(1) {
    top: 0;
  }
  .nav-toggle span:nth-child(2) {
    top: 14px;
  }
  .nav-toggle span:nth-child(3) {
    top: 28px;
  }
  .nav-toggle:hover span:nth-child(1) {
    top: 4px;
  }
  .nav-toggle:hover span:nth-child(3) {
    top: 23px;
  }

  .open .nav-toggle span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
  }
  .open .nav-toggle span:nth-child(2) {
    top: 15px;
    width: 0;
    left: 50%;
  }
  .open .nav-toggle span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
  }

/* z-index */
  .nav-toggle {
    z-index: 9999999;
    top: 50px !important;
    left: 89% !important;
  }
  
  .gloval-nav-sp nav {
     z-index: 999;
      
  }

  .gloval-nav-sp {
    background-color: #FFF100;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 29px;
    padding-left: 0;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .open .gloval-nav-sp {
    transform: translateX(0);
  }

  .gloval-nav-sp a {
    display: inline-block;
    color: #000;
    font-size: 2rem;
    font-weight:bold;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.6s ease;
  }
  .gloval-nav-sp ul {
    list-style: none;
  }
  .gloval-nav-sp ul li {
    transform: translateX(-200px);
    transition: transform 0.5s ease;
    position: relative;
  }
  .gloval-nav-sp ul li:after {
    content: "";
    display: block;
    width: 500px;
    height: 2px;
    background: #000;
    left: -600px;
    position: absolute;
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
  
  .open .gloval-nav-sp li {
    transform: translateX(0);
    text-align: center;
    margin: 50px;
    font-size: 2rem;
  }

  .nav-bg {
    background-color: #FFF101;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    transition: all 1s ease;
  }

  .nav-bg.active {
    opacity: 1;
  }

  /*jquery.midnight*/

.midnightHeader.yellow .nav-toggle span{
   background-color: #fff;
}

.midnightHeader.white .nav-toggle span{
   background-color: #000;
}
/*ハンバーガーメニュー　おわり---------------------------------------------------------*/



.split-box{
  position: unset;
   width:100%;
}

.left-box,.contents-top{
   display: block;
   width: 100%;
   height: 100vh;
   box-sizing: border-box;
}

.contents-top {
  height: 30%;
}

.left-box .logo{
  left: 50px;
  top: 50px;
  width: 50%;
}

.left-box .logo img{
  width: 50%;
 
}


.right-box {
   position:unset;
   margin-bottom: 150px;
}

.top-box:before {
    content: "";
    display: block;
    padding-top: 130%; /* 1:1 */
}

.right-box .inner .flex-item{
}

.right-box .inner .flex .flex-item {

}

.right-box .inner .flex .flex-item .hero-text{
  width: 100%;
  position:unset;
  top: 0;
  left: 0;
  transform: none;
  margin-bottom: 50px;
}

.right-box .inner .flex .flex-item .text{

}

.right-box .inner .flex .flex-item .hero-text .item{
   font-size: 1.5rem;
   font-weight: bold;
   margin: 20px 0;
   text-align: center;
   letter-spacing: 1px;
}

.right-box .inner .flex-item .hero-text{

}

.right-box .inner .flex-item {

}




/* -----------------------------------------------
footer
--------------------------------------------------*/

.g-footer {
   margin: 100px;
}

.g-footer{

}

.g-footer .inner{

}

.g-footer .inner .flex{

}

.g-footer .inner .flex .flex-item{

}

.g-footer .inner .flex .text{
   margin: 50px;

}

.g-footer .inner .flex .flex-item .hero-text{
   font-size: 32rem;

}

.g-footer .inner .flex .scroll{

}

.g-footer .inner .flex .sns{
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 50px;
  left: 50px;
  z-index: 0;
}

.g-footer .inner .flex .flex-item .nav{
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.g-footer .inner .flex .flex-item .icons{

}

.g-footer .inner .flex .flex-item .nav .title{

}

.g-footer .inner .flex .flex-item .nav .item{
   margin-right:10px;

}

.g-footer .inner .flex .flex-item .nav .icon{

}

.g-footer .inner .flex .flex-item .nav .space {
   display: inline-block;
   width: 50px;
   border: 1px solid #000;
}

.g-footer .inner .flex .copyright-box{
   position: fixed;
   bottom: 90px;
   left: 50px;
   z-index: 0;
}

.g-footer .inner .flex .copyright-box .copyright{
   font-size: 12px;
}



.vector {
   display: inline-block;
   position: fixed;
   bottom: 200px;
   left: 50px;
   padding: 10px 80px;
   color: #fff;
   text-decoration: none;
   transform: rotate( 90deg );
}

.vector::after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 10%;
   margin: auto;
   width: 100px;
   height: 10px;
   border-bottom: 1px solid #000;
}
.vector::before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: -28px;
   right: 10%;
   margin: auto;
   width: 20px;
   height: 10px;
   border-top: 1px solid #000;
   -webkit-transform: rotate(-20deg);
   transform: rotate(-20deg);
}


}

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


    .right-box {
     position:unset;
     margin-bottom: 150px;
  }

 .top-box:before {
      content: "";
      display: block;
      padding-top: 100vh;
  }

  .right-box .inner .flex .flex-item .hero-text .item{
   font-size: 1.2rem;
  }

}

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

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

.g-header{
  position:fixed;
  top: 20px;
  right: 0;
  width: 50%;
  height: 50px;
  padding:0;
  z-index: 9999;
}
.g-header .inner{

}

.g-header .inner .flex{
  padding: 0;

}

.g-header .inner .flex .pc {
  display: none;
}

.g-header .inner .flex .gloval-nav .menu{

}

.g-header .inner .flex .gloval-nav .menu .pc{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.g-header .inner .flex .gloval-nav .menu .navigation li{
   margin:0 25px;
}

.right-box .inner .flex .flex-item .hero-text .img{
   margin-top:50px;
}

.right-box .inner .flex .flex-item .hero-text .img img{
   max-width: 10%;
   margin-top: 20px;
}

.g-header .inner .flex .gloval-nav .menu .navigation .btn_header{
   font-size: 16px;
   color: #000;
   font-weight: bold;
}

/*ハンバーガーメニュー　---------------------------------------------------------*/

   .sp {
     display: block;
   }

 .nav-toggle {
    position: fixed;
    top: 50px;
    right: 10px;
    height: 32px;
    padding-top: 100px;
    cursor: pointer;
  }
  .nav-toggle > div {
    position: relative;
    width: 36px;
  }
  .nav-toggle span {
    width: 100%;
    height: 2px;
    left: 0;
    display: block;
    background-color: #fff;
    position: absolute;
    transition: transform 0.3s ease-in-out, top 0.5s ease;
    /* #nav-toggle close */
  }

  .nav-toggle span:nth-child(1) {
    top: 0;
  }
  .nav-toggle span:nth-child(2) {
    top: 14px;
  }
  .nav-toggle span:nth-child(3) {
    top: 28px;
  }
  .nav-toggle:hover span:nth-child(1) {
    top: 4px;
  }
  .nav-toggle:hover span:nth-child(3) {
    top: 23px;
  }

  .open .nav-toggle span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
  }
  .open .nav-toggle span:nth-child(2) {
    top: 15px;
    width: 0;
    left: 50%;
  }
  .open .nav-toggle span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
  }

/* z-index */
  .nav-toggle {
    z-index: 9999999;
    top: 50px !important;
    left: 87% !important;
  }
  
  .gloval-nav-sp nav {
     z-index: 999;
      
  }

  .gloval-nav-sp {
    background-color: #FFF100;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 29px;
    padding-left: 0;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .open .gloval-nav-sp {
    transform: translateX(0);
  }

  .gloval-nav-sp a {
    display: inline-block;
    color: #000;
    font-size: 2rem;
    font-weight:bold;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.6s ease;
  }
  .gloval-nav-sp ul {
    list-style: none;
  }
  .gloval-nav-sp ul li {
    transform: translateX(-200px);
    transition: transform 0.5s ease;
    position: relative;
  }
  .gloval-nav-sp ul li:after {
    content: "";
    display: block;
    width: 500px;
    height: 2px;
    background: #000;
    left: -600px;
    position: absolute;
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
  
  .open .gloval-nav-sp li {
    transform: translateX(0);
    text-align: center;
    margin: 20px;
    font-size: 2rem;
  }

  .nav-bg {
    background-color: #FFF101;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    transition: all 1s ease;
  }

  .nav-bg.active {
    opacity: 1;
  }

  /*jquery.midnight*/

.midnightHeader.yellow .nav-toggle span{
   background-color: #fff;
}

.midnightHeader.white .nav-toggle span{
   background-color: #000;
}
/*ハンバーガーメニュー　おわり---------------------------------------------------------*/


.split-box{
  position: unset;
   width:100%;
}

.left-box,.contents-top{
   display: block;
   width: 100%;
   height: 100vh;
   box-sizing: border-box;
}

.contents-top {
  height: 30%;
}
.left-box .logo{
  left: 10px;
  top: 50px;
  width: 50%;
  height: auto;
}

.left-box .logo img{
  width: 50%;
 
}

.right-box {
   position:unset;
   margin-bottom: 150px;
   padding: 0 10px;
}

.top-box:before {
    content: "";
    display: block;
    padding-top: 95vh;
}


.right-box .inner .flex-item{
}

.right-box .inner .flex .flex-item {

}

.right-box .inner .flex .flex-item .hero-text{
  width: 100%;
  position:unset;
  top: 0;
  left: 0;
  transform: none;
  margin-bottom: 50px;
}

.right-box .inner .flex .flex-item .text{

}

.right-box .inner .flex .flex-item .hero-text .item{
   font-size: 0.9rem;
   line-height:1.5rem;
   font-weight: bold;
   margin: 20px 0;
   text-align: center;
   letter-spacing: 1px;
}

.right-box .inner .flex-item .hero-text{

}

.right-box .inner .flex-item {

}




/* -----------------------------------------------
footer
--------------------------------------------------*/

.g-footer {
   margin: 100px;
}

.g-footer{

}

.g-footer .inner{

}

.g-footer .inner .flex{

}

.g-footer .inner .flex .flex-item{

}

.g-footer .inner .flex .text{
   margin: 50px;

}

.g-footer .inner .flex .flex-item .hero-text{
   font-size: 32rem;

}

.g-footer .inner .flex .scroll{

}

.g-footer .inner .flex .sns{
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 0;
}

.g-footer .inner .flex .flex-item .nav{
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.g-footer .inner .flex .flex-item .icons{

}

.g-footer .inner .flex .flex-item .nav .title{

}

.g-footer .inner .flex .flex-item .nav .item{
   margin-right:10px;

}

.g-footer .inner .flex .flex-item .nav .icon{

}

.g-footer .inner .flex .flex-item .nav .space {
   display: inline-block;
   width: 50px;
   border: 1px solid #000;
}

.g-footer .inner .flex .copyright-box{
   position: fixed;
   bottom: 70px;
   left: 20px;
   z-index: 0;
}

.g-footer .inner .flex .copyright-box .copyright{
   font-size: 12px;
}



.vector {
   display: inline-block;
   position: fixed;
   bottom: 200px;
   left: 50px;
   padding: 10px 80px;
   color: #fff;
   text-decoration: none;
   transform: rotate( 90deg );
}

.vector::after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 10%;
   margin: auto;
   width: 100px;
   height: 10px;
   border-bottom: 1px solid #000;
}
.vector::before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: -28px;
   right: 10%;
   margin: auto;
   width: 20px;
   height: 10px;
   border-top: 1px solid #000;
   -webkit-transform: rotate(-20deg);
   transform: rotate(-20deg);
}


}