@charset "utf-8";

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  scroll-padding-top: 80px;
  /* ページ内リンクのずれを解消 */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: white;
  margin: 0;
  padding: 0;
  /* ヒーローイメージの隙間を消すもの */
}

p{
  font-family: "Noto Sans JP", sans-serif;
}

.slide-menu {
  display: none;
}

ul {
  list-style: none;
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999999;
  text-align: center;
  color: #000;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.opLogo{
  width: 20%;
}

.opLogo img{
  width: 100%;
}

.opLogo h3{
  font-family: "Economica", sans-serif;
  font-size: 2em;
  text-align: right;
}

.ballAnime{
	width: 200px;
	height: 100px;
	padding-top: 100px;
	margin: 0 auto;
}

.ball {
	width: 10px;
	height: 10px;
	margin: 10px auto;
	border-radius: 50px;
}

.ball:nth-child(1) {
	background: #005089;
	animation: right 1s infinite ease-in-out;
}

.ball:nth-child(2) {
	background: #ff8c00;
	animation: left 1.1s infinite ease-in-out;
}

.ball:nth-child(3) {
	background: #005089;
	animation: right 1.05s infinite ease-in-out;
}

.ball:nth-child(4) {
	background: #ff8c00;
	animation: left 1.15s infinite ease-in-out;
}

.ball:nth-child(5) {
	background: #005089;
	animation: right 1.1s infinite ease-in-out;
}

.ball:nth-child(6) {
	background: #ff8c00;
	animation: left 1.05s infinite ease-in-out;
}

.ball:nth-child(7) {
	background: #005089;
	animation: right 1s infinite ease-in-out;
}

@-webkit-keyframes right {
	0% {
		-webkit-transform: translate(-15px);
	}
	50% {
		-webkit-transform: translate(15px);
	}
	100% {
		-webkit-transform: translate(-15px);
	}
}

@-webkit-keyframes left {
	0% {
		-webkit-transform: translate(15px);
	}
	50% {
		-webkit-transform: translate(-15px);
	}
	100% {
		-webkit-transform: translate(15px);
	}
}

@-moz-keyframes right {
	0% {
		-moz-transform: translate(-15px);
	}
	50% {
		-moz-transform: translate(15px);
	}
	100% {
		-moz-transform: translate(-15px);
	}
}

@-moz-keyframes left {
	0% {
		-moz-transform: translate(15px);
	}
	50% {
		-moz-transform: translate(-15px);
	}
	100% {
		-moz-transform: translate(15px);
	}
}

@keyframes right {
	0% {
		transform: translate(-15px);
	}
	50% {
		transform: translate(15px);
	}
	100% {
		transform: translate(-15px);
	}
}

@keyframes left {
	0% {
		transform: translate(15px);
	}
	50% {
		transform: translate(-15px);
	}
	100% {
		transform: translate(15px);
	}
}


/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg {
  display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scaleY(0);
  background-color: #b0c4de;
  /*伸びる背景色の設定*/
  animation-name: PageAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes PageAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }

  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }

  50.001% {
    transform-origin: top;
  }

  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}

/*画面遷移の後現れるコンテンツ設定*/

#container {
  opacity: 0;
  /*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* スライドイン */

.slideinTop {
  animation: slideinTop 1s;
}

