html{font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}

.shutter {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1e1e1e;
  z-index: 9999;
  -webkit-animation: byeShutter 2.6s forwards;
          animation: byeShutter 2.6s forwards;
}
.shutter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: #f3f3f3;
  width: 0;
  height: 1px;
  -webkit-animation: shutterOpen 2.6s forwards;
          animation: shutterOpen 2.6s forwards;
}

.content {
  -webkit-animation: contentScale 2.6s forwards;
          animation: contentScale 2.6s forwards;
}

@-webkit-keyframes byeShutter {
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    z-index: -1;
  }
}

@keyframes byeShutter {
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    z-index: -1;
  }
}
@-webkit-keyframes shutterOpen {
  0% {
    width: 0;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  90% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes shutterOpen {
  0% {
    width: 0;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  90% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@-webkit-keyframes contentScale {
  70% {
    -webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
            transform: perspective(800px) scale(0.9) rotateX(15deg);
  }
  100% {
    -webkit-transform: perspective(800px) scale(1) rotateX(0);
            transform: perspective(800px) scale(1) rotateX(0);
  }
}
@keyframes contentScale {
  70% {
    -webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
            transform: perspective(800px) scale(0.9) rotateX(15deg);
  }
  100% {
    -webkit-transform: perspective(800px) scale(1) rotateX(0);
            transform: perspective(800px) scale(1) rotateX(0);
  }
}

/* main-visial */

.main-v { height: 600px; overflow: hidden; position: relative; }
.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 600px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 24s 0s infinite;
    animation: anime 24s 0s infinite; 
}

.main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; 
  }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; 
  }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; 
  }

  
  .main_h {
    z-index:11;
    position: absolute;
    top:60%;
    left:50%;
    transform:translate(-50%,-50%);
    width:70%;
    height:auto;
    text-align: center;
}

  .main_h h1{font-size: 3.2rem; color: #FFF; text-shadow: 1px 1px 4px #000;}
  .main_h p{font-size: 1.9rem; margin: 20px 0 90px 0; color: #FFF; text-shadow: 1px 1px 4px #000; line-height: 40px;}

  @keyframes anime {
  0% {
        opacity: 0;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    40% {
        opacity: 0;
        transform: scale(1.1) ;
         z-index:9;
    }
    100% { opacity: 0 }
}


.main_h a{display:inline-block; height: 100%; border-radius: 5px; color: #FFF;}
.main_h a:hover{opacity: 0.8;}
.macloud{background:#d12112; width: 40%; font-size: 1.4rem; line-height: 25px; padding: 10px 10px 15px 10px; margin-right: 50px;}
.aicloud{background:#101624; width: 40%; font-size: 1.4rem; line-height: 25px; padding: 10px 10px 15px 10px;}

.macloud span,
.aicloud span{font-size:0.8rem;}



/* header */

.header  {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  padding-top: 30px;
  transition: .3s;
}

.is-fixed  {
  position:  fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  padding-top: 15px;
  background-color: rgba(58,58,58,0.9);
  height: 60px;
}


.head-inner{grid-column: 2 / 12; width: 100%; display: flex; justify-content: space-between;}
.head-logo img{width: 125px;}
.head-inner ul{list-style: none; display: flex; color: #FFF; margin-top: 15px;}
.head-inner li{margin-left: 30px; text-shadow: 0 0 3px #000;}
.header a{color: #FFF;}
.header a:hover{color: #CCC;}

.globalMenuSp{display: none;}




/* mission */

.mission{width: 100%; display: flex;}
.mission-title{width: 50%; background: #eb6129; color: #FFF;}
.mission-title h2{font-size: 1.8rem; font-weight: normal; display: grid; place-items:center; padding-top:140px; letter-spacing: 3px;}
.mission-title p{display: grid; place-items:center; letter-spacing: 3px; padding-bottom: 100px; margin-top: 15px;}
.mission-detail{width: 50%;}
.mission-detail h3{margin: 50px 50px 10px 50px; font-size: 1.8rem; font-weight: normal; line-height: 40px; border-bottom:1px solid; padding-bottom: 9px;}
.mission-detail p{margin: 0 49px; line-height: 24px;}
.mission-detail a{border:1px solid #333; padding: 20px; display: grid; place-items:center; margin: 40px 170px; letter-spacing: 5px;}


/* business */

.top_business{background:#f7f7f7; padding:80px; display: grid;}
.top_business h1{display: grid; place-items:center; font-size: 2rem; letter-spacing: 8px; font-weight: normal;}
.top_business p{place-items:center; display: grid; letter-spacing: 5px; margin-top: 12px;}

 p.business-read{margin-top: 45px; line-height: 30px; letter-spacing: 0; padding: 0 40px;}
 .top_service{margin-top: 80px; padding: 0 40px;}
 .top_service h2{font-size: 2.1rem; font-weight: normal;}
 .top_en{font-size: 1rem; margin-left: 10px;}
 p.service_read{letter-spacing: 0; place-items:baseline; margin-top: 20px;}

 .top_marketingbox,
 .top_pythagorasbox{margin-top: 70px; display: flex;}
 .markeimg{width: 50%;}
 .markeimg img{width: 100%;}

 .marketing-read{width: 50%;}
 .marketing-read h3{margin: 50px 20px 10px 50px; font-size: 1.6rem; font-weight: normal; line-height: 40px; border-bottom:1px solid; padding-bottom: 9px;}
 p.marketing-p{letter-spacing:0; margin: 0 20px 0 50px; line-height: 30px;}
 .marketing-read a{background: #000; color: #FFF; padding:15px 10px; display: grid; place-items:center; margin: 40px 110px 10px 110px;}

 .top_pythagorasbox_m{display: none;}


/* news */

.top-newsbox{margin-top: 60px; display:flex;}
.newsarea{width: 48%;}
.n_right{margin-left: 30px;}
.newsarea a{display: flex;}
.newsimg img{width: 160px;}
.news-text{margin-left:10px;}
.top_newsicon{background: #CCC; width: 55px; padding: 5px 10px; font-size: 0.8rem; float: left;}
.top_newsicon_p{background: #101624; color: #FFF; width: 65px; padding: 5px 10px; font-size: 0.8rem; float: left;}
.top_newsicon_m{background: #d22121; color: #FFF; width: 145px; padding: 5px 10px; font-size: 0.8rem; float: left;}
.news_time{font-size: 0.7rem; vertical-align: -5px; margin-left: 10px;}
p.news_t{font-size: 0.9rem; letter-spacing: 0; line-height: 20px; margin-top: 20px;}

.top_news_btn{margin-top: 80px;}
.top_news_btn a{background: #000; color: #FFF; padding:15px 70px;}


/* about */

.aboutus{background: url(../images/about-bg.jpg); background-size:cover; padding:80px; display: grid;}
.aboutus h1{display: grid; place-items:center; font-size: 2rem; letter-spacing: 8px; font-weight: normal; color: #FFF;}
.aboutus p{place-items:center; display: grid; letter-spacing: 5px; margin-top: 12px; color: #FFF;}
p.about_read{margin-top: 40px;}
.aboutus a{background: #FFF; color: #000; padding:15px 10px; display: grid; place-items:center; margin: 40px 430px 10px 430px;}


/* recruit */

.top_recruit{background:#eb6129; display: flex; position: relative; margin-top: 200px;}
.recruit_bg{width: 35%; padding:50px 0 110px 100px;}
.top_recruit h2{color: #FFF; font-size: 2rem; font-weight: normal;}
.recruit_read{margin-top: 30px; line-height: 30px; color: #FFF;}
.recruit_bg a{background: #FFF; display: grid; place-items:center; margin-top: 30px; padding: 12px 40px; width: 120px;}
.recruit-topimg{display: grid; place-items:flex-end; width: 55%; position: absolute; right: 0; top: -100px;}
.recruit-topimg img{width: 100%;}


/* footer */

footer{
  background: #3a3a3a;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  padding: 30px 0 25px 0;
  color: #FFF;
}

.footer_inner{grid-column: 2 / 12; width: 100%; display: flex; justify-content: space-between;}
.privcy{margin-top: 25px; width: 65%;}
.footer_inner a{color: #FFF; font-size: 0.8rem;}
.footer_inner a:hover{color: #ccc;}
.foot-logo img{width: 210px;}
.foot-copy{font-size: 0.7rem; margin-top: 15px;}

.foot-right{text-align: right; margin-top: 25px; width: 50%;}
.ft-cname{font-size: 1.3rem;}
.ft-adress{margin-top: 10px; line-height: 21px; font-size: 0.9rem;}
.ft-tel{font-size: 1.1rem; margin: 10px 0 30px 0;}
.foot-right a{background: #FFF; color: #000; padding: 10px 75px; border-radius: 3px;}

.isms-footbox{border-top:1px solid #CCC; padding-top:10px; margin-top: 10px;}
.isms-footbox img{width: 10%; float: left;}
.isms-footbox p{font-size: 0.6rem; margin-left: 10px; float: left; line-height: 16px; width: 85%;}

footer.smart{display: none;}


/* Company */

.company_main{background: url(../images/company_main.jpg); background-size: cover; text-align: center; padding: 180px 0;}
.company_main h1{color: #FFF; font-size: 3rem; letter-spacing: 15px; text-shadow: 0 0 5px #000;}
.company_main p{color: #FFF; margin-top: 15px; letter-spacing: 5px; text-shadow: 0 0 2px #000;}

.company_list{margin-top:50px; text-align: center;}
.ceo_message{padding:80px;}

.ceo_message h2 {
  position: relative;
  margin-bottom: 1em;
  text-align: center;
  font-size: 2.2rem;
}
.ceo_message h2:before {
  content: '';
  position: absolute;
  bottom: -20px;
  display: inline-block;
  width: 8%;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
}

.messagebox{display: flex; margin-top: 100px;}
.left_message{width: 55%;}
.left_message h3{font-size: 20px; line-height: 26px;}
.left_message p{font-size: 0.9rem; line-height: 25px; margin-top: 20px;}
.right_images{width: 40%; margin-left: 20px;}
.right_images img{width: 100%;}

p.ceo_name{font-size: 1.5rem; margin-top: 5px;}

.mission_area{background: #eb6129; padding: 80px 0}
.mission_inner{text-align: center; color: #FFF;}
.mission_inner h2 {
  position: relative;
  margin-bottom: 1em;
  text-align: center;
  font-size: 2.2rem;
  color: #FFF;
  letter-spacing: 5px;
}
.mission_inner h2:before {
  content: '';
  position: absolute;
  bottom: -20px;
  display: inline-block;
  width: 5%;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFF;
}

.mission_t{font-size: 1.6rem; margin-top: 80px; padding:0 130px; line-height: 45px;}
.mission_s{font-size: 1.2rem; margin-top: 40px;}


.company_profile{padding: 80px 0;}

.company_profile h2,
.access_map h2 {
  position: relative;
  margin-bottom: 1em;
  text-align: center;
  font-size: 2.2rem;
  letter-spacing: 5px;
}

.company_profile h2:before {
  content: '';
  position: absolute;
  bottom: -20px;
  display: inline-block;
  width: 5%;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
}

.access_map h2:before {
  content: '';
  position: absolute;
  bottom: -20px;
  display: inline-block;
  width: 5%;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
}

.company_profile_list{list-style: none; margin: 80px 200px;}
.company_profile_list li{border-top: 1px solid #747474; padding: 12px 0;}
li.list-top{border-top: none;}
.list-bottom{border-bottom:1px solid #747474;}

.table-tr{display: table; width: 100%;}
.tab-th{display: table-cell; width: 25%; text-align: center; background: #333; vertical-align: middle;}
.tab-th p{background: #333; padding: 20px 0; font-size: 0.8rem; color: #FFF;}
.tab-td{display: table-cell; padding: 0 50px; font-size: 0.8rem; vertical-align: middle;}
.tab-td p{line-height: 23px;}

.access_inner{margin-top: 60px; text-align: center; padding: 0 200px;}
.adress_station{margin-top: 5px; text-align: left; font-size: 12px;}
.adress_corp{margin: 25px 0 50px 0; text-align: left; line-height: 22px;}


/* Service */

.corp_service_main{background: url(../images/corp_service_main.jpg); background-size: cover; text-align: center; padding: 180px 0;}
.corp_service_main h1,
.privcy_main h1{color: #FFF; font-size: 3rem; letter-spacing: 15px; text-shadow: 0 0 5px #000;}
.corp_service_main p,
.privcy_main p{color: #FFF; margin-top: 15px; letter-spacing: 5px; text-shadow: 0 0 2px #000;}

.service_section{padding:80px;}

.service_section h2 {
  position: relative;
  margin-bottom: 1em;
  text-align: center;
  font-size: 2rem;
  line-height: 45px;
}

.service_pythagoras{margin-top: 120px;}
.service_pythagoras h3{
  position: relative;
  margin-bottom: 1em;
  text-align: center;
  font-size: 1.8rem;
}

.service_pythagoras h3:before {
  content: '';
  position: absolute;
  bottom: -25px;
  display: inline-block;
  width: 25%;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
}

.service_flexbox{display: flex; margin-top: 80px;}
.ser_left_img{width: 40%;}
.ser_left_img img{width: 100%;}
.ser_right{width: 50%; margin-left: 30px;}

.ser_right h4{font-size: 1.6rem; line-height: 35px;}
.ser_right p{margin-top: 20px; line-height: 27px;}

.pythagoras_flow{margin-top: 30px;}
.pythagoras_flow img{width: 100%;}

.movie_h4{font-size: 1.8rem; text-align: center; margin:50px 0 30px 0;}

.youtube_movie {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube_movie iframe {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 80%;
}

.corp_service_btn{position: relative;}
.corp_service_btn a{position: absolute; top: -50px; left: 30%; background: #000; padding: 20px 100px; color: #FFF; border-radius: 5px;}

/* プライバシーポリシー */

.privcy_main{background:url(/images/privacy-main.jpg); background-size: cover; height:350px;}
.privcy_area{margin:0 auto; max-width: 1000px; padding: 80px 30px;}
.privcy_area h1{font-size: 1.6rem;}
.privcy_area h2{margin-top: 50px; font-size: 1.2rem;}
.p04{margin-top: 15px; line-height: 30px; font-size: 0.9rem;}

.eu-list{margin-top: 30px;}
.eu-list li{line-height: 30px; margin-left: 40px; font-size: 0.9rem;}

.aboutweb_main{background:url(/images/aboutweb-main.jpg); background-size: cover; height:350px;}

/* isms */

.isms-bg{background: url(../images/isms-bg.jpg) center no-repeat; background-size: cover; padding:230px 40px 150px 75px; text-align: center;}
.isms-bg h1{font-size: 2.8rem; font-weight: bold; color: #FFF; letter-spacing: 8px; text-shadow:0 0 5px #000;}
.isms-bg p{color: #FFF; margin-top:20px; text-shadow:0 0 5px #000;} 

.isms-section{margin:60px auto; max-width: 1000px;}
.isms-section h2{font-size: 1.9rem; font-weight: normal;}
.isms-section p{margin-top:15px; font-size: 0.8rem; line-height: 25px;}
.isms-section02{margin:60px auto;}

.table-box{margin:0 40px 30px 40px;}
.isms-images{text-align:right;}
.isms-images img{width: 15%;}


.joblist{list-style:none;}
.joblist li{border-top: 1px solid #747474; padding: 12px 0; }

.top-space{margin-top:50px;}

.table-tr{display: table; width: 100%;}
.tab-th{display: table-cell; width: 250px; text-align: center; background: #333; vertical-align: middle;}
.tab-th p{background: #333; padding: 20px 0; color: #FFF; font-size: 0.8rem;}
.tab-td{display: table-cell; padding:10px 50px; font-size: 0.8rem; vertical-align: middle;}
.tab-td p{line-height: 23px;}


/* スマホ用　------------------------------------------------------------------------------------ */

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

.wrap{overflow: hidden;}

.header{padding-top: 20px;}
.head-inner ul{display: none;}
.head-logo img{width:95px;}

/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #FFF;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: #3a3a3a;
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;

}

.globalMenuSp{display:block;}


.main_h{top:50%; width: 100%;}
.main_h h1{font-size: 2.3rem;}
.main_h p{font-size: 1rem; margin:20px 20px 40px 20px; line-height: 25px;}
.macloud,
.aicloud{width: 80%; font-size: 1.2rem; padding: 10px 25px 15px 25px; margin:0 10px;}
.macloud span{font-size: 0.7rem;}

.mission{display: block;}
.mission-title{width: 100%;}
.mission-title h2{font-size: 1.5rem; padding-top:50px;}
.mission-title p{padding-bottom:40px;}

.mission-detail{width: 100%;}
.mission-detail h3{margin:30px 20px 10px 30px; font-size: 1.6rem; line-height: 37px;}
.mission-detail p{margin: 0 20px;}
.mission-detail a{margin:40px;}

.top_business{padding: 20px; display: block;}
p.business-read{padding: 0;}

.top_service{padding: 0;}
.top_marketingbox,
.top_pythagorasbox_m{margin-top:40px; display: block;}
.markeimg{width: 100%;}
.marketing-read{width: 100%;}
.marketing-read h3{margin:50px 10px 10px 10px; font-size: 1.4rem; line-height: 30px;}
p.marketing-p{margin:0 10px 0 10px;}
.marketing-read a{padding: 25px 10px; margin:40px 20px 10px 20px;}
.top-newsbox{margin-top: 40px; display: block;}
.newsarea{width: 100%;}
.newsarea a{display: block; margin-bottom: 30px;}
.newsimg{display: none;}

.top_pythagorasbox{display: none;}


.n_right{margin-left: 0;}
.aboutus{padding: 30px; display: block; margin-top: 30px;}
.aboutus p{text-align: center; line-height: 25px;}
.aboutus a{padding: 15px 60px; display: block; margin: 30px 0 10px 10px; text-align: center;}

.recruit_bg{width:100%; padding: 130px 20px 40px 20px;}
.recruit_bg a{width: 75%;}
.recruit-topimg{width: 100%;}


/* footer */
footer{display: none;}
footer.smart{display: block; padding:30px 20px 25px 20px; width: 90%; margin-top:40px;}
.foot-logo img{width: 100%;}
.foot-right{width: 100%;}
.foot-right a{padding:15px 130px;}

.privcy{margin-top: 45px; width: 100%;}
.isms-footbox p{width: 75%;}


/* service */

.corp_service_main,
.company_main{padding: 100px 0;}
.corp_service_main h1,
.company_main h1{font-size: 2.3rem;}
.service_section,
.ceo_message{padding:40px 20px;}
.service_flexbox{display: block;}
.ser_left_img{width: 100%;}
.ser_right{width: 100%; margin-left: 0; margin-top: 10px;}
.ser_right h4{font-size: 1.2rem; line-height: 28px;}

.youtube_movie iframe{width: 100%; left:0; height: 85%;}
.corp_service_btn a{top: -10px; left:0; padding: 20px 45px;}


/* company */

.company_list{padding:0 20px; line-height: 40px;}
.messagebox{display: block; margin-top: 55px;}
.left_message{width: 100%;}
.left_message h3{font-size: 19px; line-height: 26px;}
.right_images{display: none;}

.mission_t{padding:0 20px; font-size: 1.6rem;}

.company_profile{padding: 70px 0 0 0;}
.company_profile_list{margin:70px 20px;}

.tab-th{display:initial; width: 100%;}
.tab-td{display:initial; padding:0;}
.tab-td p{margin-top: 15px;}

.access_inner{padding:0 20px;}

}