@charset "utf-8";

.pc{
   display: block;
 }
 
 .sp{
   display: none;
 }

 .megamenu_global-nav {
   display: flex;
    font-family: 'noto-sans-jp', sans-serif !important;
    position: fixed;
    right: -100%;
    top: 0;
    width: 100%;
    height: 100vh;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
    z-index: 200;
    overflow-y: auto;
    font-size: 14px;
 }
 
 .hamburger, .black_hamburger {
   position: absolute;
   /* right: -2%; */
   right: 60px;
   top: 28px;
   cursor: pointer;
   z-index: 300;
   opacity: 1;
   width: 44px;
   height: 44px;
   border: #fff 2px solid;
   border-radius: 27px;
}

 
.index_hamburger{
   position: absolute;
   /* right: -2%; */
   right: 64px;
   top: 28px;
   cursor: pointer;
   z-index: 300;
   opacity: 1;
   width: 44px;
   height: 44px;
   border: #fff 2px solid;
   border-radius: 27px;
}
 .index_hamburger{
   animation-name: fadeinright;
   animation-fill-mode:forwards;
   animation-duration: 10s;
}
 
.sns_menu {
   display: flex;
   justify-content: space-between;
   width: 150%;
   align-items: center;
}
.sns_menu li {
font-weight: 700;
}
.sns_menu li img{
   width: 40px;
}


.hamburger__line {
   position: absolute;
   margin-top: -8px;
   left: 12px;
   width: 15px;
   height: 2px;
   border-radius: 2px;
   background-color: #fff;
   -webkit-transition: all .6s;
   transition: all .6s;
   -moz-transition: all .6s;
   -ms-transition: all .6s;
   -o-transition: all .6s;
}

 .black_hamburger .hamburger__line {
    background-color: #000;
 }
 .hamburger__line--1 {
    top: 21px;
 }
 .hamburger__line--2 {
    top: 27px;
 }
 .hamburger__line--3 {
    top: 33px;
 }

 .black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background-image: linear-gradient(-90deg,#1EA9C3,#155493);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
    cursor: pointer;
 }
 .nav-open .megamenu_global-nav {
    right: 0;
 }
 .nav-open .black-bg {
    opacity: 1;
    visibility: visible;              
 }
 .nav-open .hamburger__line--1 {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   top: 26px;
   background-color: #fff;
}
 .nav-open .hamburger__line--2 {
    width: 0;
    left: 50%;
    background-color: #fff;
 }
 .nav-open .hamburger__line--3 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 26px;
    background-color: #fff;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
 }
  

.megamenu_global-nav__list {
   display: flex;
   flex-wrap: wrap;
   margin: 0 0 0 15%;
   padding: 5% 0 0 0;
   list-style: none;
   width: 90%;
}
.megamenu_global-nav__item {
   width: 224px;
       display: inline-block;
       margin-right: 80px;
}

 .megamenu_global-nav__item a {
    display: block;
    padding: 2% 0%;
    text-decoration: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1.3;
    position: relative;
 }
 
 .megamenu_global-nav__item span {
   font-family:"roboto";
 }
 .megamenu_global-nav__item h2 {
   font-family: 'noto sans jp';
   font-size: 2.8rem;
   margin-top: 5px;
   text-align: left;
}

 .megamenu_global-nav_description {
   line-height: 5rem;
}
.megamenu_global-nav_description li {
   padding-top: 20px;
   font-family: 'noto-sans-jp', sans-serif;
   font-size: 1.6rem;
   color: #fff;
}
a .pt10{
   padding-top: 10px;
}

.hamburger span:nth-of-type(4)::after {
   content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
   position: absolute;
   top: 50px;
   left: -5px;
   font-family: 'roboto', sans-serif;
   font-size: 1.6rem;
   text-transform: uppercase;
   color: #fff;
 }