@keyframes slideinTop {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

.slideinBottom {
  animation: slideinBottom 1s;
}

@keyframes slideinBottom {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}

.slideinLeft {
  animation: slideinLeft 1s;
}

@keyframes slideinLeft {
  0% {
    transform: translateX(-500px);
  }
  100% {
    transform: translateX(0);
  }
}

.slideinRight {
  animation: slideinRight 1s;
}

@keyframes slideinRight {
  0% {
    transform: translateX(500px);
  }
  100% {
    transform: translateX(0);
  }
}

/* 拡大 */
.zoomIn{
  animation:zoomIn 1s;
}

@keyframes zoomIn{
  from {
  transform: scale(0.3);
  }

  to {
      transform: scale(1);
  }
}

/* header */

.header {
  width: 100%;
  height: 7em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* ロゴとメニューを水平揃え */
  position: fixed;
  top: 0;
  margin: 0;
  background-color: white;
  box-shadow: 2px 2px 4px;
  z-index: 1000;
}

.header h1 {
  width: 300px;
  margin-right: auto;
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
}

.header .logo img {
  width: 100%;
  /* padding-top: 0.3em; */
  z-index: 1001;
}

.header .logo span {
  line-height: 0.1%;
  font-size: 0.7em;
  font-weight: bold;
  align-self: flex-end;
  font-family: "Economica", sans-serif;
  text-decoration: none;
}

.header nav ul {
  display: flex;
  z-index: 1000;
  padding-top: 1em;
}

.header li {
  margin-left: 3em;
  /*　リスト内要素(li)の前（左側）にマージンを取ることでスペースを空けて並べている　*/
  list-style: none;
  /*　リストのスタイル（黒丸）を消す　*/
}

.header li a {
  font-family: "Oswald", sans-serif;
  font-size: 1.3em;
  color: black;
  text-decoration: none;
  /*　aタグのスタイル（下線）を消す　*/
  line-height: 0.3em;
}

.header li a span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.6em;
  font-weight: 800;
}

.header ul li a:hover {
  color: red;
}

.header .contBtn a,
.topixWrap .moreBtn a {
  display: block;
  text-align: center;
  margin: 0 2em;
  padding: 6px 28px;
  color: #fff;
  background: #444;
  box-shadow: 0 3px 5px rgb(0 0 0 / 50%);
  border-radius: 50px;
  text-decoration: none;
  z-index: 1001;
}

.header .contBtn a:hover,
.moreBtn a:hover {
  background: red;
  text-decoration: none;
  font-weight: bold;
}

/* ここまでheader */

.mv {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  width: 100%;
  position: relative;
  margin: 0 auto 3em auto;
}

.mv-content {
  width: 100%;
  max-height: 100vh;
  background-color: #eff3f1;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  margin-top: 0;
  padding-bottom: 32em;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

#mvSpace {
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100%;
  height: 600px;
  margin-top: 10em;
  margin-bottom: 10em;
}

/*========= particle js を描画するエリア設定 ===============*/

#particles-js {
  position: fixed;
  /*描画固定*/
  z-index: -1;
  /*描画を一番下に*/
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
  /*背景色*/
  opacity: 0.4;
}

#wrapper {
  position: relative;
  /*描画を#particles-jsよりも上にするためposition:relative;を指定*/
  z-index: 1;
  /*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
  width: 100%;
  height: 100%;
}

.mainVisual h2,
.mv-title h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 2px 2px 4px darkblue;
  line-height: 2.5em;
}

.mainVisual h2 span,
.mv-title h2 span {
  font-family: "Zen Old Mincho", serif;
  display: flex;
  flex-direction: column;
  font-size: 0.4em;
  text-align: center;
  padding-top: 1em;
}

.mv-title {
  width: 70%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 25em;
  line-height: 5em;
}

.mv-title .sn-logo {
  width: 20%;
  display: flex;
  margin-bottom: 4em;
}

.sn-logo img {
  width: 100%;
  object-fit: cover;
}

/* トップに戻るボタン */

.topReturn {
  position: fixed;
  right: 1em;
  bottom: 1em;
  display: inline-block;
  font-size: 1.5em;
  /* 文字サイズ */
  font-family: 'Times New Roman', Times, serif;
  /* padding: 8px 8px; */
  background: lightseagreen;
  color: white;
  /* border-radius50%で円形になる */
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  text-align: center;
  box-shadow: 2px 2px 4px gray;
  padding-top: 0.5em;
  z-index: 1001;
}

.topReturn a {
  color: white;
  text-decoration: none;
}

.topReturn:hover {
  background: red;
  text-decoration: none;
}

.topReturn a:active {
  background: brown;
  color: white;
}

.secondCopy {
  text-align: center;
  font-family: "Sawarabi Gothic", sans-serif;
  /* font-family: "Zen Old Mincho",serif; */
  /* font-family: "Noto Sans JP", sans-serif; */
  /* font-family: "Shippori Mincho", serif; */
  font-weight: 500;
  font-style: normal;
  font-size: 2em;
  border-bottom: blueviolet double 3px;
  padding-bottom: 1em;
  margin-top: 3em;
  margin-bottom: 2em;
}

.secondCopy span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8em;
}

/*========= 1文字ずつ出現させるためのCSS ===============*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

.bk {
  display: block;
  color: white;
  font-weight: bold;
  width: 7em;
  height: 1.5em;
  text-align: center;
  /* padding: 0.5em; */
  margin: 1em;
}


/*
じわっ
*/

.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}

/* ここからmission */

.mission {
  width: 90%;
  margin: 2em auto;
  display: flex;
}

.missionText {
  width: 60%;
  padding: 1em 3em;
  height: auto;
  margin-top: 5em;
}

.missionCopy {
  font-size: 1.5em;
  border-bottom: double 5px gray;
  line-height: 2em;
}

.missionSent {
  margin-top: 3em;
  padding: 1em 2em;
}

.missionImg {
  width: 40%;
  height: auto;
}

.missionImg img {
  width: 100%;
  object-fit: cover;
}


/* achieve新　ここから */

.achieveContainer {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr 1fr 1fr 1fr 0.5fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". achImg achImg achImg achskill achskill achskill achskill ."
    ". achImg achImg achImg achskill achskill achskill achskill ."
    ". achImg achImg achImg achskill achskill achskill achskill ."
    ". develop develop develop . licence licence licence ."
    ". develop develop develop . licence licence licence ."
    ". develop develop develop . licence licence licence ."
    ". develop develop develop . licence licence licence .";
}

.lang,
.os,
.db,
.supplierList,
.lineage,
.licenceBk {
  background-color: #DEEBF4;
  column-count: 2;
  padding-top: 1em;
  padding-bottom: 1em;
}

.achskillCopy {
  margin: 1em auto;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #7f7fff, #7fff7f) 1;
  line-height: 1.5em;
}

.licence4th {
  margin: 2em auto;
  padding-left: 1em;
}

.achImg {
  grid-area: achImg;
}

.achImg img {
  width: 100%;
  object-fit: cover;
  padding-right: 2%;
}

.achskill {
  grid-area: achskill;
}

.develop {
  grid-area: develop;
}

.develop img {
  width: 84%;
  margin: auto;
}

.licence {
  grid-area: licence;
}

.achieveBk li,
p,
.licenceBk {
  padding-left: 2em;
}

/* ここまで */

.thirdCopy {
  width: 100%;
  border-bottom: solid 3px black;
  margin-top: 2em;
  margin-bottom: 1em;
}

/* recruit */

.recruit {
  width: 70%;
  margin: auto;
}

.recrEng {
  width: 100%;
  margin: 2em auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  flex-grow: 1;
  border: lightgray double 5px;
}

.recrEng div {
  display: flex;
  flex-direction: row;
  padding: 1em 0em;
}

.recrEng div dt {
  width: 25%;
  border-right: double 5px lightgray;
  margin-left: 2em;
}

.recrEng div dd {
  width: 60%;
  padding-left: 2em;
}

.recrEng div:not(:last-child) {
  margin-bottom: 1px;
  border-bottom: 1px solid lightgray;
}

.recrEng div:nth-child(odd) {
  background-color: #DEEBF4;
}

/* ここからengineerVoice */

.engVoice {
  width: 96%;
  display: flex;
  flex-flow: row wrap;
  margin: auto;
  align-items: stretch;
  justify-content: center;
}

.readMore {
  /* text-align: center; */
  width: 60%;
  margin: auto;
  list-style-type: none;
  transition: 1s;
  cursor: pointer;
  border: dashed gray 0.8px;
  display: flex;
  justify-content: center;
}

.readMore::-webkit-details-marker {
	display: none;
}