.index_hamburger span:nth-of-type(4)::after {
   content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
   position: absolute;
   top: 50px;
   left: -5px;
   font-family: 'noto-sans-jp', sans-serif;
   font-size: 1.6rem;
   text-transform: uppercase;
   color: #fff;
 }
 .index_hamburger.active span:nth-of-type(4)::after {
   content:"Close";/*3つ目の要素のafterにClose表示を指定*/
     top: 50px;
     left: -5px;
     color: #fff;
 }
 .hamburger.active span:nth-of-type(4)::after {
   content:"Close";/*3つ目の要素のafterにClose表示を指定*/
     top: 50px;
     left: -5px;
     color: #fff;
     font-family: 'roboto';
 }

.megamenu_copyright {
   position: absolute;
   display: block;
   font-family: 'noto-sans-jp', sans-serif;
   font-size: 1.3rem;
   text-align: center;
   bottom: 5%;
   left: 50%;
   transform: translate(-50%, 0%);
}


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

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

   .sp{
     display: block;
   }
   
   .pc{
     display: none;
   }

   .hamburger, .black_hamburger {
      position: fixed;
      /* right: -2%; */
      right: 27px;
      top: 20px;
      cursor: pointer;
      z-index: 300;
      opacity: 1;
      width: 44px;
      height: 44px;
      border: #fff 2px solid;
      border-radius: 27px;
  }
   .black_hamburger {
      border: #000 2px solid;
      top: 12px;
  }

 .black_hamburger .hamburger__line {
 background-color: #000;
}
  .megamenu_global-nav__item {
   width: 769px;
   display: inline-block;
   margin-right: 0px;
}

.megamenu_global-nav__list {
   display: flex;
   flex-wrap: wrap;
   margin: 0 0 0 5%;
   padding: 20% 0 0 0;
   list-style: none;
   width: 90%;
}
.megamenu_global-nav__item {
   width: 769px;
   display: inline-block;
   margin-right: 0px;
   margin-top: 40px;
}
.megamenu_global-nav__item h2 {
   font-size: 2.3rem;
   margin-top: 5px;
   color: #fff;
}
.megamenu_global-nav__item a {
   display: block;
   padding: 5% 0%;
   /* border-bottom: 1px solid #D1D1D1; */
   text-decoration: none;
   /* text-shadow: 0px 0px 4px #fff; */
   color: #fff;
   font-size: 2rem;
   line-height: 1.3;
   position: relative;
}
.megamenu_global-nav__item:last-child {
   padding: 0;

}
.megamenu_global-nav__item a:first-child {
padding-top: 0px;
}

.megamenu_global-nav__item span {
color: #fff;
 }
.megamenu_global-nav__item img {
width: 35px; }


.megamenu_global-nav__item .sns_area {
   display: flex;
   justify-content: space-between;
   padding-right: 30px;
}
.sns_area a:first-child {
padding-top: 20px;
}

.sns_menu {
max-width: 100%;
align-items: center;
}


.copyright_sp{
   color: #fff;
   padding: 50px 0px;
 }


.megamenu_copyright_sp {
   display: block;
   font-family: 'noto-sans-jp';
   font-size: 1.3rem;
   text-align: center;
   bottom: 10%;
   /* left: 50%; */
   /* transform: translate(-50%, 0%); */
   margin-top: 60px;
}
.black_hamburger span:nth-of-type(4)::after {
   content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
   position: absolute;
   top: 50px;
   left: -5px;
   font-family: 'noto-sans-jp', sans-serif;
   font-size: 1.6rem;
   text-transform: uppercase;
   color: #000;
 }
 .black_hamburger.active span:nth-of-type(4)::after {
   content:"Close";/*3つ目の要素のafterにClose表示を指定*/
     top: 50px;
     left: -5px;
     color: #000;
 }


 .iso_logo_sp{
   width: 120px;
   transform: translate(-50%, -50%);
   top: 9%;
   left: 59%;
   position: absolute;
   z-index: 2;
 }

 #lastpage_isologo{
   top: 55%;
   position: absolute;
   transform: translate(-50%, 62%);
 }
}