.readMore p {
  width: 100%;
  margin: auto;
  text-align: center;
}

.readMore .closeTxt {
  display: none;
}

.engDetails[open] summary .openTxt {
  display: none;
}

.engDetails[open] summary .closeTxt {
  display: inline-block;
}

.engFrame {
  display: flex;
  width: 40%;
  height: auto;
  /* border: double 2px gray; */
  padding: 2em;
  align-items: stretch;
  /* height: 20em; */
}

.engText h4 {
  font-size: 2em;
  margin-top: 1em;
}

.engFrameLeft {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.engImg {
  width: 10em;
  height: auto;
  border-radius: 50%;
}

.engName {
  margin-top: 2em;
  font-weight: bold;
}

.engName span {
  font-size: 0.7em;
}

.engFrameRight {
  width: 65%;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.engineerComment {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border: 2px solid #DEEBF4;
  flex-grow: 1;
  align-self: stretch;
  border-radius: 2em;
  /* 角丸を指定 */
  font-size: 0.9em;
}

/* 三角アイコン - 枠線付きの吹き出し */
.engineerComment::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 10em;
  border-right: 15px solid #DEEBF4;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.engineerComment::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 10em;
  border-right: 15px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* ここからコンタクト */

.contact {
  width: 100%;
  margin: auto;
}

.mailForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* align-items: center; */
  justify-content: center;
  align-self: stretch;
  margin: 2em auto;
  line-height: 2em;
}

.formBox {
  display: flex;
  flex-grow: 1;
  width: 80%;
  margin: auto;
}

.txt {
  width: 60%;
  border: #c4c4c4 1px solid;
  margin: 1em auto;
  text-align: left;
}

label {
  display: inline-block;
  width: 35%;
  vertical-align: top;
  padding-left: 10em;
}

/* プライバシーポリシースクロール */

.ppWrapper {
  width: 80%;
  height: 250px;
  padding: 2em;
  border: 0.6px solid gray;
  overflow-y: scroll;
  margin: 2em auto;
}

.policyBox h3 {
  text-align: center;
  margin-bottom: 1em auto;
}

.policyHead {
  font-weight: bold;
  margin: 1em;
}

.policyAdd {
  border: dashed black 1px;
  width: 30em;
  text-align: center;
  margin: auto;
}

.policyDate {
  margin: 1em auto;
  font-weight: bold;
}

.ppAdmin {
  display: flex;
  width: 100%;
  padding-top: 2em;
  justify-content: center;
  margin: auto;
}

.ppAdmin p {
  width: 40%;
  padding: 0;
}

.ppChk {
  width: 7%;
  padding: 0;
  margin: 0;
}

.submit {
  width: 30%;
  align-self: center;
  margin: 2em auto;
}

/* footer */

.box img {
  width: 80%;
  margin-bottom: 1.5em;
}

.map {
  width: 80%;
  text-align: center;
}

.map iframe {
  width: 100%;
  height: auto;
}

.footer05 {
  color: #808080;
  background: #DEEBF4;
  padding: 30px;
  padding-top: 120px;
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
}

.footer05 a {
  color: #808080;
  text-decoration: none;
}

.footer05 li a:hover {
  text-decoration: underline;
}

.footer05 .wrap {
  width: 90vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer05 .wrap h3 {
  margin: 0 0 10px 0;
  padding: 0;
  color: #696969;
  border-bottom: 1px #c4c4c4 solid;
}

.footer05 .wrap p {
  margin: 0;
  padding: 0 0 20px 0;
}

.footer05 .wrap .box {
  width: 28%;
  margin-right: 2em;
}

.footer05 .wrap .box:last-child {
  margin-right: 0;
}

.footer05 .wrap .box ul {
  margin: 0;
  padding: 0 0 20px 0;
  list-style: none;
}

.footerSite {
  margin-bottom: 2em;
  padding-bottom: 2em;
}

.copyright {
  width: 100%;
  padding: 1em auto;
  margin-top: 1em;
}

.copyright p {
  text-align: center;
  font-weight: bold;
}